web语义化 html语义化,web前端：谈谈你对HTML语义化的理解

超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语：Head)、和“主体”部分(英语：Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

1.什么是html语义化？

基本上都是围绕着几个主要的标签，像标题(h1-h6)，列表(li)，强调(strongem)等。

根据内容的语义化(内容结构化)，选择合适的标签(代码语义化)，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

2.为什么要语义化？

为了在没有css的情况下，页面也能呈现出很好的内容结构和代码结构。

为了提升用户体验，如：title，alt用于解释名词或解释图片信息，lable标签的活用。

有利于和搜索引擎建立良好的沟通。

方便其他设备解析(如屏幕阅读器，盲人阅读器，移动设备)，以意义的方式来渲染网页。

便于团队的开发和维护，语义化更具有可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.写HTML代码是应注意什么？

尽可能少的使用无语义的标签div和span

在语义不明显时，既可以使用div或者时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。

不要使用纯样式的标签，如：b，font，u等，改用css设置。

需要强调的文本，可以包含在strong(加粗)或者em(斜体)标签中(浏览器预设样式，能用css样式就不用它们)

使用表格，标题要用caption，表头用thead，主体部分用tbody包围，尾部要tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td

表单域要用fieldset标签包起来，并用legend标签说明标签的用途。

每个input标签对应的文本框都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someID来说明文本和相对应的input关联起来

简单来说就是：用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

在网页中除了可显示常见的ASCII字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，如：；二是键盘上没有的字符。