HTML 内容分组终极指南：从语义化标签到现代 Web 结构

前端老石人2026-04-01 8:13

<p> 元素

描述

<p> 元素表示一个段落。在可视化媒体中，段落通常表现为文本块，相邻块之间通过空行或首行缩进进行分隔。但 HTML 段落可以是任何相关内容的结构分组，例如图像或表单字段。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文：

    • 在需要流内容的地方。
    • 作为 <hgroup> 元素的子元素。

  • 内容模型：短语内容。

使用示例

示例1：文章正文中的段落

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文章正文中的段落</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <article class="post">
    <header class="post-header">
      <h1>为什么 p 元素依然重要</h1>
    </header>

    <p>在 HTML 语义体系中，<code>&lt;p&gt;</code> 是最基础、也是最常被忽视的元素。很多页面看起来结构完整，但实际上段落语义已经被大量的<code>&lt;div&gt;</code> 所替代。</p>

    <p>正确使用段落元素，可以帮助浏览器、搜索引擎以及辅助技术更准确地理解文本的逻辑结构，同时也让样式与结构保持解耦。</p>

    <p>一个简单的判断标准是：如果你在写的是"人类读的句子"，并且它不属于标题、列表或引用，那么它大概率应该是一个段落。</p>
  </article>
</body>

</html>

<hr> 元素

描述

<hr> 元素表示段落级元素之间的主题分隔：例如，故事中场景的转换，或章节内主题的切换。

技术摘要

  • 类别：

    • 流内容。
    • <select> 元素的内部内容元素。

  • 此元素可使用的上下文：

    • 在需要流内容的地方。
    • 作为 <select> 元素的子元素。

  • 内容模型：

    • 不可包含任何内容。
使用示例

示例1：文章段落之间的分隔线

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文章段落之间的分隔线</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <section>
    <h1>使用 &lt;hr&gt; 的典型场景</h1>

    <p>
      在文章或内容区域中，我们常常需要在主题或逻辑段落之间插入分隔线，用于改善可读性。
      HTML5/HTML Living Standard 中推荐直接使用语义化的 <code>&lt;hr&gt;</code> 元素，
      而不要用带有 CSS 边框的空元素充当。
    </p>

    <!-- 分隔线 -->
    <hr class="styled-hr">

    <h2>分隔之后的新段落</h2>

    <p>
      这是一个新的段落，用于展示分隔线之后的内容。注意分隔线本身没有语义内容，
      但表示"主题或内容分隔"。如果含有重要标题、章节等，则应使用 <code>&lt;h2&gt; --- &lt;h6&gt;</code>。
    </p>

    <hr class="styled-hr">

    <p>
      再一次使用 <code>&lt;hr&gt;</code> 显示另一段逻辑的结束与开始。在视觉和语义上，
      这比使用 <code>&lt;div&gt;</code> + 边框更清晰，也符合现代 HTML 规范。
    </p>
  </section>
</body>

</html>

<pre> 元素

描述

<pre> 元素表示预格式化文本，其中的内容需要严格按照 HTML 文件中的书写方式呈现。该文本通常使用非比例字体或等宽字体进行渲染。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型：短语内容。

使用示例

示例1：显示代码片段

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>显示代码片段</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <h1>&lt;pre&gt; 元素示例</h1>
  <p>下面是一个 JavaScript 函数的示例，使用 <code>&lt;pre&gt;</code> 来保留格式化缩进：</p>

  <pre><code>
  function greet(name) {
      if (!name) {
          console.log("Hello, World!");
      } else {
          console.log("Hello, " + name + "!");
      }
  }

  greet("Alice");
  greet();
    </code></pre>

  <p>可以看到，缩进和换行都被完整保留，适合展示代码或 ASCII 艺术。</p>
</body>

</html>
注意事项
  • 在 HTML 语法中，紧跟在 <pre> 元素起始标签之后的第一个换行符会被移除。

<blockquote> 元素

描述

