以下討論的是和html5 語義化 相關的詳解html5語義化css代碼的體驗及剖析教程文章，內容是本站精心挑選整理的教程，希望對廣大的網友給到幫助,下面是詳細內容：

開篇前的一些YY

曾幾何時，一個人出設計稿，出完設計稿打開DW用拖出一個頁面，再苦逼一點拖完頁面后自己還要寫后臺，武林人稱：美工。更苦逼的是當每一次需求變更后，去修改一大堆發麻的

，于是"div+css"被搬上了互聯網時代的舞臺，一夜間N多的《DIV+CSS》葵花寶典橫空出世，那時，我們活在了div+css的年代，那時，我們用上了

之后，腰不酸，腿不痛，加班也帶勁了。

YY結束，切入正題

Ghost曾在2年前就以《頁面重構中的語義化》一文對語義化做過講解，還有碼頭的《語義化的HTML結構到底有什么好處？》

重構歷經7年，也許時至今日，我們可以熟練地寫出一個頁面，但對于寫好一個頁面又談何容易？讓我們梳理一下思路，重溫下基礎，并結合現在的趨勢，再來談一下語義化這個話題，神馬是語義化？為何要語義化？

重構中的語義化基本可以分為2塊：(x)html標簽的語義化和css命名的語義化。

(x)html標簽的語義化

不廢話上案例：

(圖1)

圖1非語義化的實現方式：no_emantic_html 語義化的實現方式：emantic_html

你對

情有獨鐘嗎？拿到一個設計稿之后，不經意間無數的 已經在你的彈指神功下落在屏幕？如 果是no_emantic_html那 樣，恭喜你得了戀 癖。

"用合理HTML標記以及其特有的屬性去格式化文檔內容"—這是舒克對語義化標簽的解釋，能不用

的地方不用 ，因為 是無語義的標簽，原本單詞是division，為分隔、區塊的意思，一般只用在架構html的地方，在(x)html以前的版本。

不過怎樣才能寫出語義化的標簽？從基礎入手吧，每天跟我們打交道的最多的就是div h1-h6 ul-li p之類的標簽了 ，不知大家有沒有對這些標簽做過深入的理解，來看下面這張表

以上只是列出了我們常用的一些標簽，更多的標簽請查閱w3c ，基本所有的html標簽都是一個單詞或者詞組的縮寫，這樣其實本意是更便于我們對語義化的理解。其實所有的(x)html標簽中，除了

和2個無語義的標簽，其他標簽都有它存在的意義，只有知道有哪些標簽，以及對各個標簽的本義做一個了解才能知道去用它。你不知道何時用

定義列表標簽？又如果你不知道有^標簽？

^{如果在一個頁面中看到的基本全是div，那么說明你對語義化標簽的使用還不是很明白：明明是一個標題，可以用標簽來實現，卻非要用無語義的}

^{標簽來實現，又或者一個段落，用}

^{標簽是否更語義？}

^{大家都知道每年的CSS裸奔節吧？如果選用的標簽幾乎全是不帶語義的，那么在去樣式后網頁中幾乎看不到任何結構信息，可讀性非常差；如果選用的都是語義適合的標簽，去樣式后網頁依然具有非常好的可讀性；各個瀏覽器有自己的默認樣式，默認的樣式給予了各個標簽不同的顯示，標簽使用的正確與否能體現網站的可用性，這也是檢驗一個網站可用性的最簡單的方法之一。}

^{這個推薦大家去看W3C官網的標簽的使用，用web developer禁掉它的CSS看看如何？}

^{CSS命名的語義化}

^{CSS語義化的命名是指用易于理解的名稱對html標簽附加的class或id命名。語義化的命名這里就涉及到了團隊的命名規范，只有在團隊的規范的基礎之上進行更好的語義化命名才是王道。}

^{在我的理解，一個語義化的CSS命名至少應遵守如下約定：}

^{盡量規避拼音命名，用英文單詞去命名}

^{單詞之間連接用三種方式：下劃線_ 、間隔符-、駝峰命名。具體使用哪種方式請根據團隊的規范，但個人建議不要同時使用2種以上的連接方法同時命名}

^{單詞后不要跟無意義的數字，如logo1234 (團隊約定好的除外)}

^{對于過長單詞的連接命名可采取縮寫形式，但應確保成員都能看懂}

^{一些約定好的單詞可以迅速的幫助大家命名：}

頭：header內容：content/container尾：footer導航：nav側欄：sidebar欄目：column登錄條：loginbar標志：logo廣告：banner輪轉：promo頁面主體：main熱點：hot新聞：news  下載：download子導航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink版權copyright

^{這個太多了，這里就不一一列出了，遇到不會的單詞大家再去補一下英文哈！}

[1] [2]  下一頁