Html技巧语义化你的代码

2020-03-24 17:38:25

字体：大中小

来源：转载

供稿：网友

Html语义化, 似乎是一个老生常谈的问题. Google 一下,也有大把关于语义化的文章. 为什么要语义化标签? 我是这样认为的:Html的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然. 如果我的解释不够明了, 请Google.

如何在合适的位置使用合适的标签?
这是一个简单的理解逻辑. 比如, h1~h6标签是用于标题类的; ul是用于html' target='_blank'>无序列表的; ol是用于有充列表的; dl是用于定义列表的; em,strong标签是用来强调的说白了, Html标签的每个英文释义决定了它的语义(本文后面, 我会放一份常用Html标签的英文释义对照表供参考).
什么是让人和机器都能一目了然?
检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性. 为什么可以这么说? 大家都知道浏览器都有默认的样式(推荐使用Chrome的Web Developer Tools for Chrome插件, 或者Firefox的Web Developer插件), 比如h1~h6, 会有加粗/字号依次减小、上下边距的默认样式, ul、ol、dl都有默认的项目符号, strong默认有加粗的样式所以, 同样的页面, 语义化良好的Html可以在页面Css去掉的情况下依然有良好的表现.
还有一点, 好的语义化编码, 对搜索引擎有更好的友好性. 搜索蜘蛛是不认识你的Css的, 但它能识别Html标签.
下面是一个简单的例子:

复制代码代码如下:
!--未语义化--
div id="header"
div Mr.Think的博客 /div
div 专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子. /div
/div
!--语义化之后--
div id="header"
h1 Mr.Think的博客 /h1
h2 专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子. /h2
/div

通过上面的简单的示例和没有任何Css定义情况下的效果图, 该明白了两者的区别了吧. 如果你在学习Html5, 它的header、footer、sidebar、article等元素都是新增的语义化标签.
Html编码语义化是迈向高质量前端开发的一步. 即更好的遵循Web标准, 也能让你页面在去掉样式后依然井然有序. 关于语义化更多更详细的介绍, 可以自行Google或阅读阿当的《Web前端开发修炼之道》第三章.
附: 标签语义中英文对照表html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html中关于meta标签的作用详解

下一篇：浏览器加载和渲染html的顺序