<blockquote> 元素表示包裹的文本是一个长引用。通常，这会在视觉上通过缩进呈现。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型：流内容。

属性
  • cite：一个 URL，指向所引用信息的源文档或消息。此属性旨在指向解释引用上下文或参考来源的信息。
使用示例

示例1：块级引用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>块级引用</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <article>
    <h1>论语 · 学而篇</h1>

    <p>《论语》是儒家经典著作，记载了孔子及其弟子的言行。下面是一段著名的引文：</p>
    <figure>
      <blockquote cite="https://ctext.org/analects">
        <p>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
      </blockquote>
      <figcaption>------ 孔子，<cite>《论语·学而》</cite></figcaption>
    </figure>

    <p>这段话表达了学习的快乐、交友的喜悦以及君子的修养，至今仍被广为传诵。</p>
  </article>
</body>

</html>
注意事项
  • 根据规范，引文的归属信息（如果有）必须放在 <blockquote> 元素外部。

<ol> 元素

描述

<ol> 元素表示有序列表，通常渲染为编号列表。

技术摘要

  • 类别：

    • 流内容。
    • 如果该元素的子元素中至少包含一个 <li> 元素：可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型 ：零个或多个 <li> 元素以及支持脚本的元素。

属性
  • reversed：布尔属性，指定列表项的顺序为逆序。项目将从高到低进行编号。
  • start：一个整数，指定列表项计数的起始值。始终使用阿拉伯数字。
  • type：设置编号类型。

    • 可选值：

      • 1：默认值，数字。
      • a：小写字母。
      • A：大写字母。
      • i：小写罗马数字。
      • I：大写罗马数字。

    • 除非在内部的 <li> 元素上使用了不同的 type 属性，否则指定的类型将用于整个列表。

使用示例

示例1：烹饪步骤列表

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>烹饪步骤列表</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <div class="card">
    <h1>🍳 番茄炒蛋 · 烹饪步骤</h1>

    <ol>
      <li>
        <h2 class="step-title">准备食材</h2>
        <p class="step-desc">鸡蛋3个，番茄2个，葱花、盐、糖适量</p>
      </li>
      <li>
        <h2 class="step-title">打散鸡蛋</h2>
        <p class="step-desc">将鸡蛋打入碗中，加入少许盐，搅拌均匀</p>
      </li>
      <li>
        <h2 class="step-title">切番茄</h2>
        <p class="step-desc">番茄洗净，切成小块备用</p>
      </li>
      <li>
        <h2 class="step-title">炒鸡蛋</h2>
        <p class="step-desc">热锅倒油，倒入蛋液，炒至凝固后盛出</p>
      </li>
      <li>
        <h2 class="step-title">炒番茄</h2>
        <p class="step-desc">锅中留底油，放入番茄炒至出汁</p>
      </li>
      <li>
        <h2 class="step-title">混合翻炒</h2>
        <p class="step-desc">倒入炒好的鸡蛋，加入糖和盐，翻炒均匀</p>
      </li>
      <li>
        <h2 class="step-title">出锅装盘</h2>
        <p class="step-desc">撒上葱花，即可享用</p>
      </li>
    </ol>

    <div class="note">⏱️ 总用时：约15分钟 · 难度：简单</div>
  </div>
</body>

</html>

示例2：排行榜列表

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>排行榜列表</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <div class="card">
    <h1>🏆 本周热门文章排行榜</h1>

    <ol class="ranking-list">
      <li data-score="2.1k">
        <div>
          <strong>HTML语义化完全指南</strong>
          <small>作者：张语义 · 发布于 3天前</small>
        </div>
      </li>
      <li data-score="1.8k">
        <div>
          <strong>CSS Grid 布局实战</strong>
          <small>作者：李前端 · 发布于 5天前</small>
        </div>
      </li>
      <li data-score="1.5k">
        <div>
          <strong>JavaScript 异步编程详解</strong>
          <small>作者：王全栈 · 发布于 2天前</small>
        </div>
      </li>
      <li data-score="982">
        <div>
          <strong>响应式设计的最佳实践</strong>
          <small>作者：赵响应 · 发布于 1天前</small>
        </div>
      </li>
      <li data-score="756">
        <div>
          <strong>可访问性开发入门</strong>
          <small>作者：周无障碍 · 发布于 4天前</small>
        </div>
      </li>
    </ol>

    <div class="update-time">
      更新于 <time datetime="2026-03-16">2026年3月16日</time>
    </div>
  </div>
