幾個 HTML 標籤的用法

上週我給開發團隊做了一次 html 入門的培訓. 因為是入門, 那都是很基礎的內容, 包括對 html, xhtml 和 html5 的介紹和一些常用標籤的說明. 本來以為是乙個簡單的敘述過程, 但在準備材料的過程中發現一些標籤的用法我並不那麼熟悉, 卻一直用得那麼理所當然.

標題標籤包括 h1 到 h6, 我們常用 h1, h2, h3, 但極少用到 h4, h5 和 h6.

在乙個合理語義化, 敢於裸奔 (不使用 css 進行布局) 的**裡面, 標題標籤除了語義化, 還帶有一些樣式作用. 但在 css 普及的今天, 用 h1 和 h6 其實沒有太大區別, 反正外觀也能隨便套.

h1 > h2 > h3 > strong > em > h4 > h5 > h6

我本來認為 thead 作為表頭用來放**標題單元, 如 th; 而 tbody 是放**內容, tfoot 是**說明. 其實我的理解不太正確, 這幾個標籤其實是可有可無的.

關於 table 標籤, 這裡有篇文章寫得很詳細: 《標準化 - **》(原文: 《bring on the tables》)

不是input type="button"可以理解, 因為低版本的 ie 上看不到 hover 效果. 但為什麼或者 span, 而是 a 標籤? a 標籤做成按鈕, 不帶 href, 這種做法是對的嗎? 我還沒想好, 以前這麼做就像是條件反射一樣.

很多人以為 b 標籤和 i 標籤的命運和 u 標籤一樣, 被 w3c 歸類為 "不推薦使用標籤". 但 html5 規範中, 這兩個標籤還是推薦使用的. 這一點我一直清楚, 還跟朋友為這事爭執過. 但我一直不明白 html5 中如何定義它們.

事實上, html5 對這兩個標籤進行了重新的定義. 比如 i 標籤, 更多應該用在術語, 書籍和引用他人說過的話等場景上. 這裡有個文章說到了這一點: 《usingand elements》

hr 是一根線, 分割內容的橫線. 我一直認為 hr 是個蹩腳的東西, 畫出來的線用 css 好不好處理, 毫無用處. 其實 hr 在語義上是文章的分割線, 將文章上下文完全劃分開, 讓它們毫無關係.

其作用就像很多日誌類部落格文章裡面出現的下圖的分割線, 只不過 hr 在語義上也是如此, 爬蟲也能理解.

div, section 和 article 有很多相關說明, 我能理解它們的含義, 但我還是不能理解什麼場景下更應該使用 section, 還有就是 section 和 article 的巢狀關係應該怎樣?

為此我在知乎上提問過, 回答都不難以, 求追加解答.

這次課程的內容好像很簡單, 但整理資料的過程發現自己對一些問題其實沒有那麼自信, 平時用起來手到擒來的感覺究竟是條件反射還是無奈之舉, 連我自己都迷糊了. 雖說是給別人培訓, 自己也收穫了不少, 感覺挺好的.