Semantic Element

最新推荐文章于 2020-08-14 13:00:48 发布

weixin_33730836

最新推荐文章于 2020-08-14 13:00:48 发布

阅读量105

点赞数

文章标签：爬虫

原文链接：https://segmentfault.com/a/1190000018305892

版权

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

语义化标记，是指每种标记表示一种特定的内容形态，例如标题、列表、表格等。与之对应的概念，是样式标记（presentational markup）。

Tim最初设想HTML应该是一种纯语义化的标记语言，然而在混沌无序的初始阶段，各家浏览器厂商多少受到另一种通行多年的标记语言SGML的影响，由于该语言同时存在语义化标记和样式标记，于是早期的HTML也被设计成了两类标记的杂合体。

不过随着90年代末CSS的逐步应用以及随之而起的“内容与表现分离”理念，样式标记在新的HTML版本中被逐渐废除，但出于向后兼容的考虑，仍然有部分样式标记被保留，例如：i（样式）/ em（语义）；b（样式）/ strong（语义）。

尽可能少的使用无语义的标签如：div、span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
表单域要用fieldset标签包起来，并说明表单的用途；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

Tags Description
<thead> Specifies a table header
<tbody> Specifies a table body
<td> Specifies a table cell
<tr> Specifies a table row
<th> Specifies a table header
<tfoot> Specifies a table footer
过分使用diV标签，html的语义化很不好，div 是一个没有语义的标签，但是没有语义不代表没有意义，建议div只用来构建布局，除此之外尽量少用。
Div与span在html中都是用在辅助布局的，都是没有语义的，不同点是，div是块元素，span是内联元素，从逻辑结构上讲，div 用来划分块元素，span用来划分内联元素。把<a>里边套一个<span>我们常用的技巧。检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性。

关注