- 相关推荐
精选Html技巧语义化代码
同学们，你们知道Html技巧语义化代码吗？对其了解多少？下面是小编收集整理的Html技巧语义化代码，仅供参考，大家一起来看看吧。
Html语义化, 似乎是一个老生常谈的问题。 Google 一下,也有大把关于语义化的文章。 为什么要语义化标签？ 我是这样认为的：Html的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。 如果我的解释不够明了, 请Google。
如何在合适的位置使用合适的标签？
这是一个简单的理解逻辑。 比如, h1~h6标签是用于标题类的; ul是用于无序列表的; 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标签。
下面是一个简单的例子：
Html技巧 语义化你的代码1
Mr。Think的博客
专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子。
Mr。Think的博客
专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子。
通过上面的简单的示例和没有任何Css定义情况下的效果图, 该明白了两者的区别了吧。 如果你在学习Html5, 它的header、footer、sidebar、article等元素都是新增的语义化标签。
Html编码语义化是迈向高质量前端开发的一步。 即更好的遵循Web标准, 也能让你页面在去掉样式后依然井然有序。 关于语义化更多更详细的介绍, 可以自行Google或阅读阿当的《Web前端开发修炼之道》第三章。
附： 标签语义中英文对照表
a anchor 锚 abbr abbreviation 缩写词 acronym acronym 取首字母的缩写词 address address 地址 b bold 粗体 big big 变大 blockquote blockquotation 区块引用于 br break 换行 caption caption 标题 center center 居中 dd definitiondescription 定义描述 del 删除 div division 分隔 dl definitionlist 定义列表 dt definitionterm 定义术语 em emphasized 加重 fieldset fieldset 域集 font font 字体 h1~h6 header1~header6 标题1~标题6 hr horizontalrule 水平尺 i italic 斜体 ins ed 插入 legend legend 图标 li listitem 列表项目 ol orderedlist 排序列表 p paragraph 段落 pre preformatted 预定义格式 s strikethrough 删除线 small small 变小 span span 范围 strong strong 加重 sub subscripted 下表 sup superscripted 上标 u underlined 下划线 ul unorderedlist 不排序列表 var variable 变量
拓展知识：什么是Web语义化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。 简单来说就是利于 SEO，便于阅读维护理解。
总结起来就是：
正确的标签做正确的事情
页面内容结构化
无CSS样子时也容易阅读，便于阅读维护和理解
便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO
【Html技巧语义化代码】相关文章：
过滤HTML代码08-29
php如何过滤危险html代码09-21
2017年html的超简代码模版10-22
如何在HTML页面插入flash代码01-21
高效编写JavaScript代码的技巧08-25
实现html方法结构化10-01
化淡妆的小技巧08-31
化烟熏妆的技巧07-08
HTML的语言剖析10-13
中国舞蹈的技巧特点-技巧艺术化10-27