常用语义标签快速了解

aside - 侧栏

aside表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。

---

article - 独立主体

页面中具有明确独立性的部分。

---

header，footer - 头部/底部

• header，如其名，通常出现在前部，表示导航或者介绍性的内容。

• footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

---

section - 语义化 div

section 元素代表文档中的“节”或“段”，“段”可以是指一片文章里按照主题的分段；“节”可以是指一个页面里的分组。section 通常还带标题，虽然 html5 中 section 会自动给标题h1-h6降级，但是最好手动给他们降级。

---

hgroup, h1, h2 - 标题组

hgroup是标题组，h1是一级标题，h2是二级标题，出现有主副标题情况时，用 hgroup 包裹住

<hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
</hgroup>

---

abbr - 缩写

用来包裹缩写的内容。

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

---

hr - 转折

样式表现为一根横线，但表示的是故事走向的转变或者话题的转变，如果需要纯视觉效果的横线不应用此标签，而只用CSS去实现。

---

p - 段落

一般用来表示段落，也可以用 class = "note" 的方式表示HTML中没有相关语义标签时的替代。

---

strong, em - 强调

strong 表示包裹的内容很重要， em 表示重音，防止歧义。

---

blockquote, q, cite - 引用

blockquote表示段落级引述内容，q表示行内的引述内容，cite表示引述的作品名。

---

time - 时间

<time datetime="2019-7-30">30 July 2019</time>

---

figure, figcaption - 独立插入

figure 表示一段富文本，可以是一个文章插图、一段代码、一个表格，通常搭配 figcaption 来表述这段富文本的描述/标题，当然，一个 figure 下只能有一个 figcaption，也可以没有

---

dfn - 定义

用来包裹被定义的名词

<dfn>苹果</dfn>是一种水果。

---

nav, ul, ol - 导航，列表

nav 表示网站的导航，但不一定所有的导航都需要用 nav 来实现，建议仅用来实现比较重要的导航，例如网页页脚的链接列表，直接 footer 即可。另外，每个页面可以有多个 nav。ul表示无序列表， ol 表示有序列表。ul，ol 多数出现正在行文中间，它的上文多数在提示：要列举某些项。不要给所有并列关系，递进关系都加上 ul, ol 标签。

---

pre, samp, code - 预设置

pre标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。samp标签表示一段计算机程序的示例输出。code标签表示一段代码。

<pre>
    <samp>
GET /home.html HTTP/1.1
Host: www.example.org
    </samp>
</pre>

<pre>
    <code>
        &lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
          &lt;/body&gt;
        &lt;/html&gt;
    </code>
</pre>

---

不常用语义标签

不常用语义标签.jpg