初衷：

本篇是看過極客時間裏winter老師的文章《04 | HTML語義：如何運用語義類標簽來呈現Wiki網頁？》寫的。
由於葉葉從事的工作原因，單純寫靜態頁面並非自己常態化工作，更多的是實現其中業務邏輯，於是便忽略了HTML的學習，直到看到這篇文章後，才意識到自己懂得真心少。

內容：

1. 什麽是HTML語義化？

簡單理解就是：用恰當的HTML標簽、class類名，讓機器和人快速理解網頁內容。

2.HTML語義化的好處？

①益於開發和維護；
②增加可閱讀性，使頁面更加結構化；
③利於SEO搜索引擎檢索……

3.常見的HTML語義化標簽有哪些？

body, article, nav, aside, section, header, footer, hgroup,h1-h6、address等。
 

4.需要重點記住的這些知識：

<group>:標簽用於對網頁或區段（section）的標題進行組合(標題組);

例：

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

<abbr>:標簽指示簡稱或縮寫，比如 "WWW" 或 "NATO"。
通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。
<abbr> 標簽最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式。
小技巧：可以在 <abbr> 標簽中使用全局的 title 屬性，這樣就能夠在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。

例：
 

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

<hr>與 VS 下邊框?
<hr>:標簽在 HTML 頁面中創建一條水平線。水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分。
但是閱讀文章後，才意識到原來hr標簽也表示故事走向的轉變或者話題的轉變。於是在選擇hr或者使用border 的CSS時，也就有所區分了。

例：

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
 

關於blockquote, q, cite 引用標簽的使用？？？

不得不承認，葉葉居然是第一次看見這三個標簽。真感覺瑟瑟發抖……仔細看了一下MDN以及各種文檔，最後還是不太清楚，
它是怎麽實現鼠標點擊上去，彈出右上角的提示框，類似於a標簽的title屬性。

如果有清楚的同學，麻煩告訴葉葉一聲，不勝感謝！

至於它的使用，等葉葉熟悉了，再來補充。

5.附上一張圖：

6.傳送門

結語：

在實際生產中，我們需要用對的語義標簽，用好語義標簽，萬一不懂、不會的，不用也是最佳的方案。最後，葉葉還是保持一顆“空杯心態”繼續學習。

關於語義類標簽新理解