最近追更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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/2/16/168f42652efede80~tplv-t2oaga2asx-image.image" width="350" height="240" />
</figure>
效果：
此外，还有类似 samp、code等用作计算机程序输出的标签。 再做一点补充（图片转自winter老师的重学前端04）：
先记这么多，有不对的地方欢迎指正～
