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标签.

下面是一个简朴的例子:

复制代码

<!--未语义化-->
<div>
<div>Mr.Think的博客</div>
<div>专注Web前端技能,热爱Php,崇尚简朴糊口的伧夫俗人.</div>
</div>
<!--语义化之后-->
<div>
<h1>Mr.Think的博客</h1>
<h2>专注Web前端技能,热爱Php,崇尚简朴糊口的伧夫俗人.</h2>
</div>

通过上面的简朴的示例和没有任何Css界说环境下的结果图, 该大白了两者的区别了吧. 假如你在进修Html5, 它的header、footer、sidebar、article等元素都是新增的语义化标签.
Html编码语义化是迈向高质量前端开拓的一步. 即更好的遵循Web尺度, 也能让你页面在去掉样式后依然有条不紊. 关于语义化更多更具体的先容, 可以自行Google或阅读阿当的《Web前端开拓修炼之道》 第三章.
附: 标签语义中英文比较表

标署名 英文全拼 中文翻译
a   anchor   锚  
abbr   abbreviation   缩写词  
acronym   acronym   取首字母的缩写词  
address   address   地点  
b   bold   粗体  
big   big   变大  
blockquote   block quotation   区块引用于  
br   break   换行  
caption   caption   问题  
center   center   居中  
dd   definition description   界说描写  
del   delete   删除  
div   division   脱离  
dl   definition list   界说列表  
dt   definition term   界说术语  
em   emphasized   加重  
fieldset   fieldset   域集  
font   font   字体  
h1~h6   header1~header6   问题1~问题6  
hr   horizontal rule   程度尺  
i   italic   斜体  
ins   inserted   插入  
legend   legend   图标  
li   list item   列表项目  
ol   ordered list   排序列表  
p   paragraph   段落  
pre   preformatted   预界说名目  
s   strikethrough   删除线  
small   small   变小  
span   span   范畴  
strong   strong   加重  
sub   subscripted   下表  
sup   superscripted   上标  
u   underlined   下划线  
ul   unordered list   不排序列表  
var   variable   变量  

下面增补一下

1、什么是html语义化

选择吻合的html标签，便于开拓者阅读和写出更优雅的代码的同时让赏识器的爬虫和呆板很好地理会。

2、为什么要语义化？

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!