189 8069 5689

HTML标签语义和HTML标签语义化的设计-创新互联

前段时间，在网上浏览时，发现国内几家互联网巨头公司的前端开发招聘题目，依然都提到一个标签语义化的问题，这个话题在已经是老生常谈了，但依旧问题多多，归结于一个习惯吧，有时间我也太懒，没有多加考虑就直接写代码，我知道我错了！童鞋们，我们得让标签语义化成为一种习惯！今天就再普及一下标签语义化，也鞭策下自己，别整天迷迷糊糊的！

在网页设计中，我们时常都会听到标签语义化这个名词，HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签，这样一来，不管是谁都能看懂这块内容是什么。

一个网页就好像是一栋房子，HTML结构就是一面面的墙，而标签则是一块块的砖，砖要摆放有序，整整齐齐，墙才会牢固。最后css则是装饰材料，美不美就靠她了。因此，我们要有一个优秀的网页，既要提供一个干净而又有清晰结构的HTML，更加离不开css的极致美化。  现在有很多小伙伴在自学，但是一个人的能力是有限的，遇到问题没人帮你解决，我给大家推荐一个大神学习交流q un,希望对大家能有所帮助,q un号前面是五七四，中间是一八九，后面是三五九。这里每晚都有大牛直播教学。
从上面也说明标签语义化极其重要，HTML每个标签都有自己的语义，都有自己适用的范围。但往往会被我们忽略或者被我们滥用，举个例子：在一个页面中

用了几十个甚至上百个，这是个无意义的标签，只是表示一个层而已，非常不利于后期的维护；而标签则是一个数据标签，该用的时候，我们就要大胆使用。
标签语义化的好处

让你使用标签语义化的理由可以有无数条：

   去掉样式或者样式丢失时页面结构依然清晰分明
   移动设备能够更加完美的展示你的网页（移动设备对css的支持较弱）
   阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式（无障碍阅读）
   搜索引擎会根据标签的语义确定上下文和权重问题
   便于后期的开发以及维护，团队合作效率提高
   ……

HTML标签语义汇总

为了更快更好的运用标签语义化，下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列，其中 new :为 HTML5 中的新标签。
标签    描述
   定义注释。
   定义文档类型。
   定义超链接。
   定义缩写。
   HTML 5 中不支持。定义首字母缩写。
   定义地址元素。
   HTML 5 中不支持。定义 applet。
   定义图像映射中的区域。
   定义 article。
   定义表格列的属性。
   定义表格列的分组。
   定义命令按钮。
   定义下拉列表。
   定义定义的描述。
   定义删除文本。
   定义元素的细节。
   定义定义项目。
   HTML 5 中不支持。定义目录列表。
   定义文档中的一个部分。
   定义定义列表。
   定义定义的项目。
   定义强调文本。
   定义外部交互内容或插件。
   定义 fieldset。
   定义 figure 元素的标题。
   定义媒介内容的分组，以及它们的标题。
   HTML 5 中不支持。
   定义 section 或 page 的页脚。
   定义表单。
   HTML 5 中不支持。定义子窗口（框架）。
   HTML 5 中不支持。定义框架的集。

to    定义标题 1 到标题 6。
   定义关于文档的信息。
   定义 section 或 page 的页眉。
   定义有关文档中的 section 的信息。
   定义水平线。
   定义 html 文档。
   定义斜体文本。

   定义表格标题。
   HTML 5 中不支持。定义居中的文本。
   定义引用。
   定义计算机代码文本。