重學 html の 標籤語義化

HTML語義化是指僅僅從 HTML 元素上就能看出頁面的大體結構。咱們比較習慣使用 div、span 來壘頁面，視覺上沒啥問題，文字既內容，html 標籤只被 css 樣式所用，單從 html 結構上很難看出意圖。語義標籤則是純文字的補充，好比標題，天然段、章節、列表等咱們使用相應的 html 標籤會更好些。

語義化的好處

1. 對開發者友好---開發者可根據html標籤大概瞭解頁面結構
2. 對搜索引擎友好---seo 排名更靠前
3. 對無障礙設備友好---盲人軟件讀屏

標籤列舉

結構類

article、section、nav、aside、footer、header 、ul、li 等
該類標籤你們掌握理解的應該都不錯，按照字面理解便可。

表述類

abbr 縮寫

<abbr title="World Wide Web">WWW</abbr>

blockquote、q、cite

blockquote 表示整段話的引用、q 表示一行文字的引用、cite表示引述做品名

figure、figcaption

兩個標籤結合使用，來定義圖文。

<figure>
  <figcaption>黃浦江上的的盧浦大橋</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

pre、code

pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符。
code 在語義上表達是段代碼。和 span 沒有太大的區別。

使用原則

用對比不用好，不用比用錯好。