【技术专题】HTML5 网页技术 - HTML5 语义化标签

大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 语义化标签

HTML5 语义化标签的核心是：让标签表达内容的结构和含义 ，而不是只用 <div>。下面按类别介绍你列出的标签。

一、页面结构类

<header>

表示页面或某个区块的"头部/页眉"，常放标题、Logo、搜索、导航等。

• 可以用在 <body> 中表示整个页面头部。
• 也可以用在 <article>、<section> 中表示该区块头部。
• 一个页面可以有多个 <header>。
• 注意：<header> 不是标题标签，标题仍用 <h1>~<h6>。

<header>
  <h1>我的网站</h1>
  <nav>...</nav>
</header>

<nav>

表示导航区域，通常包含主要链接。

• 适合：主导航、面包屑、分页、目录。
• 不是所有链接都要放进 <nav>，只放"主要导航"。
• 页面可有多个 <nav>，建议用 aria-label 区分。

<nav aria-label="主导航">
  <a href="/">首页</a>
  <a href="/blog">博客</a>
</nav>

<main>

表示文档的主要内容区域。

• 每个页面通常只应有一个可见的 <main>。
• 不应嵌套在 <article>、<aside>、<header>、<footer>、<nav> 中。
• 适合放文章、产品列表、核心表单等。

<main>
  <h1>文章列表</h1>
  ...
</main>

<article>

表示独立、完整、可复用、可单独分发的内容。

• 典型场景：博客文章、新闻、论坛帖子、商品卡片、用户评论。
• 可以嵌套：比如文章下的评论也可以用 <article>。
• 通常应包含标题。

<article>
  <h2>HTML5 语义化标签</h2>
  <p>正文内容...</p>
</article>

<section>

表示文档中的一个主题性分组/章节。

• 通常应有一个标题，用来表达这一节的主题。
• 不要把它当通用容器，不要用 <section> 代替所有 <div>。
• 适合：文章章节、标签页内容、产品分类区块。

<section>
  <h2>为什么使用语义化标签？</h2>
  <p>...</p>
</section>

<aside>

表示与周围内容间接相关的补充内容。

• 典型场景：侧边栏、相关阅读、广告、作者简介、引用、注释。
• 可以放在 <main> 里，也可以放在 <article> 中。

<aside>
  <h2>相关阅读</h2>
  <ul>...</ul>
</aside>

<footer>

表示页面或区块的"底部/页脚"。

• 常放版权、联系方式、作者信息、相关链接。
• 一个页面可以有多个 <footer>。
• 可以出现在 <body> 中，也可以出现在 <article>、<section> 中。

<footer>
  <p>© 2026 我的网站</p>
</footer>

二、图文、时间与标记类

<figure>

表示一段自包含的内容，如图片、图表、代码、插图、诗歌等。

• 它通常与主内容相关，但移除后不影响主内容完整性。
• 常与 <figcaption> 搭配。

<figure>
  <img src="chart.png" alt="销售趋势图">
  <figcaption>图 1：2026 年销售趋势</figcaption>
</figure>

<figcaption>

表示 <figure> 的标题或说明文字。

• 必须是 <figure> 的第一个或最后一个子元素。
• 一个 <figure> 最多一个 <figcaption>。

<figure>
  <img src="cat.jpg" alt="一只猫">
  <figcaption>图 2：一只正在睡觉的猫</figcaption>
</figure>

<time>

表示机器可读的日期或时间。

• 用 datetime 属性提供标准格式。
• 适合发布时间、事件时间、更新时间。

<p>发布于 <time datetime="2026-10-03">2026年10月3日</time></p>

也可以带时间：

<time datetime="2026-10-03T14:30:00+08:00">2026年10月3日 14:30</time>

<mark>

表示高亮或标记文本，通常是因为它在当前语境下被特别关注。

• 典型场景：搜索结果高亮、引用中标记关键词。
• 它不是强调。强调用 <em>，重要性用 <strong>。

<p>搜索关键词：<mark>HTML5 语义化</mark></p>

三、交互折叠类

<details>

表示用户可以展开/收起的详情区域。

• 默认收起，添加 open 属性可默认展开。
• 适合 FAQ、补充说明、折叠面板。
• 常与 <summary> 搭配。

<details>
  <summary>什么是 HTML5 语义化？</summary>
  <p>语义化就是使用有含义的标签来表达内容结构。</p>
</details>

<summary>

表示 <details> 的摘要或标题，用户点击它来展开/收起内容。

• 必须是 <details> 的第一个子元素。
• 如果 <details> 没有 <summary>，浏览器会显示一个默认摘要。

<details open>
  <summary>点击收起/展开</summary>
  <p>这里是详细内容。</p>
</details>

四、综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 语义化标签示例</title>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav aria-label="主导航">
      <a href="/">首页</a>
      <a href="/blog">博客</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>HTML5 语义化标签</h2>
        <p>发布于 <time datetime="2026-10-03">2026年10月3日</time></p>
      </header>

      <section>
        <h3>为什么使用语义化标签？</h3>
        <p>它能提升 <mark>可访问性</mark> 和 SEO。</p>
      </section>

      <figure>
        <img src="semantic.png" alt="语义化结构示意图">
        <figcaption>图 1：HTML5 语义化结构</figcaption>
      </figure>

      <footer>
        <p>作者：张三</p>
      </footer>
    </article>

    <aside>
      <h2>相关阅读</h2>
      <ul>
        <li><a href="#">HTML5 新特性</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 我的网站</p>
  </footer>

  <details>
    <summary>展开查看补充说明</summary>
    <p>这里是默认收起的补充内容。</p>
  </details>
</body>
</html>