前端面试 HTML— 谈谈你对HTML语义化的理解

Posted 2021-12-09 aiguangyuan

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

简单来说，一般有以下注意事项：

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

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

3. 不要使用纯样式标签，如：b、font、u 等，改用 css 设置；

4. 需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用i）；

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

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

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

8. 为了更好的实现语义话，html5新增了如下语义标签：