HTML5 新语义元素

前言

  • 一个语义元素能够清楚的描述其意义给浏览器和开发者。

    • 语义 = 意义
    • 语义元素 = 有意义的元素
  • 无语义元素实例: <div><span> - 无需考虑内容。

  • 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容。

1、HTML5 中新的语义元素

  • HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分:
标签 描述 备注 🔗
<article> </article> 定义页面独立的内容区域,定义外部的内容 H5 新加 🔗
<aside> </aside> 定义页面的侧边栏内容 H5 新加 🔗
<bdi> </bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置 H5 新加 🔗
<command> </command> 定义命令按钮,比如单选按钮、复选框或按钮 H5 新加 🔗
<details> </details> 用于描述文档或文档某个部分的细节 H5 新加 🔗
<dialog> </dialog> 定义对话框,比如提示框 H5 新加 🔗
<summary> </summary> 标签包含 details 元素的标题 H5 新加 🔗
<figure> </figure> 规定独立的流内容(图像、图表、照片、代码等等) H5 新加 🔗
<figcaption> </figcaption> 定义 <figure> 元素的标题 H5 新加 🔗
<footer> </footer> 定义 section 或 document 的页脚 H5 新加 🔗
<header> </header> 定义了文档的头部区域 H5 新加 🔗
<mark> </mark> 定义带有记号的文本 H5 新加 🔗
<meter> </meter> 定义度量衡。仅用于已知最大和最小值的度量 H5 新加 🔗
<nav> </nav> 定义导航链接的部分 H5 新加 🔗
<progress> </progress> 定义任何类型的任务的进度 H5 新加 🔗
<ruby> </ruby> 定义 ruby 注释(中文注音或字符) H5 新加 🔗
<rt> </rt> 定义字符(中文注音或字符)的解释或发音 H5 新加 🔗
<rp> </rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 H5 新加 🔗
<section> </section> 定义文档中的节(section、区段) H5 新加 🔗
<time> </time> 定义日期或时间 H5 新加 🔗
<wbr /> 规定在文本中的何处适合添加换行符 H5 新加 🔗

2、< header > 元素

  • <header> 元素描述了文档的头部区域。

  • <header> 元素主要用于定义内容的介绍展示区域。

  • 在页面中你可以使用多个 <header> 元素。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    <article>
    <header> <!-- 定义文章的头部 -->
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
    </header>

    <p>Windows Internet Explorer 9(缩写为 IE9)是在2011年3月14日21:00发布的</p>
    </article>
  • 效果

3、< footer > 元素

  • <footer> 元素描述了文档的底部区域。

  • <footer> 元素应该包含它的包含元素。

  • 一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。

  • 文档中你可以使用多个 <footer> 元素。

  • 示例

    1
    2
    3
    4
    <footer>
    <p>Posted by: Qian Chia</p>
    <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>
  • 效果

4、< nav > 元素

  • <nav> 标签定义导航链接的部分。

  • <nav> 元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav> 元素中。

  • 示例

    1
    2
    3
    4
    5
    6
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
  • 效果

5、< article > 元素

  • <article> 标签定义独立的内容,定义外部的内容。

  • <article> 元素使用实例:

    • Forum post
    • Blog post
    • News story
    • Comment
  • 示例

    1
    2
    3
    4
    <article>
    <h1>Internet Explorer 9</h1>
    <p>Windows Internet Explorer 9(缩写为 IE9)在2011年3月14日21:00 发布。</p>
    </article>
  • 效果

6、< section > 元素

  • <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

  • 根据 W3C HTML5 文档: section 包含了一组内容及其标题。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the
    conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was
    founded in 1961.</p>
    </section>

    <section>
    <h1>WWF's Panda symbol</h1>
    <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi
    Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of
    WWF.</p>
    </section>
  • 效果

7、< aside > 元素

  • <aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。

  • <aside> 标签的内容应与主区域的内容相关。

  • 示例

    1
    2
    3
    4
    5
    6
    <p>My family and I visited The Epcot center this summer.</p>

    <aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>
  • 效果

8、< figure > 和 < figcaption > 元素

  • <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

  • <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

  • <figcaption> 标签定义 <figure> 元素的标题。

  • <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in
    Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and
    almost flat, and is a famous tourist attraction in Norway.</p>

    <figure>
    <img src="https://demo.qianchia.com/media/image/demo1.png" alt="The Pulpit Rock" width="128" height="128" />
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
  • 效果

9、浏览器支持

元素
新语义元素 支持 9.0 支持 支持 支持
  • 表格中的数字表示支持该元素的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、HTML5 中新的语义元素
  3. 3. 2、< header > 元素
  4. 4. 3、< footer > 元素
  5. 5. 4、< nav > 元素
  6. 6. 5、< article > 元素
  7. 7. 6、< section > 元素
  8. 8. 7、< aside > 元素
  9. 9. 8、< figure > 和 < figcaption > 元素
  10. 10. 9、浏览器支持
隐藏目录