</body>

</html>
注意事项
  • 要确定使用哪种列表，可以尝试更改列表项的顺序；如果含义发生改变，则应使用 <ol> 元素；否则可以使用 <ul>，如果你的列表是一个菜单，则可以使用 <menu>。

<ul> 元素

描述

<ul> 元素表示无需遵循特定顺序的项目列表，通常渲染为带项目符号的列表。

技术摘要

  • 类别：

    • 流内容。
    • 如果该元素的子元素中至少包含一个 <li> 元素：可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型 ：零个或多个 <li> 元素以及支持脚本的元素。

使用示例

示例1：文章目录列表

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文章目录列表</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <div class="card">
    <h1>📖 文章目录</h1>

    <ul class="toc-list">
      <li><a href="#">语义化HTML简介</a></li>
      <li><a href="#">结构化元素详解</a></li>
      <li><a href="#">文本级语义元素</a></li>
      <li><a href="#">表单与可访问性</a></li>
      <li><a href="#">多媒体嵌入</a></li>
    </ul>
  </div>
</body>

</html>

示例2：购物清单

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>购物清单</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <div class="card">
    <h1>🛒 周末采购清单</h1>

    <ul class="shopping-list">
      <li>
        <input type="checkbox" id="item1">
        <label for="item1" class="item-name">牛奶</label>
        <span class="item-quantity">2盒</span>
      </li>
      <li>
        <input type="checkbox" id="item2">
        <label for="item2" class="item-name">鸡蛋</label>
        <span class="item-quantity">1打</span>
      </li>
      <li>
        <input type="checkbox" id="item3">
        <label for="item3" class="item-name">面包</label>
        <span class="item-quantity">1条</span>
      </li>
      <li>
        <input type="checkbox" id="item4">
        <label for="item4" class="item-name">苹果</label>
        <span class="item-quantity">3斤</span>
      </li>
      <li>
        <input type="checkbox" id="item5">
        <label for="item5" class="item-name">咖啡豆</label>
        <span class="item-quantity">1袋</span>
      </li>
    </ul>

    <div class="total">共 5 件商品</div>
  </div>
</body>

</html>
注意事项
  • <ul> 和 <ol> 元素可以按需要进行任意深度的嵌套。而且，嵌套列表可以在 <ol> 和 <ul> 之间无限制地交替。

<menu> 元素

描述

<menu> 元素在 HTML 规范中被描述为 <ul> 的语义替代品，但浏览器将其视为与 <ul> 没有区别。它表示一个无序的项目列表。

技术摘要

  • 类别：

    • 流内容。
    • 如果该元素的子元素中至少包含一个 <li> 元素：可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型 ：零个或多个 <li> 元素以及支持脚本的元素。

使用示例

示例1：文章操作工具栏

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文章操作工具栏</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <div class="card">
    <h1>📄 语义化HTML指南</h1>

    <article>
      <p>menu 元素表示用户可以执行或激活的命令工具栏，与 ul 不同，它代表可操作的功能集合。</p>
      <p>根据最新规范，menu 应包含 li 元素，每个 li 中包含按钮或其他可交互元素。</p>
    </article>
    
    <menu class="toolbar-menu">
      <li><button type="button">👍 点赞</button></li>
      <li><button type="button">💬 评论</button></li>
      <li><button type="button">📤 分享</button></li>
      <li><button type="button">⭐ 收藏</button></li>
    </menu>

    <div class="note">
      ⚡ menu 表示命令工具栏，每个 li 包含可激活的按钮
    </div>
  </div>
