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

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

    首先說(shuō)明的一點(diǎn)是，人可以通過(guò)視覺(jué)的劃分判斷內容的語(yǔ)義,搜索引擎看到的只是代碼。搜索引擎只能通過(guò)標簽來(lái)判斷內容的語(yǔ)義。以前我真的沒(méi)有怎么重視過(guò)搜索引擎，現在開(kāi)始比較在意了，因為頁(yè)面的很大一部分流量是來(lái)自搜索引擎的，要使頁(yè)面盡可能地對搜索引擎友好，所以就要盡可能地使標簽語(yǔ)義化。

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

div語(yǔ)義：Division（分隔）

span語(yǔ)義：Span（范圍）

ol語(yǔ)義：OrderedList（排序列表）

ul語(yǔ)義：UnorderedList（不排序列表）

li語(yǔ)義：ListItem（列表項目）

…………

如果無(wú)視標簽語(yǔ)義和默認樣式，所有標簽都用div，其實(shí)也是可以寫(xiě)出來(lái)視覺(jué)效果很好的頁(yè)面，只要你靈活運用CSS。但是那樣的話(huà)雖然視覺(jué)上達到了要求，但是整個(gè)頁(yè)面一點(diǎn)語(yǔ)義都沒(méi)有，搜索引擎還是看不懂。所以，要記?。?/span>

結構(html)才是重點(diǎn)，樣式(css)是用來(lái)修飾結構的。所以，要先確定html，確定標簽，再來(lái)選用合適的css。

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

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

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