曾幾何時，一個人出設計稿，出完設計稿打開DW用拖出一個頁面，再苦逼一點拖完頁面後自己還要寫後台，武林人稱：美工。
以下討論的是和html5 語義化相關的詳解html5語義化css代碼的體驗及剖析教程文章，內容是本站精心挑選整理的教程，希望對廣大的網友給到幫助,下面是詳細內容：
開篇前的一些YY曾幾何時，一個人出設計稿，出完設計稿打開DW用拖出一個頁面，再苦逼一點拖完頁面後自己還要寫後台，武林人稱：美工。更苦逼的是當每一次需求變更後，去修改一大堆發麻的
，於是div+css被搬上了互聯網時代的舞台，一夜間N多的《DIV+CSS》葵花寶典橫空出世，那時，我們活在了div+css的年代，那時，我們用上了
之後，腰不酸，腿不痛，加班也帶勁了。
YY結束，切入正題Ghost曾在2年前就以《頁面重構中的語義化》一文對語義化做過講解，還有碼頭的《語義化的HTML結構到底有什麼好處？ 》
重構歷經7年，也許時至今日，我們可以熟練地寫出一個頁面，但對於寫好一個頁面又談何容易？讓我們梳理一下思路，重溫下基礎，並結合現在的趨勢，再來談一下語義化這個話題，神馬是語義化？為何要語義化？
重構中的語義化基本可以分為2塊：(x)html標籤的語義化和css命名的語義化。
不廢話上案例：
(圖1)
圖1非語義化的實現方式：no_emantic_html 語義化的實現方式：emantic_html
你對
情有獨鍾嗎？拿到一個設計稿之後，不經意間無數的已經在你的彈指神功下落在屏幕？如果是no_emantic_html那樣，恭喜你得了戀癖。
用合理HTML標記以及其特有的屬性去格式化文檔內容—這是舒克對語義化標籤的解釋，能不用
的地方不用，因為是無語義的標籤，原本單詞是division，為分隔、區塊的意思，一般只用在架構html的地方，在(x)html以前的版本。
不過怎樣才能寫出語義化的標籤？從基礎入手吧，每天跟我們打交道的最多的就是div h1-h6 ul-li p之類的標籤了，不知大家有沒有對這些標籤做過深入的理解，來看下面這張表
| 標籤 | 原單詞 | 說明 | 語義化(Y/N) |
|---|---|---|---|
| h1-h6 | head | 定義HTML 標題 | Y |
| p | paragraph | 定義段落 | Y |
| ul | unordered list | 定義無序列表 | Y |
| ol | ordered list | 定義有序列表 | Y |
| li | list item | 定義列表的項目 | Y |
| dl | definition list | 定義定義列表 | Y |
| dt | definition term | 定義定義列表中的項目 | Y |
| dd | definition description | 定義定義列表中項目的描述 | Y |
| table | table | 定義表格 | Y |
| thead | table head | 定義表格中的表頭內容 | Y |
| tbody | table body | 定義表格中的主體內容 | Y |
| th | table head cell | 定義表格中的表頭單元格 | Y |
| tr | table row | 定義表格中的行 | Y |
| td | table data cell | 定義表格中的單元 | Y |
| a | anchor | 定義錨 | Y |
| img | image | 定義圖像 | Y |
| div | division | 定義文檔中的節 | N |
| span | span | 定義文檔中的節 | N |
以上只是列出了我們常用的一些標籤，更多的標籤請查閱w3c ，基本所有的html標籤都是一個單詞或者詞組的縮寫，這樣其實本意是更便於我們對語義化的理解。其實所有的(x)html標籤中，除了
和2個無語義的標籤，其他標籤都有它存在的意義，只有知道有哪些標籤，以及對各個標籤的本義做一個了解才能知道去用它。你不知道何時用
大家都知道每年的CSS裸奔節吧？如果選用的標籤幾乎全是不帶語義的，那麼在去樣式後網頁中幾乎看不到任何結構信息，可讀性非常差；如果選用的都是語義適合的標籤，去樣式後網頁依然具有非常好的可讀性；各個瀏覽器有自己的默認樣式，默認的樣式給予了各個標籤不同的顯示，標籤使用的正確與否能體現網站的可用性，這也是檢驗一個網站可用性的最簡單的方法之一。 這個推薦大家去看W3C官網的標籤的使用，用web developer禁掉它的CSS看看如何？ CSS語義化的命名是指用易於理解的名稱對html標籤附加的class或id命名。語義化的命名這裡就涉及到了團隊的命名規範，只有在團隊的規範的基礎之上進行更好的語義化命名才是王道。 在我的理解，一個語義化的CSS命名至少應遵守如下約定： 盡量規避拼音命名，用英文單詞去命名 單詞之間連接用三種方式：下劃線_ 、間隔符-、駝峰命名。具體使用哪種方式請根據團隊的規範，但個人建議不要同時使用2種以上的連接方法同時命名 單詞後不要跟無意義的數字，如logo1234 (團隊約定好的除外) 對於過長單詞的連接命名可採取縮寫形式，但應確保成員都能看懂 一些約定好的單詞可以迅速的幫助大家命名： 這個太多了，這裡就不一一列出了，遇到不會的單詞大家再去補一下英文哈！ CSS命名的語義化
头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright
[1][2]下一頁