</body>

</html>

示例2：文本编辑工具栏

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文本编辑工具栏</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <div class="card">
    <h1>✍️ 文本编辑器</h1>
    <menu class="editor-menu">
      <li><button type="button" title="加粗"><strong>B</strong></button></li>
      <li><button type="button" title="斜体"><em>I</em></button></li>
      <li><button type="button" title="下划线"><u>U</u></button></li>
      <li class="separator" role="separator"></li>
      <li><button type="button" title="左对齐">⫷</button></li>
      <li><button type="button" title="居中">☰</button></li>
      <li><button type="button" title="右对齐">⫸</button></li>
      <li class="separator" role="separator"></li>
      <li><button type="button" title="无序列表">•</button></li>
      <li><button type="button" title="有序列表">1.</button></li>
      <li><button type="button" title="引用">"</button></li>
    </menu>

    <div class="editor" contenteditable="true">
      在这里输入文本... 选中文字后点击上方按钮可以应用格式。
    </div>

    <div class="note">
      ⚡ menu 表示格式工具栏，每个按钮都是可执行的命令
    </div>
  </div>
</body>

</html>
注意事项
  • <menu> 和 <ul> 元素都表示无序的项目列表。主要区别在于：
    • <ul> 主要包含用于显示的项目；
    • <menu> 表示一个包含用户可以执行或激活的命令的工具栏。

<li> 元素

描述

<li> 元素用于表示列表中的项目。它必须包含在父元素中：有序列表 (<ol>)、无序列表 (<ul>) 或菜单 (<menu>)。

技术摘要

  • 类别：无。

  • 此元素可使用的上下文：

    • 位于 ol 元素内部。
    • 位于 ul 元素内部。
    • 位于 menu 元素内部。

  • 内容模型：流内容。

属性
  • value：当 <li> 元素所属的列表容器是 <ol> 元素时，该属性用于确定该列表项的序号值。必须是一个有效的整数。
使用示例

示例1：跳过编号

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>跳过编号</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="card">
    <h1>🍰 蛋糕制作步骤</h1>

    <ol>
      <li>第一步：准备原材料</li>
      <li>第二步：混合材料</li>
      <li value="5">第五步（跳过中间步骤）: 烘焙</li>
      <li>第六步：装饰蛋糕</li>
    </ol>
  </div>
</body>

</html>

<dl> 元素

描述

<dl> 元素表示描述列表。该元素包含一组术语（使用 <dt> 元素指定）及其描述（由 <dd> 元素提供）的分组列表。此元素的常见用途是实现术语表或显示元数据（键值对列表）。

技术摘要

  • 类别：

    • 流内容。
    • 如果该元素的子元素中至少包含一个名称---值组：可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型：

    • 形式一：零个或多个分组，每个分组由一个或多个 dt 元素后跟一个或多个 dd 元素组成，其间可选地穿插支持脚本的元素。
    • 形式二：一个或多个 div 元素，其间可选地穿插支持脚本的元素。
使用示例

示例1：单个术语及其说明

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>单个术语及其说明</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <section class="card">
    <h1>名词解释</h1>
    <dl>
      <dt>语义化 HTML</dt>
      <dd>使用具有明确含义的 HTML 元素来表达内容结构，提升可访问性与可维护性，而不是仅用 div 堆叠样式。</dd>
    </dl>
  </section>
</body>

</html>

示例2：多个术语单个说明

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>多个术语单个说明</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <section class="card">
    <h1>术语别名</h1>
    <dl>
      <dt>跨站脚本</dt>
      <dt>XSS</dt>
      <dt>脚本注入</dt>
      <dd>一种常见的 Web 安全漏洞：攻击者将恶意脚本注入页面，使其在用户浏览器中执行，从而窃取信息或劫持会话。</dd>
    </dl>
  </section>
</body>

</html>

示例3：单个术语多个说明

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>单个术语多个说明</title>
  <link rel="stylesheet" href="./css/style3.css">
</head>

