语义标签

---

<header>

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

---

<nav>

HTML <nav> 元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

---

<section>

HTML <section> 元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

---

<figure>

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

---

<figcaption>

HTML <figcaption> 元素 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在 <figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

---

<article>

HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

---

<aside>

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

---

<footer>

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

---

示例

代码

<header>
    <h3>我的收藏夹</h3>
</header>
<section>
    <h4>图片</h4>
    <figure>
        <img src="https://pjmcode.top/static/image/favicon.png" width="100">
        <figcaption>logo</figcaption>
    </figure>
    <figure>
        <img src="https://pjmcode.top/static/image/menu/logo.png" height="100">
        <figcaption>Warlock War</figcaption>
    </figure>
</section>
<section>
    <h4>古诗</h4>
    <article>
        <h5>春晓</h5>
        <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
    </article>
    <article>
        <h5>咏柳</h5>
        <p>碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。</p>
    </article>
</section>
<footer>©2018-2022 Me 版权所有</footer>

结果

我的收藏夹

图片

logo

Warlock War

古诗

春晓

春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。

咏柳

碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。