這裡是修真院前端小課堂，每篇分享文從
八個方面深度解析前端知識/技能，本篇分享的是：
如何理解html結構的語義化？
1.背景介紹
html結構語義化，是最近幾年才提出來的，以前的html結構，都是一堆的沒有語義的冷冰冰的標籤。最氾濫的就是div+css,以前的頁面，一上來就是一堆的div+css,
為了改變這種這種狀況，開發者們和官方提出了讓html結構語義化的概念，並且官方w3c，也在html5給出了幾個新的語義化的標籤。
2.知識剖析
什麼是語義化？
字面意思就是說根據我們所說的話，就能了解其中的含義。
語義化，故名思意，就是你寫的html結構，是用相對應的有一定語義的英文本母（標籤）表示的，標記的，因為html本身就是標記語言。不僅對自己來說，容易閱讀，書寫。別人看你的**和結構也容易理解，甚至對一些不是做網頁開發的人來說，也容易閱讀。
什麼是html語義化？
首先標籤語義化是指html，不是css, 語義化標籤只是html，css不存在語義化。html是標籤，css是屬性。
在最初html裡標籤的語義，我們看到table,就會知道這是列表，看到p，就知道這是段落，看到img知道是，看到input就知道這是乙個表單，h1~h6是標題。 機器和人類相比笨多了，但是只要我們設定好程式，上面的標籤的意思機器也能讀懂。
但是也有些是無語義化的如div---division並不能表示div標籤裡面內容的屬性和表現樣式
html 標籤語義化是讓大家直觀的通過標籤(markup)和屬性(attribute)來知道其用途和作用。
怎樣判斷標籤是否語義化
去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。
寫html**時應注意什麼？
1.盡可能少的使用無語義的標籤div和span；
2.在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
3.不要使用純樣式標籤，如：b、font、u等，改用css設定。
4.需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用css指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
5.使用**時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
6.每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來
3.常見問題
實現html語義化好處有哪些？
4.解決方案
1.清晰的頁面結構。去掉或樣式丟失的時候,也能讓頁面呈現清晰的結構，增強頁面的可讀性。
4.便於團隊開發和維護。在團隊中大家都遵循同乙個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模組化開發。
5.方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
5.編碼實戰
6.擴充套件思考
b標籤，i標籤 ，strong標籤，em標籤的區別
(b)，(i)標籤 是視覺要素（presentationl elements），分別表示無意義的加粗，無意義的斜體，僅僅表示「這裡應該用粗體顯示」或者「這裡應該用斜體顯示」，此兩個標籤在html4.01中並不被推薦使用。
(em)、(strong)是表達要素(phrase elements)。(em) （emphasized text）表示一般的強調文字，而(strong) （strong emphasized text）表示比(em) 語義更強的的強調文字。
在新的html5工作草案中：（em）和（strong）仍舊是表達要素(phrase elements)。但這時的（strong）表示html頁面上的強調（emphasized text），（em） 表示句子中的強調（即強調語義）
7.參考文獻
8.更多討論
9.結束語：
HTML語義化專題（一） 如何理解HTML語義化？
講到語義化，我們首先來聊聊html語義化的背景，html結構語義化，是最近幾年才提出來的，以前的html結構，都是一堆的沒有語義的冷冰冰的標籤。最氾濫的就是div css,以前的頁面，你一打來就是一堆的div css,為了改變這種這種狀況，開發者們和官方提出了讓html結構語義化的概念，並且官方w3...
理解HTML語義化
1 什麼是html語義化？基本上都是圍繞著幾個主要的標籤，像標題 h1 h6 列表 li 強調 strong em 等等 根據內容的結構化 內容語義化 選擇合適的標籤 語義化 便於開發者閱讀和寫出更優雅的 的同時讓瀏覽器的爬蟲和機器很好地解析。2 為什麼要語義化？3 寫html 時應注意什麼？4 h...
理解HTML語義化
1 什麼是html語義化？基本上都是圍繞著幾個主要的標籤，像標題 h1 h6 列表 li 強調 strong em 等等 根據內容的結構化 內容語義化 選擇合適的標籤 語義化 便於開發者閱讀和寫出更優雅的 的同時讓瀏覽器的爬蟲和機器很好地解析。2 為什麼要語義化？3 寫html 時應注意什麼？4 h...