HTML與CSS標簽語義化的深入理解發布者：本站 時間：2020-05-16 09:05:36
以下內容是WD的一位工程師阿講的，我受益匪淺，加深了對html的理解。HTML雖然很簡單，但是要用好也是很不容易的。轉來希望對大家有所用：
首先說明的一點是，人可以通過視覺的劃分判斷內容的語義,搜索引擎看到的只是代碼。搜索引擎只能通過標簽來判斷內容的語義。以前我真的沒有怎么重視過搜索引擎，現在開始比較在意了，因為頁面的很大一部分流量是來自搜索引擎的，要使頁面盡可能地對搜索引擎友好，所以就要盡可能地使標簽語義化。
以前以我對web開發的粗淺理解，覺得寫一個好的符合網頁標準的頁面只需要把結構和表現分離，然后不要使用table，font等標簽就行了，至于通篇都是div我也不會覺得有什么問題，因為CSS很強大。但是，所有的標簽都是有自己的語義的，下面給出一部分標簽的語義：
div語義：Division（分隔）
span語義：Span（范圍）
ol語義：OrderedList（排序列表）
ul語義：UnorderedList（不排序列表）
li語義：ListItem（列表項目）
…………
如果無視標簽語義和默認樣式，所有標簽都用div，其實也是可以寫出來視覺效果很好的頁面，只要你靈活運用CSS。但是那樣的話雖然視覺上達到了要求，但是整個頁面一點語義都沒有，搜索引擎還是看不懂。所以，要記住：
結構(html)才是重點，樣式(css)是用來修飾結構的。所以，要先確定html，確定標簽，再來選用合適的css。
一般來說，所有的標簽都會有一個默認的樣式，所以一個簡單的判斷網頁標簽語義是否良好的方法就是：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。
另外，值得重點提及的是h標簽，h標簽的語意是標題，搜索引擎對這個標簽比較敏感，特別是h1,和h2。一個語義良好的頁面，h標簽應該是完整有序沒有斷層的。也就是說，要h1,h2,h3,h4這樣推下來，不要h1,h3,h4，漏掉h2。一個結構良好的網頁，h標簽可以組織起一個網頁的大綱。
希望大家以后在寫自己的網頁HTML時，也多注意下語義化的標簽。考慮下你使用的是不是最合適的標簽。
選擇我們，優質服務，不容錯過
1. 優秀的網絡資源，強大的網站優化技術，穩定的網站和速度保證
2. 15年上海網站建設經驗，優秀的技術和設計水平，更放心
3. 全程省心服務，不必擔心自己不懂網絡，更省心。
------------------------------------------------------------
24小時聯系電話：021-58370032