主要总结了标签语义的内容。HTML标签是语义化的。下面列出了一些常用的标签及其语义：完整的标签列表和更多HTML5标签请参考：http://www.w3school.com.cn/tags/index.asp下面是我们列出的相关标签常用的有ol、ul、dl。那么什么时候用dl，什么时候用olul呢？--对于重复条目，如果顺序被打乱，将是一个无序列表（ul），不影响语义；否则，它将是一个有序列表(ol)。--如果里面有术语，则使用dl进行描述。比如一张图片有文字Explanation，图片有问题描述。。。还是反复用dl比较好。为什么要使用语义标签？由于css的功能非常强大，无论是否根据语义选择标签，都可以实现所需要的设计。但这也是一把双刃剑。事实上，css布局只是web标准的一部分。在html、css、js三要素中，hmtl是最重要的，结构是重点，样式是用来修饰结构的。所以，正确的做法是：先确定html，确定语义标签，再选择合适的css。此外，搜索引擎看不到视觉结果，它们看到的只是代码。它只能通过标签来判断内容的语义。如何确定您的标签是否具有良好的语义？--去除样式，看看网页结构是否井井有条，是否仍然具有良好的可读性。有一个非常有用的工具，web-developer。浏览器可以安装这个插件。开启后，disableallstyles禁用css，可以帮助我们查看页面结构。常见标签应用场景1.标题和内容较多。静态页面结构是标题+内容的布局。例如，这里使用div+h2+p标签比使用所有div标签要好。请记住，divspan标签用于帮助实现设计要求。在编写页面时，首先选择语义标签，然后配合css设计样式，达到设计需求的目的。2.表单很多场景都涉及到表单填写：这里：使用label+input标签的方式比div+input的方式要好。同时，表单字段要用fieldset标签包裹，用legend标签说明表单的用途。（Fieldset默认有border，legend也有默认样式，我们可以将fieldsetborder设置为none，legenddisplay设置为none，既满足语义要求，又符合设计要求。）另外，label标签的for属性要关联带有输入标签的id。3、表格css布局越来越流行，很多人都患上了“表格恐惧症”。其实table也有自己的语义和用途，在二维数据展示上更胜一筹。使用表格时注意：表格标题使用caption；使用thead作为头部，tbody作为主体，tfoot作为尾部。header和generalcell要分开，分别用th,td。四、语义标签时需要注意的一些事项其他问题尽量少用非语义标签div和span；语义不明显的地方，可以用p或者div，尽量用p；不要使用纯样式标签，如font、b、u等，改用css设置。语义上需要强调的文字可以使用emstrong标签等增强“隐形”内容的可访问性背景图片上的文字要同时用html写，用css让它隐形，有帮助供搜索引擎抓取你的内容，也可以在css为无效内容时看到。参考文献[1]。编写高质量代码——Web前端开发实践——曹六洋。