<body>
  <section class="card">
    <h1>同一术语的多重含义</h1>
    <dl>
      <dt>路由</dt>
      <dd><span class="tag">前端</span>在单页应用中，根据 URL 变化切换视图与状态的机制（如 history / hash）。</dd>
      <dd><span class="tag">网络</span>在计算机网络中，决定数据包从源到目的地的转发路径与策略。</dd>
    </dl>
  </section>
</body>

</html>

示例4：多个术语及其说明

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>多个术语及其说明</title>
  <link rel="stylesheet" href="./css/style4.css">
</head>

<body>
  <section class="card">
    <h1>常见问题（FAQ）</h1>
    <dl>
      <dt>为什么页面首屏加载很慢？</dt>
      <dd>常见原因包括资源体积过大、未做代码分割、图片未压缩、缓存策略不当或接口响应慢。可先从网络面板定位瓶颈。</dd>

      <dt>什么时候应该用 <code>ol</code> 而不是 <code>ul</code>？</dt>
      <dd>当顺序本身有意义（步骤、排名、流程）用 <code>ol</code>；仅是并列集合（功能点、导航入口）用 <code>ul</code>。</dd>

      <dt>如何让按钮更易用？</dt>
      <dd>保证足够点击区域、可见的焦点样式、清晰的文本标签，并为禁用/加载态提供反馈。</dd>
    </dl>
  </section>
</body>

</html>

示例5：将名称---值组包裹在 div 元素中

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>将名称---值组包裹在 div 元素中</title>
  <link rel="stylesheet" href="./css/style5.css">
</head>

<body>
  <section class="card">
    <h1>订单信息</h1>
    <dl>
      <div class="row">
        <dt>订单号</dt>
        <dd>20250101-AX93K</dd>
      </div>

      <div class="row">
        <dt>状态</dt>
        <dd>已支付 <span class="pill">待发货</span></dd>
      </div>

      <div class="row">
        <dt>下单时间</dt>
        <dd>2026-01-01 10:32</dd>
      </div>

      <div class="row">
        <dt>收货地址</dt>
        <dd>上海市浦东新区 XX 路 XX 号 12 栋 3402</dd>
      </div>
    </dl>
  </section>
</body>

</html>

<dt> 元素

描述

<dt> 元素表示描述列表中术语---说明分组里的术语或名称部分。

技术摘要

  • 类别：无。

  • 此元素可使用的上下文：

    • 位于 <dl> 元素内部，且在 <dd> 或 <dt> 元素之前。
    • 位于作为 <dl> 元素子元素的 <div> 元素内部，且在 <dd> 或 <dt> 元素之前。

  • 内容模型 ：流内容，但其后代中不得包含 <header>、<footer>、章节内容或标题内容。

<dd> 元素

描述

<dd> 元素表示描述列表中术语---说明分组里的说明、定义或取值部分。

技术摘要

  • 类别：无。

  • 此元素可使用的上下文：

    • 位于 <dl> 元素内部，且在 <dt> 或 <dd> 元素之后。
    • 位于作为 <dl> 元素子元素的 <div> 元素内部，且在 <dt> 或 <dd> 元素之后。

  • 内容模型：流内容。

<figure> 元素

描述

<figure> 元素表示一段流内容，可选择性地带有说明文字。该内容是自包含的，并且通常作为一个整体从文档的主内容流中被引用。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型：

    • 形式一：一个 figcaption 元素，后跟流内容。
    • 形式二：流内容，后跟一个 figcaption 元素。
    • 形式三：仅流内容。
使用示例

示例1：文章配图 + 图注

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>文章配图 + 图注</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <div class="card">
    <h1>🌊 深海发光生物</h1>
    <p>深海是指海平面200米以下区域，阳光无法到达。这里生活着许多神奇的发光生物。</p>

    <figure>
      <img src="img/pic01.png" alt="深海鮟鱇鱼示意图">
      <figcaption>图1：深海鮟鱇鱼，雌鱼头顶有发光的"钓竿"吸引猎物</figcaption>
    </figure>

    <p>鮟鱇鱼是深海最著名的发光生物之一，其发光器官内共生着发光细菌。</p>
  </div>
