[html] HTML結構的語義化

標籤：

原文連結：http://www.cnblogs.com/freeyiyi1993/p/3615179.html

1、什麼是html語義化

選擇合適的html標籤，便於開發人員閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、為什麼要語義化？

• 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
• 使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊、label標籤的活用；
• 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
• 方便其他裝置解析（如螢幕助讀程式、盲人閱讀器、行動裝置）以意義的方式來渲染網頁；
• 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

3、寫HTML代碼時應注意什嗎？

 　　1. 儘可能少的使用無語義的標籤div和span；

        2. 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；

        3. 不要使用純樣式標籤和規範不支援的標籤，如：b、font、u、center,strike,menu等，改用css設定。

        4. 需要強調的文本，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；

        5. 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般儲存格要區分開，表頭用th，儲存格用td；

        6. 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；

        7. 每個input標籤對應的說明文本都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文本和相對應的input關聯起來。

        8. 不要省略某些標籤的屬性,<img>標籤的alt屬性的作用是當圖片不能正常顯示的時候的替換文字，<a>標籤的title屬性可作為說明資訊，並且當滑鼠hover時顯示為提示資訊。

 

雅虎一道面試題：

 

<P>  哥寫的不是HTML，是寂寞。<br><br>  我說：<br>不要迷戀哥，哥只是一個傳說

 

             其中存在的問題：

 

             1.  html與xhtml標準的區別，xhtml有嚴謹的結構，標籤必須關閉，單標籤最後需要添加/來關閉，並且標籤都必須小寫；

 

             2. 結構和樣式的分離，不應該使用<br/>來控制樣式，合理設計結構，換行的段落需要為每個段落都添加p,樣式需要利用css實現;

 

            3. 合理利用標籤，注重標籤語義化，縮減可以用<abbr>標註，“我”可以用<cite>標註，引用的說話內容可以用<q>標記；

 

//代碼參考如下<p>哥寫的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。</p> <p><cite>我</cite>說：<q>不要迷戀哥，哥只是一個傳說</q></p>

 

[html] HTML結構的語義化