關於語義類標籤新理解

初衷：

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

內容：

1.什麼是HTML語義化？

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

2.HTML語義化的好處？

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

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

body, article, nav, aside, section, header, footer, hgroup,h1-h六、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"。
經過對縮寫進行標記，您可以爲瀏覽器、拼寫檢查和搜索引擎提供有用的信息。
此標籤最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式。
小技巧：能夠在 標籤中使用全局的 title 屬性，這樣就可以在鼠標指針移動到 元素上時顯示出簡稱/縮寫的完整版本。例：

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.傳送門

結語：

在實際生產中，咱們須要用對的語義標籤，用好語義標籤，萬一不懂、不會的，不用也是最佳的方案。最後，葉葉仍是保持一顆「空杯心態」繼續學習。