整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？
html5文档类型声明：<!doctype html>
html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。
<html>
<head></head>
<body></body>
</html>
在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。
head头部有以下几种常用标签：
meta：主要提供有关页面的元信息。
link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。
title：页面标题的标签。
script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。
1、块级标签。
块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端页面显示的效果如下图：
常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、内联标签。
内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：
常用的内联标签有：span、a、b、strong、i、em 。
3、内联块级标签。
内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：
常用的内联块级标签有：img、input、textarea。
4、区域标签。
所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。
常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。
5、表单标签。
这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：
表单常用的标签有：form、input、select、option、textarea 。
以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
天给学编程的你们推荐六款好用的IDE工具，快来看看吧！
Cloud Toolkit 是一款 IDE 插件，可以帮助开发者更高效地开发、测试、诊断并部署应用。通过 Cloud Toolkit，开发者能够方便地将本地应用一键部署到任意机器（本地或云端），并内置 Arthas 诊断、高效执行终端命令和 SQL 等，提供 IntelliJ IDEA 版，Eclipse 版，PyCharm 版和 Maven 版。
工具的使用场景：
每次修改完代码后，是否正在经历反复地打包？
在 Maven 、Git 以及其他运维脚本和工具的之间频繁切换？
采用 SCP 工具上传？使用 XShell 或 SecureCRT 登录服务器？替换部署包？重启？
文件上传到服务器指定目录，在各种 FTP、SCP 工具之间频繁切换 ？
工具地址：https://link.segmentfault.com/?enc=5YvdJW5UrcWb%2Fmp4Fe4sFw%3D%3D.qPsV2br9lhB4FZ1hrFRuqPwcBDBj4W1vokmF48SCI86bC9DMcy0r9QnB%2BUQq6a9l
说起Jetbrains这家公司，大家一定不陌生，如果陌生那你也一定用过他家的IDE工具集，比如，以下的产品。
最有名气的就是IDEA这个万能IDE了，当然一般也就是学习编写Java程序时使用，jetbrains的IDE工具最具有的特色便是智慧了，代码提示，代码补全，以及数以万计的插件、主题等。
不管是什么语言，目前常用的语言IDE都有它的一席之地。
Jetbrains各类工具的作用范围
RM->RubyMine是一款针对于Ruby语言的IDE工具
PC->PyCharm是一款面向专业的Python开发者的IDE工具
IJ->IntelliJ IDEA是一款功能强大，符合人体工程学的 JVM IDE，一般用于Java语言的开发
PS->PhpStorm是一款高效智能的PHP开发工具
GO->GoLand 使读取、写入和更改 Go 代码变得非常容易
RD->JetBrains Rider 是一款基于 IntelliJ 平台和 ReSharper 的跨平台 .NET IDE
AC->AppCode适用于 iOS/macOS 开发的智能 IDE
WS->WebStorm 是一个适用于 JavaScript 和相关技术的集成开发环境
CL->CLion是一款智能的 C 和 C++ 编辑器，也是一款跨平台的 IDE工具
DG->DataGrip是一个数据库管理工具，基本上支持市面上所以数据库环境的连接
R#->ReSharper是一款适用于.NET开发者的Visual Studio扩展 同时Jetbrains的工具与扩展还远远不止这些，甚至还有自我开发的新型语言->kotlin，可以说是浓缩版的Java
具体地址：https://www.jetbrains.com.cn/products/#type=ide-vs
OpenSumi 是一款面向垂直领域，低门槛、高性能、高定制性的双端（Web 及 Electron）IDE 研发的框架。
框架早期由阿里集团淘系工程团队及蚂蚁集团体验技术部、研发效能团队联合发起，共同研发的 IDE 标准化研发框架。它基于 TypeScript + React 进行编码，实现了包含资源管理器、编辑器、调试、Git 面板、搜索面板等核心功能模块，开发者只要基于我们的起步项目进行简单配置，便可以快速地搭建属于自己的本地或云端 IDE 产品，框架自身兼容 VS Code 插件生态，主流 VS Code 插件均可无缝在基于 OpenSumi 研发的产品中运行，同时，框架也为开发者提供多种低成本，高定制的视图定制能力，能满足 IDE 场景下绝大多数的视图定制场景。
针对小程序研发场景， 支付宝小程序开发者工具 以及 淘宝小程序开发者工具 便是使用了 OpenSumi 作为核心框架进行实现。
具体地址：https://opensumi.com/zh
Atom 是由 GitHub 的程序员们打造的称为“属于21世纪”的代码编辑器。它开源免费跨平台（支持 Windows、Mac、Linux 三大桌面平台），并且整合 GIT 并提供类似 SublimeText 的包管理功能，作为一个现代的代码编辑器，Atom 支持各种编程语言的代码高亮(HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown 等等)、 与大多数其他编辑器相比，Atom 的语言支持已经算是覆盖非常全面了。
另外，它的代码补全功能（也叫Snippets） 也非常好用，你只需输入几个字符即可展开成各种常用代码，可以极大提高编程效率。
官方地址：https://atom.io/
FinClip 推出的小程序 IDE 工具，界面与微信小程序的开发工具类似，发现功能挺强大的，界面非常的简洁，上手门槛比较低，简单易上手，这款 IDE 工具的实际名称是 FIDE （ FinClip Integrated Development Environment ）是 FinClip 为便于开发者更简单、高效地调试小程序的小程序开发调试工具。
FIDE的亮点是，它支持 「「小程序一键转换成 APP」」 ，可以将已有小程序代码导出为 IOS 与 Android 中可用的工程文件，由于导出的工程文件已经集成了 FinClip SDK ，所以所生成的APP直接拥有小程序的运行能力，后续可在这个 APP 上继续上架更多小程序，自建自己的小程序生态。
工具地址： https://www.finclip.com/downloads/
NetBeans 是 Java 的集成开发环境。这是一个了不起的IDE，用户评分为4.1分（满分5分），用户满意度高达82%。它可以在Windows，Linux，macOS和Solaris上运行。它具有内置工具，可为从产品设计到部署的整个软件开发生命周期增加价值。NetBeans 的一些主要功能包括：
它可以检测错误并为您提供智能代码编译功能。
通过 NetBeans，您可以直接创建、调试、部署和测试应用程序。
它具有非常简单易用的管理功能。
它具有惊人的代码比较功能，可帮助您同时编写类似的代码 。
具体地址：https://netbeans.apache.org/
-----------------------------------
为了帮助大家，轻松，高效学习C语言/C++,给大家分享我收集的资源，从最零基础开始的,帮助大家在学习C语言的道路上披荆斩棘！
编程学习书籍分享：
编程学习视频分享：
整理分享（多年学习的源码、项目实战视频、项目笔记，基础入门教程）
对于C/C++感兴趣可以关注小编在后台私信我：【编程交流】一起来学习哦！可以领取一些C/C++的项目学习视频资料哦！已经设置好了关键词自动回复，自动领取就好了！
.标签语义化
提到标签，很多刚入门前端开发的人，肯定都会很纳闷，这么多HTML标签我如何记住呢？我又应该根据什么依据去正确使用它呢？其实这样的问题，我刚开始和大家一样苦闷，但是在我学习Web页面开发的过程中，然后不断的积累，不断的总结，发现要想记住HTML标签以及怎样更好的去使用这些标签，需要做到以下三点：
第一点：不要死记硬背，没意义，只需要记住常用的哪几个足矣。
第二点：根据内容选择使用HTML标签，什么意思呢？见下文分解。
第三点：遵循W3C的规范。
首先，第一点咱们就不用说，不让死记硬背，就是要多写页面，多敲代码，久而久之孰能生巧，巧能生花，慢慢的你就能记住这些标签了，而且在开发页面的过程中，你们会发现，咱们最常用的也就是那么几个而已。
其次，第二点根据内容选择使用HTML标签，这一点非常关键，因为你掌握了这一点，你能很好地去使用HTML标签，并且能让页面变得很优质，这也会提高你网页被搜索引擎收录。
最后，也就是第三点，这一点自然不用怀疑，如果要想让页面更好的在不同的浏览器中呈现出一致的效果，那么必须遵循W3C的规范。
说了这么多，只是一些学习需要注意的问题，下面才是真正解开怎样去使用和记住标签这个谜团的方法。
我们在使用标签的过程中，大家会发现类似的标签，比如标题标签（h1-h6）、p（段落标签）、a（超链接标签）以及图片标签（img）等，通过这些标签的名称，咱们是不是不难理解吧，很直观的就知道这些标签该怎么，用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来，移动Web都是通过H5去开发页面，而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。
那么什么是标签语义化呢？所谓的标签语义化，指的就是标签所代表的含义。咱们可以通过标签的含义，正确地去使用它。
标签语义化的作用：
如下图所示，通过使用语义化标签和没使用任何标签，就能直观感受到语义化标签的好处。
普通的文本和使用语义化标签后的效果对比图
那么如何去判断一个页面中，语义化是否良好呢？很简单，直接扒掉CSS这层漂亮的衣服，当我们把CSS去掉后，如果页面中的结构依然组织有序，并且有良好的可读性，那么它就是非常良好的。
如何去使用这些标签呢？首先根据内容确定语义化的标签，其次再根据呈现需求，使用CSS样式。因此HTML标签并非通过死记硬背，而是通过在使用的过程中，利用HTML标签的语义化去记忆。如下图所示，通过使用语义化标签，瞬间就能把普通的文本，以更清晰的结构呈现出来。
使用语义化的普通文本，变得更为结构清晰
2.常用标签分类汇总
通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签，这些标签又被统称为排版标签。
在开发中，排版标签主要是和CSS搭配使用，主要是用于显示网页的整体结构，也是网页布局中常用的标签。下面我一一了解一下。
排版标签：
【1】标题标签（h1-h6）
标题标签的使用
呈现的效果如下：
呈现的效果
一句话总结：使用了标题标签的文字会加粗，会根据级别显示文字的大小，并且一行只能放一个标题。
【2】段落标签（p）
p标签语法格式
【3】水平线标签（hr）
【4】换行标签（br）
文本
呈现效果：
使用br标签后的效果
【5】div和span标签
最后给大家来一个完美的总结：
排版标签的汇总
难道这就完了吗？咱们的标签就只有这些常用的吗？那当然不是，咱们接下来再看我们的文本格式化标签。
文本格式化标签
文本格式化标签的作用：通常文本格式化标签主要用于网页中文字样式的设置，比如字体加粗、斜体或下划线等效果，当然后期也会通过CSS样式来实现，会更加完美。
常见的文本格式化标签如下：
文本格式化标签
它们分别的区别：
我么网页中除了排版标签、文本格式化标签，当然还少不了图片标签（img），通过图片的展示，会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。
图片标签（img）
img标签属性
标签属性的特点：
图片标签属性使用
链接标签
a标签的常见属性
提示：
内部链接地址
注释标签
注释标签
好了，各位小伙伴，今天我就给大家分享到这儿了，希望我给大家总结的内容，能帮到正在浏览我这篇内容的前端开发者，也希望你们有所收获。如果喜欢的，可以点击关注，会继续给大家分享更多的内容。
*请认真填写需求信息，我们会在24小时内与您取得联系。
