HTML5 Tags and Structural ElementsHTML5 标签与结构元素

---

学习目标

观看完本视频后，您将能够：

1. 列出 HTML5 特有的元素。
2. 描述 HTML5 结构元素：section、article、header、footer、figure、figcaption。
3. 解释 导航元素（navigation） 与 分组元素（grouping） 之间的区别。
   

---

HTML5 特有的元素

HTML5 引入了许多新的元素，具有直观的名称。以下是一些常见的 HTML5 特定元素：

• audio: 用于嵌入音频内容。
• canvas: 用于呈现图形内容。

这些标签的名称设计上更加语义化，能清晰地表达元素的用途。例如，audio 用于音频内容，canvas 用于图形内容。并非本视频涵盖了所有 HTML5 元素，建议您阅读下表了解更多。

---

HTML5 元素表格

注释:
HTML 注释有助于开发者解释代码的功能，浏览器不会显示这些注释，除非用户查看源代码。

---

HTML5 结构元素

HTML5 提供了许多专门的结构元素，这些元素比 div 标签更具语义性，可以帮助开发者更清晰地定义网页的结构。

• <div> 标签
  在基于 div 布局的网页中，页面的每个部分都被划分到不同的区块内，以便进行单独的格式化。想象一下，页面可能的自然分区：

  • 页面标题
  • 带有可选择标签的横幅
  • 用于显示图片的区域
  • 用于文本和缩略图的其他区块

  虽然 div 标签并未在 HTML5 中引入，但它仍然是布局页面或文档的良好起点。之后，您可以在 div 标签内部使用其他 HTML5 特定的结构元素。
  

---

语义化标签的意义

大多数 HTML 元素都有其 语义意义。换句话说，元素描述了它所包含的内容的功能或类型。例如：

• <p>: 表示一个段落，通常包含文本内容。
• <div>: 仅用于逻辑分组，没有固有的语义意义。

建议：使用 HTML5 中的专用元素标记网站，而不是仅依赖通用的 div 或 span 元素，能够提高网页的可读性和可访问性。

HTML5 常见结构元素

1. <article>
   定义一个独立的内容块，通常可以与页面的其余部分区分开来。适用于新闻报道、博客文章等。
2. <section>
   定义文档中的逻辑分区。例如，在线手册中的章节部分。
   
3. <header>
   用于标记页面或文章的头部区域，通常包含标题和导航链接。
4. <footer>
   用于定义页面底部的区域，通常包括版权信息、联系方式等。
   

---

代码示例：HTML5 结构元素

以下是一个简单的 HTML5 结构元素代码示例：

<article>
  <header>
    <h1>在线新闻报道</h1>
  </header>
  <section>
    <header>
      <h2>第一部分标题</h2>
    </header>
    <p>这是一段新闻报道内容。</p>
  </section>
  <footer>
    <p>版权信息</p>
  </footer>
</article>

在此代码中：

• <article> 用于创建独立的新闻报道。
• <header> 用于标记页面的标题。
• <section> 将内容分为不同的部分。
• <footer> 定义页面底部区域。

---

嵌入式内容与辅助元素

<aside>标签

• <aside> 提供与主内容相关的附加信息。它允许您提取并展示额外的内容或跳转到其他资源，而不会干扰主要讨论的内容。

<figure>和<figcaption>标签

• <figure> 定义了一个独立的元素，通常用于嵌入图形、图像或代码段。
• <figcaption> 定义 <figure> 元素内容的标题或说明。

---

导航元素

在 HTML5 中，网站通常有专门的区域用于放置导航链接，无论是跳转到外部网站，还是在同一应用程序的不同页面之间切换。使用 <nav> 标签可以方便地对这些导航链接进行分组。

---

总结

在本视频中，您学到了：

• HTML5 标签 提供了对文档的控制，尤其是一些结构化标签，如 <article>、<section>、<header> 和 <footer> 等，它们使网页的内容更加语义化。
• <aside>、<figure> 和 <figcaption> 标签帮助您有效地组织和展示额外的内容和嵌入式媒体。
• <nav> 标签用于分组网页中的导航链接，简化了网站结构和访问。

通过这些 HTML5 结构标签，您可以更加清晰、易于理解地标记网页内容。