</body>

</html>

示例2：代码示例 + 说明

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>代码示例 + 说明</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <div class="card">
    <h1>💻 JavaScript 函数示例</h1>
    <p>下面是一个简单的加法函数示例：</p>
    
    <figure>
      <pre><code>function add(a, b) {
  return a + b;
}

// 调用函数
const result = add(5, 3);
console.log(result); // 输出: 8</code></pre>
      <figcaption>代码1：add函数定义与调用</figcaption>
    </figure>

    <p>这个函数接受两个参数，返回它们的和。</p>
  </div>
</body>

</html>

示例3：引用内容

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>引用内容</title>
  <link rel="stylesheet" href="./css/style3.css">
</head>

<body>
  <div class="card">
    <h1>📚 论语名句</h1>
    <p>孔子在《论语》中留下了许多经典名言：</p>
    
    <figure>
      <blockquote cite="https://ctext.org/analects">
        <p>学而不思则罔，思而不学则殆。</p>
        <p>温故而知新，可以为师矣。</p>
      </blockquote>
      <figcaption>------ <cite>《论语·为政》</cite></figcaption>
    </figure>

    <p>这两句话强调了学习与思考的辩证关系。</p>
  </div>
</body>

</html>

<figcaption> 元素

描述

<figcaption> 元素表示其父元素 <figure>中其余内容的说明文字或图例。

技术摘要
  • 类别：无。
  • 此元素可使用的上下文 ：作为 <figure> 元素的第一个或最后一个子元素。
  • 内容模型：流内容。

<main> 元素

描述

<main> 元素表示文档中的主体内容。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文 ：在需要流内容的地方，但前提是它必须是层级结构正确的 main 元素。

  • 内容模型：流内容。

使用示例

示例1：页面主要内容

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>页面主要内容</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 站点头部 -->
  <div class="region header-region">
    <div class="region-title">
      <span>🌐</span> 站点头部
    </div>
  </div>

  <!-- 中间区域：主要内容 + 侧边栏 -->
  <div class="middle-region">
    <!-- 主要内容 -->
    <div class="main-region">
      <div class="region-title">
        <span>📄</span> 主要内容
      </div>
    </div>

    <!-- 侧边栏 -->
    <div class="aside-region">
      <div class="region-title">
        <span>📌</span> 侧边栏
      </div>
    </div>
  </div>

  <!-- 站点底部 -->
  <div class="region footer-region">
    <div class="region-title">
      <span>📋</span> 站点底部
    </div>
  </div>
</body>

</html>
注意事项
  • 一个文档中，不得包含多个未指定 hidden 属性的 <main> 元素。
  • 所谓层级结构正确的 <main> 元素，是指其祖先元素仅限于 <html>、<body>、<div>、不具有可访问名称的 <form> 元素，以及自治的自定义元素。每一个 <main> 元素都必须满足层级结构正确这一要求。

<search> 元素

描述

<search> 元素是一个容器，表示文档或应用中包含用于执行搜索或筛选操作的表单控件或其他内容的部分。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。

  • 此元素可使用的上下文：在需要流内容的地方。

  • 内容模型：流内容。

使用示例

示例1：站点级搜索

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>站点级搜索</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <header>
    <div class="wrap">
      <h1>技术文档</h1>
      <search>
        <form action="/search" method="get">
          <label for="q" class="visually-hidden">搜索文档</label>
          <input type="search" id="q" name="q" placeholder="搜索文章、指南或 API..." />
          <button type="submit">搜索</button>
        </form>
      </search>
    </div>
  </header>
</body>

</html>

示例2：页面内搜索

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>页面内搜索</title>
  <link rel="stylesheet" href="./css/style2.css">
</head>

