最近追更winter老師的重學前端，發現自己平時 div + span 寫慣了，很多html標籤的用法都不清楚。雖然 div + span 就可以解決絕大多數的問題，但是語義化的標籤確實能讓程式碼的可讀性更高。記錄一下。
之前語義化標籤我基本上只用到header、nav、section、footer、aside，article用到的場景不多。 我之前以為aside標籤就是側邊導航，現在發現aside其實不僅僅包含導航，它可以放任何在側邊的內容，比如側邊的廣告、側邊文章的標題列表（aside包含nav的關係）。
address標籤
乍看這個標籤通常會以為這個標籤裡包含的是一個地址，其實不然。 address標籤通常定義文件或者文章作者的聯絡資訊，而不是一個地址。
w3school裡介紹的：
<address> 標籤定義文件或文章的作者/擁有者的聯絡資訊。
如果 <address> 元素位於 <body> 元素內，則它表示文件聯絡資訊。
如果 <address> 元素位於 <article> 元素內，則它表示文章的聯絡資訊。
<address> 元素中的文字通常呈現為斜體。大多數瀏覽器會在 address 元素前後新增折行。
最後還給了一個提示
提示：<address> 元素通常連同其他資訊被包含在 <footer> 元素中。
hgroup標籤
hgroup標籤通常用於給標題分級。我們都知道html有 <h1> - <h6> 的標籤用於標題。
但試想這樣一個情況：你有兩級標題，一級標題用<h1>，一級標題還有個副標題用了<h2>，
二級標題用了<h3>。
在結構上這些標題分成了三級，這跟你預期的不一樣，這個時候，我們用hgroup標籤將前兩個包起來，它們就成為同一層級的了。
<hgroup>
<h1>一級標題</h1>
<h2>副標題</h2>
</hgroup>
<h3>二級標題</h3>
複製程式碼em標籤
em標籤的使用有點像我們平時講話的重音。
比如：我們中出了一個叛徒
<p>我們中出了一個叛徒。<p/>
這句話如果重音不一樣，表達的意思也是不同的：
我們中出了一個 叛徒。
我們 中出 了一個叛徒。
你看，意思就不同了吧。而em標籤就可以用來區分重音。
<p>我們中出了一個<em>叛徒</em>。<p/>
<p>我們<em>中出<em/>了一個叛徒。<p/>
nice
ruby標籤
ruby標籤用來給字元註釋，簡單來說就像雙語字幕，下面是文字，上面是註釋。這個用法好像是從日本那邊學來的，所以w3c上說是一般東亞使用。
瀏覽器的話不支援ie8及以下。
w3c上的示例：
<ruby>
漢 //要註釋的文字
<rt> //rt包含註釋內容
<rp>(</rp> //rp只有在支援的瀏覽器上才顯示
ㄏㄢˋ
<rp>)</rp>
</rt>
</ruby>
複製程式碼如果瀏覽器支援：
不支援的話就不會分行：（應該是這個樣子，我電腦上沒有ie）
漢 (ㄏㄢˋ)
abbr標籤
abbr標籤指示簡稱或縮寫。看一個w3school給出的例子：
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
複製程式碼blockquote標籤 和 q標籤
這兩個標籤都用來表示引用。
不同的是：blockquote一般用來表示塊引用，q一般用來表示行引用。
表現效果也不太一樣：blockquote引用的內容外邊距會增大，q引用內容會在給內容加上雙引號。
cite標籤
cite標籤用來定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題。
time標籤
time標籤用來定義日期或者時間。
<p>我們在每天早上 <time>9:00</time> 起床。</p>
<p>我在 <time datetime="2019-02-14">情人節</time> 是條鹹魚。</p>
複製程式碼figure標籤 和 figcaption標籤（IE9及以上）
菜鳥教程上給出的定義是：
<figure> 標籤規定獨立的流內容（影像、圖表、照片、程式碼等等）。
<figure> 元素的內容應該與主內容相關，同時元素的位置相對於主內容是獨立的。如果被刪除，則不應對文件流產生影響。
<figcaption> 標籤定義 figure 元素的標題（caption）。
"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。
也就是我們常用的 標題+圖片 的形式可以用 figure + figcaption 來表現
<figure>
<figcaption>一張不知道是什麼圖片的標題</figcaption>
<img src="https://user-gold-cdn.xitu.io/2019/2/16/168f42652efede80?w=248&h=186&f=jpeg&s=3237" width="350" height="240" />
</figure>
複製程式碼效果：
此外，還有類似 samp、code等用作計算機程式輸出的標籤。 再做一點補充（圖片轉自winter老師的重學前端04）：
先記這麼多，有不對的地方歡迎指正～