HTML與CSS標(biāo)簽語義化的深入理解發(fā)布者：本站     時(shí)間：2020-05-16 09:05:36

以下內(nèi)容是WD的一位工程師阿講的，我受益匪淺，加深了對(duì)html的理解。HTML雖然很簡(jiǎn)單，但是要用好也是很不容易的。轉(zhuǎn)來希望對(duì)大家有所用：

    首先說明的一點(diǎn)是，人可以通過視覺的劃分判斷內(nèi)容的語義,搜索引擎看到的只是代碼。搜索引擎只能通過標(biāo)簽來判斷內(nèi)容的語義。以前我真的沒有怎么重視過搜索引擎，現(xiàn)在開始比較在意了，因?yàn)轫撁娴暮艽笠徊糠至髁渴莵碜运阉饕娴?，要使頁面盡可能地對(duì)搜索引擎友好，所以就要盡可能地使標(biāo)簽語義化。

以前以我對(duì)web開發(fā)的粗淺理解，覺得寫一個(gè)好的符合網(wǎng)頁標(biāo)準(zhǔn)的頁面只需要把結(jié)構(gòu)和表現(xiàn)分離，然后不要使用table，font等標(biāo)簽就行了，至于通篇都是div我也不會(huì)覺得有什么問題，因?yàn)镃SS很強(qiáng)大。但是，所有的標(biāo)簽都是有自己的語義的，下面給出一部分標(biāo)簽的語義：

div語義：Division（分隔）

span語義：Span（范圍）

ol語義：OrderedList（排序列表）

ul語義：UnorderedList（不排序列表）

li語義：ListItem（列表項(xiàng)目）

…………

如果無視標(biāo)簽語義和默認(rèn)樣式，所有標(biāo)簽都用div，其實(shí)也是可以寫出來視覺效果很好的頁面，只要你靈活運(yùn)用CSS。但是那樣的話雖然視覺上達(dá)到了要求，但是整個(gè)頁面一點(diǎn)語義都沒有，搜索引擎還是看不懂。所以，要記住：

結(jié)構(gòu)(html)才是重點(diǎn)，樣式(css)是用來修飾結(jié)構(gòu)的。所以，要先確定html，確定標(biāo)簽，再來選用合適的css。

一般來說，所有的標(biāo)簽都會(huì)有一個(gè)默認(rèn)的樣式，所以一個(gè)簡(jiǎn)單的判斷網(wǎng)頁標(biāo)簽語義是否良好的方法就是：去掉樣式，看網(wǎng)頁結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性。

另外，值得重點(diǎn)提及的是h標(biāo)簽，h標(biāo)簽的語意是標(biāo)題，搜索引擎對(duì)這個(gè)標(biāo)簽比較敏感，特別是h1,和h2。一個(gè)語義良好的頁面，h標(biāo)簽應(yīng)該是完整有序沒有斷層的。也就是說，要h1,h2,h3,h4這樣推下來，不要h1,h3,h4，漏掉h2。一個(gè)結(jié)構(gòu)良好的網(wǎng)頁，h標(biāo)簽可以組織起一個(gè)網(wǎng)頁的大綱。

希望大家以后在寫自己的網(wǎng)頁HTML時(shí)，也多注意下語義化的標(biāo)簽?？紤]下你使用的是不是最合適的標(biāo)簽。