<body>
  <main>
    <h1>用户列表</h1>
    <search>
      <form class="search-box">
        <label for="user-search">搜索用户</label>
        <input type="search" id="user-search" placeholder="按姓名或邮箱过滤" />
      </form>
    </search>

    <ul>
      <li>张三（zhangsan@example.com）</li>
      <li>李四（lisi@example.com）</li>
      <li>王五（wangwu@example.com）</li>
    </ul>
  </main>
</body>

</html>

<div> 元素

描述

<div> 元素本身不具有任何特定语义，仅表示其子元素的集合。它可以与 class、lang 和 title 等属性配合使用，用于标注一组连续元素所共有的语义信息。它也可以在 <dl> 元素中使用，用来包裹一组 <dt> 和 <dd> 元素。

技术摘要

  • 类别：

    • 流内容。
    • 可感知内容。
    • <select> 元素的内部内容元素。
    • <optgroup> 元素的内部内容元素。
    • <option> 元素的内部内容元素。

  • 此元素可使用的上下文：

    • 在需要流内容的地方。
    • 作为 <dl> 元素的子元素。

  • 内容模型：

    • 如果该元素是 <dl> 元素的子元素：一个或多个 <dt> 元素，后跟一个或多个 <dd> 元素，其间可选择性地穿插支持脚本的元素。
    • 否则，如果该元素是 <option> 元素的后代：零个或多个 <option> 元素的内部内容元素。
    • 否则，如果该元素是 <optgroup> 元素的后代：零个或多个 <optgroup> 元素的内部内容元素。
    • 否则，如果该元素是 <select> 元素的后代：零个或多个 <select> 元素的内部内容元素。
    • 否则：流内容。
使用示例

示例1：样式/行为的钩子

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>样式或行为钩子</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="card">
    <div class="card-header">
      <h2>📘 语义化HTML</h2>
      <button class="btn" onclick="toggleContent()">展开/折叠</button>
    </div>
    <p class="desc">div 元素作为样式和行为钩子</p>

    <div id="content" class="content hidden">
      <p>✅ 样式钩子：通过 class 添加样式</p>
      <p>✅ 行为钩子：通过 JavaScript 控制交互</p>
      <ul>
        <li>div.card - 卡片容器</li>
        <li>div.card-header - 标题行</li>
        <li>div.content - 可折叠内容</li>
      </ul>
    </div>
  </div>
  
  <script>
    function toggleContent() {
      const content = document.getElementById('content');
      content.classList.toggle('hidden');
    }
  </script>
</body>

</html>
注意事项
  • 强烈建议将 <div> 元素视为最后的选择，仅在没有任何其他合适元素可用时才使用它。相较于使用 <div>，优先选用更合适的语义化元素，有助于提升内容的可访问性，并降低后续维护的难度。
相关推荐
大转转FE2 小时前
转转前端周刊第191期: 淘宝闪购 AI Agent 的秒级响应记忆系统
前端·人工智能
怪我冷i2 小时前
在win11进行Rust Web 开发，采用Salvo框架
开发语言·前端·rust
candyTong2 小时前
Claude Code 是怎么跑起来的：从 Agent Loop 理解代理循环实现
前端·后端·ai编程
倾颜2 小时前
我是怎么把 Multi-Tool Runtime 升级成第一层 Skill Runtime 的
前端·llm·next.js
qq_406176142 小时前
React 状态管理完全指南：从入门到选型
前端·javascript·react.js
thatway198910 小时前
闲聊-关于AI终结者的警醒
前端
努力的小郑10 小时前
突发！Claude Code 51万行源码全网裸奔：一场史诗级“开源”事故，国内大厂笑麻了
前端·后端·ai编程
七度黑光10 小时前
用 openclaw 给故障复盘打分：质量审核自动化实践
运维·服务器·前端·数据库·自动化
HashTang11 小时前
Claude Code 源码中 REPL.tsx 深度解析：一个 5005 行 React 组件的架构启示
前端·后端·ai编程
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程06“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）07UV安装并设置国内源08OpenClaw 使用和管理 MCP 完全指南09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）