文本级语义与变更标记

前端老石人2026-04-08 10:18

文本级语义

<a> 元素

描述

  • 如果 <a> 元素具有 href 属性，则它表示一个超链接（超文本锚点），由其内容标识。

  • 如果 <a> 元素没有 href 属性，则该元素表示一个占位符，表示原本可能存在链接的地方，其内容仅包含元素的内容。

技术摘要

  • 类别：

    • 流内容。
    • 短语内容。
    • 如果该元素具有 href 属性：交互式内容。
    • 可感知内容。

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

  • 内容模型 ：透明，但其后代中不得包含交互式内容、<a> 元素，或指定了 tabindex 属性的元素。

属性

  • href：超链接指向的 URL。

    • 链接并不局限于基于 HTTP 的 URL，它们可以使用浏览器所支持的任何 URL 方案，例如：
      • 使用 tel: URL 的电话号码。
      • 使用 mailto: URL 的电子邮件地址。
      • 使用 sms: URL 的短信消息。
      • 使用 javascript: URL 的可执行代码。
    • URL 的其他特性还可以用于定位资源中的特定部分，包括：
      • 使用文档片段定位页面中的某个区段。
      • 使用文本片段定位特定的文本内容。
      • 使用媒体片段定位媒体文件中的某一部分。

  • target：指定链接的 URL 显示位置，作为浏览上下文（如标签页、窗口或 <iframe>）的名称。

    • 以下关键字在指定 URL 加载位置时具有特殊含义：

      • _self：默认值，当前的浏览上下文。
      • _blank：通常是在新标签页打开，但用户可以配置浏览器使其在新窗口中打开。
      • _parent：当前浏览上下文的父级。如果没有父级，则表现得与 _self 相同。
      • _top：最顶层的浏览上下文。具体来说，这指的是当前上下文的"最高"祖先。如果没有祖先，则表现得与 _self 相同。

    • 自定义值：把链接的打开上下文绑定到一个同名的浏览上下文。如果这个上下文：

      • 尚未创建，浏览器会创建一个新的上下文；
      • 已经存在，则链接将在该上下文中打开。

  • download：指示浏览器将链接的 URL 视为下载资源。

    • 可以带或不带文件名值使用：

      • 不带值：浏览器将根据多种来源建议一个文件名/扩展名：

        • Content-Disposition HTTP 标头；
        • URL 路径的最后一段；
        • 媒体类型（来自 Content-Type 标头、data: URL 的开头，或 blob: URL 的 Blob.type）。

      • filename：定义值作为建议的文件名。/ 和 \ 字符会被转换为下划线 (_)。文件系统可能禁止文件名中使用其他字符，因此浏览器会在必要时调整建议的名称。

    • download 仅适用于同源 URL，或 blob: 和 data: 协议。

    • 如果浏览器无法打开链接资源，都会触发下载行为。

    • 如果 Content-Disposition 标头包含与 download 属性不同的信息，最终行为可能有所差异：

      • 如果标头指定了文件名，则它优先于 download 属性中指定的文件名。
      • 如果标头指定了 inline 处置方式，Chrome 和 Firefox 会优先处理该属性，将其视为下载。

  • ping：一个以空格分隔的 URL 列表。当链接被点击导航时，浏览器会向这些 URL 发送包含 PING 正文的 POST 请求。通常用于跟踪用户行为。

  • rel：指定当前文档与被链接资源之间的关系类型。常见值：

    • nofollow：告诉搜索引擎不要追踪此链接，不传递权重/排名信号。常用于用户生成内容、付费链接或不可信来源。
    • noopener：防止新打开的页面通过 window.opener 访问原页面的 window 对象，避免标签页之间的恶意操控。通常与 target="_blank" 配合使用。
    • noreferrer：阻止浏览器发送 Referer 请求头，即新页面无法获知用户从哪个页面跳转而来。同时包含 noopener 的效果。
    • opener：与 noopener 相反，允许新页面通过 window.opener 访问原页面。在需要跨窗口通信时使用（如单页应用）。
    • help：表示链接指向帮助文档或说明页面，提供与当前上下文相关的辅助信息。
    • search： 表示链接指向站内搜索工具或搜索页面，可用于发现相关资源。
    • author：表示链接指向当前文章/页面的作者信息页面（如作者简介、联系方式）。

  • hreflang：提示链接 URL 的人类语言。无内置功能。允许的值与全局 lang 属性相同。

  • type：提示链接 URL 的格式，使用 MIME 类型进行说明。无内置功能。

  • referrerpolicy：指定在点击链接时发送多少 referrer 信息。

    • 具体属性值请查阅 <link> 元素的相关属性。
使用示例

示例1：rel 属性的使用

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

<head>
  <meta charset="UTF-8">
  <title>rel 属性的使用</title>
</head>

<body>
  <!-- 广告/第三方工具：nofollow -->
  <p>本文中提到的第三方工具仅供参考：
    <a href="https://example-ad.com" rel="nofollow">示例工具官网</a>
  </p>

  <!-- 新窗口打开：推荐同时使用 noopener noreferrer -->
  <p>
    <a href="https://example.com" target="_blank" rel="noopener noreferrer">
      在新窗口打开示例网站
    </a>
  </p>

  <!-- 匿名访问：同样建议加上 noopener 确保兼容 -->
  <p>
    <a href="https://external.example.com" target="_blank" rel="noopener noreferrer">
      匿名访问外部站点
    </a>
  </p>
</body>

</html>

示例2：target 属性的使用

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

<head>
  <meta charset="UTF-8">
  <title>target 属性的使用1</title>
  <link rel="stylesheet" href="./css/style1.css">
</head>

<body>
  <h1>target 属性基础用法</h1>

  <section class="target-section">
    <h2>_self（当前上下文，默认行为）</h2>
    <p>在当前窗口/标签页中打开链接，替换当前页面。</p>
    <div class="link-group">
      <a href="https://example.com" target="_self" class="btn btn-default">显式指定 _self</a>
      <a href="https://example.com" class="btn btn-default">省略 target（默认 _self）</a>
    </div>
  </section>

  <section class="target-section">
    <h2>_blank（空白上下文）</h2>
    <p>在新标签页或新窗口中打开链接。</p>
    <div class="link-group">
      <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="btn btn-external">
        在新标签页打开（安全写法）
      </a>
    </div>
  </section>

  <section class="target-section">
    <h2>自定义窗口名称（绑定上下文）</h2>
    <p>使用特定名称作为 target 值，实现窗口复用：若该名称窗口已存在则在其中打开，否则创建新窗口。</p>
    <div class="link-group">
      <a href="https://example.com/help" target="helpWindow" class="btn btn-custom">打开帮助中心</a>
      <a href="https://example.com/faq" target="helpWindow" class="btn btn-custom">在相同窗口打开 FAQ</a>
      <a href="https://example.com/guide" target="helpWindow" class="btn btn-custom">复用窗口打开指南</a>
    </div>
    <p class="hint">多次点击上述链接，它们都会在同一个名为 "helpWindow" 的窗口中打开。</p>
  </section>
</body>

</html>

示例3：download 属性的使用

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

<head>
  <meta charset="UTF-8">
  <title>download 属性的使用</title>
  <link rel="stylesheet" href="./css/style3.css">
</head>

<body>
  <h1>📥 download 属性示例</h1>

  <div class="demo-box">
    <div class="file-item">
      <a href="data:text/plain,Hello%20World" download="hello.txt">下载 hello.txt</a>
      <span class="tag">download="hello.txt"</span>
    </div>
    <div class="file-item">
      <a href="data:text/plain,这是文本文件内容" download="sample.txt">下载 sample.txt</a>
      <span class="tag">download="sample.txt"</span>
    </div>
    <div class="file-item">
      <a href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='20' fill='%231d4e89'/%3E%3C/svg%3E"
        download="circle.svg">下载 circle.svg</a>
      <span class="tag">download="circle.svg"</span>
    </div>
    <div class="note">点击链接直接下载文件，而不是在浏览器中打开</div>
  </div>

  <div class="demo-box">
    <div class="file-item">
      <a href="./img/pic.webp">普通链接（无 download）</a>
      <span class="tag">无 download</span>
    </div>
    <div class="note">对比：不加 download 会在浏览器中打开</div>
  </div>
</body>

</html>

示例4：href 属性的使用

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

<head>
  <meta charset="UTF-8">
  <title>href 属性的使用</title>
  <link rel="stylesheet" href="./css/style4.css">
</head>

<body>
  <h1>&lt;a&gt; 元素 href 属性使用示例</h1>

  <!-- 1. 浏览器支持的 URL 方案 -->
  <section class="demo-section" id="url-schemes">
    <h2>1. 浏览器支持的 URL 方案（Protocols）</h2>

    <h3>1.1 网页导航</h3>
    <div class="link-group">
      <a href="https://example.com" class="btn btn-web">HTTPS 链接（安全）</a>
      <a href="http://example.com" class="btn btn-web">HTTP 链接（普通）</a>
      <a href="//example.com" class="btn btn-web">协议相对 URL（自动匹配）</a>
    </div>

    <h3>1.2 电子邮件</h3>
    <div class="link-group">
      <a href="mailto:user@example.com" class="btn btn-email">
        发送邮件（基础）
      </a>
      <a href="mailto:help@example.com?subject=咨询问题&body=您好%2C%20我想咨询关于产品的问题。" class="btn btn-email">
        发送邮件（带主题和正文）
      </a>
      <a href="mailto:user1@example.com,user2@example.com?cc=boss@example.com&bcc=secret@example.com&subject=会议邀请&body=会议时间：本周五下午3点"
        class="btn btn-email">
        群发/抄送/密送
      </a>
    </div>

    <h3>1.3 电话与短信</h3>
    <div class="link-group">
      <a href="tel:+8613800138000" class="btn btn-tel">
        拨打电话：+86 138-0013-8000
      </a>
      <a href="tel:4008008888" class="btn btn-tel">
        客服热线：400-800-8888
      </a>
      <a href="sms:+8613800138000" class="btn btn-sms">
        发送短信
      </a>
      <a href="sms:+8613800138000?&body=你好，我想预约参观，请问明天方便吗？" class="btn btn-sms">
        发送预约短信
      </a>
    </div>

    <h3>1.4 即时通讯</h3>
    <div class="link-group">
      <a href="weixin://" class="btn btn-app">打开微信</a>
      <a href="alipays://" class="btn btn-app">打开支付宝</a>
      <a href="mqq://" class="btn btn-app">打开QQ</a>
      <a href="dingtalk://" class="btn btn-app">打开钉钉</a>
      <a href="weixin://scanqrcode" class="btn btn-app">微信扫一扫</a>
    </div>
  </section>

  <section class="demo-section" id="back-to-top">
    <h2>2. 返回顶部的三种写法</h2>

    <div class="method-box">
      <h3>方法一：使用 #（空片段）</h3>
      <p><strong>原理：</strong>仅写 <code>#</code> 表示空片段标识符，浏览器会滚动到页面顶部。</p>
      <p><strong>特点：</strong>URL 会显示为 <code>page.html#</code>，会添加历史记录，每次点击都会产生一个新历史条目。</p>
      <a href="#" class="btn btn-top">返回顶部（# 写法）</a>
    </div>

    <div class="method-box">
      <h3>方法二：使用 #top（显式片段 ID）</h3>
      <p><strong>原理：</strong><code>#top</code> 是常用约定，用于指向页面顶部的元素 ID（需在页面中添加 <code>id="top"</code> 的元素）。如果页面没有定义该
        ID，部分浏览器会滚动到顶部。</p>
      <p><strong>特点：</strong>URL 显示为 <code>page.html#top</code>，会添加历史记录，语义清晰。</p>
      <a href="#top" class="btn btn-top">返回顶部（#top 写法）</a>
    </div>

    <div class="method-box method-recommended">
      <h3>方法三：JavaScript 平滑滚动（推荐）</h3>
      <p><strong>原理：</strong>使用 <code>javascript:void(0)</code> 或按钮配合 JS 控制滚动，避免修改 URL 和增加历史记录。</p>
      <p><strong>特点：</strong>URL 不变，用户体验更好，支持平滑滚动动画。</p>
      <a href="javascript:void(0)" onclick="scrollToTop()" class="btn btn-top-recommended">
        返回顶部（JS 写法）
      </a>
      <button onclick="scrollToTop()" class="btn btn-top-recommended">返回顶部（Button 写法）</button>
    </div>
  </section>

  <script>
    // JS 平滑滚动函数
    function scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  </script>
</body>

</html>

示例5：定位资源中的特定部分

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

<head>
  <meta charset="UTF-8">
  <title>定位资源中的特定部分</title>
  <link rel="stylesheet" href="./css/style5.css">
</head>

<body>

  <h1>定位资源中的特定部分</h1>

  <!-- 1. 文档片段（Document Fragment） -->
  <section class="demo-section" id="fragments">
    <h2>1. 文档片段（Document Fragment）</h2>
    <p>通过元素 <code>id</code> 定位页面内的特定章节。</p>

    <article class="content-article">
      <h3 id="introduction">1.1 简介</h3>
      <p>这是文档的简介部分。文档片段是最常见的定位方式，通过 <code>#id</code> 直接跳转到指定元素。</p>
      <p>特点：浏览器会自动滚动到目标元素，并将其置于视口顶部（或尽可能靠近）。</p>

      <h3 id="installation">1.2 安装指南</h3>
      <p>这是安装指南部分。你可以通过以下命令安装：</p>
      <pre><code>npm install example-package</code></pre>

      <h3 id="configuration">1.3 配置说明</h3>
      <p>这是配置说明部分。在 <code>config.json</code> 中进行如下配置...</p>

      <h3 id="api-reference">1.4 API 参考</h3>
      <p>这是 API 参考部分。详细接口文档...</p>
    </article>

    <div class="link-group">
      <a href="#configuration" class="btn btn-anchor">跳转到配置说明</a>
      <a href="#api-reference" class="btn btn-anchor">跳转到 API 参考</a>
      <a href="https://zh.wikipedia.org/wiki/%E9%87%8F%E5%AD%90%E8%AE%A1%E7%AE%97%E6%9C%BA#%E7%A0%94%E7%A9%B6%E8%BF%9B%E5%B1%95"
        class="btn btn-external">
        外部链接：量子计算机-研究进展
      </a>
    </div>
  </section>

  <!-- 2. 文本片段（Text Fragment） -->
  <section class="demo-section" id="text-fragments">
    <h2>2. 文本片段（Text Fragment）</h2>
    <p>通过 <code>:~:text=</code> 语法高亮并滚动到页面中的特定文本内容，无需目标元素有 id。</p>
    <p class="note">⚠️ 需要 Chrome 80+、Edge 80+、Firefox 131+ 等现代浏览器支持</p>

    <article class="content-article long-content">
      <h3>长篇文档示例</h3>
      <p>Web 开发涉及多种技术栈，包括前端、后端和数据库等多个领域。</p>

      <p id="key-concept-para">
        关键概念：文本片段允许你直接链接到页面中的任意文本，即使该文本没有包裹在带有 id 的元素中。这对于引用长文章中的特定句子非常有用。
      </p>

      <p>前端技术主要包括 HTML、CSS 和 JavaScript，它们是构建用户界面的基础。</p>

      <p>
        注意事项：使用文本片段时，如果匹配的文本不存在，浏览器会正常加载页面但不会高亮任何内容。为了确保链接的稳定性，建议选择不易变化的文本。
      </p>

      <p>后端技术则涉及服务器、应用和数据库的交互，常见语言有 Node.js、Python、Java 等。</p>

      <p>
        安全提示：在处理用户输入时，务必进行验证和过滤，防止 XSS 攻击和 SQL 注入等安全漏洞。
      </p>

      <p>数据库技术用于持久化存储数据，关系型数据库如 MySQL、PostgreSQL，非关系型如 MongoDB、Redis。</p>
    </article>

    <div class="link-group">
      <h4>基础文本片段</h4>
      <a href="#:~:text=关键概念" class="btn btn-text">高亮"关键概念"</a>
      <a href="#:~:text=Web 开发涉及多种技术栈" class="btn btn-text">高亮整句</a>

      <h4>文本范围片段（起始,结束）</h4>
      <a href="#:~:text=注意事项,不易变化的文本" class="btn btn-text-range">
        高亮从"注意事项"到"变化的文本"的范围
      </a>
    </div>
  </section>

  <!-- 3. 媒体片段（Media Fragment） -->
  <section class="demo-section" id="media-fragments">
    <h2>3. 媒体片段（Media Fragment）</h2>
    <p>通过 <code>#t=</code> 或 <code>#xywh=</code> 等语法定位音视频的时间点或图片的区域。</p>

    <h3>3.1 视频时间片段</h3>
    <div class="media-container" id="video-demo">
      <video controls width="100%">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </div>

    <div class="link-group">
      <a href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=30"
        class="btn btn-media" target="_blank">
        从 30 秒处播放（新窗口）
      </a>
      <a href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=10,25"
        class="btn btn-media" target="_blank">
        仅播放 10-25 秒片段
      </a>
    </div>
  </section>
</body>

</html>
注意事项
  • 如果 href 属性不存在，必需省略此元素的所有特定属性。
  • 如果在 a 元素上指定了 itemprop 属性，则还必须同时指定 href 属性。
  • 在 <a> 元素上设置 target="_blank" 会隐式提供与设置 rel="noopener" 相同的行为，即不会设置 window.opener。

<em> 元素

描述

<em> 元素用于与周围文本相比具有加重语气的词语，这种强调通常限于句子中的一个或几个词，并会影响句子本身的含义。<em> 元素可以嵌套，嵌套的每一层都表示强调程度的增强。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：em 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>em 加重语气，会改变句子本身的含义</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <h1>&lt;em&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>改变句子含义的强调</h2>
    <p>我<em>喜欢</em>吃苹果。（强调"喜欢"而非讨厌）</p>
    <p>我喜欢<em>吃</em>苹果。（强调"吃"而非其他动作）</p>
    <p>我喜欢吃<em>苹果</em>。（强调"苹果"而非其他水果）</p>
  </section>

  <section class="demo-section">
    <h2>语气强调</h2>
    <p>"你真的完成了？"她<em>难以置信</em>地问道。</p>
    <p>这<em>绝不是</em>一个简单的任务。</p>
    <p>我们必须<em>立刻</em>采取行动！</p>
  </section>

  <section class="demo-section">
    <h2>嵌套使用（加重强调）</h2>
    <p>这<em>真的<em>非常重要</em></em>。</p>
  </section>
</body>

</html>

<strong> 元素

描述

<strong> 元素用于具有强烈重要性的内容，包括非常严肃或紧急的事项（例如警告）。这可以是整个页面中极其重要的句子，也可以仅仅是指出某些词语与附近内容相比具有更重要的意义。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：strong 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>strong 元素表示其内容具有强烈的重要性、严重性或紧迫性</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;strong&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>表示重要性</h2>
    <p><strong>注意：</strong>保存后将无法撤销此操作。</p>
    <p>申请截止日期为 <strong>2026年3月31日</strong>。</p>
  </section>

  <section class="demo-section">
    <h2>表示严重性</h2>
    <p><strong>警告：</strong>高压危险，请勿靠近。</p>
    <p>系统检测到 <strong>严重错误</strong>，请立即联系管理员。</p>
  </section>

  <section class="demo-section">
    <h2>表示紧急性</h2>
    <p>请 <strong>立即</strong> 撤离现场。</p>
    <p>会议将在 <strong>5分钟后</strong> 开始。</p>
  </section>

  <section class="demo-section">
    <h2>嵌套使用（加强重要性）</h2>
    <p><strong>至关重要：<strong>务必</strong> 在今日完成</strong>。</p>
  </section>
</body>

</html>

<small> 元素

描述

<small> 元素用于表示附注性内容或小号文字，例如版权声明、法律文本等，与其视觉样式无关。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：small 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>small 元素表示附注性内容或小号文字</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;small&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>版权声明</h2>
    <p>&copy; 2026 示例公司 <small>保留所有权利</small></p>
    <p>内容许可协议 <small>CC BY-NC-SA 4.0</small></p>
  </section>

  <section class="demo-section">
    <h2>法律声明</h2>
    <p>点击提交即表示您同意服务条款 <small>受当地法律法规约束</small></p>
    <p>利率 3.5% <small>以实际审批为准，最终解释权归银行所有</small></p>
  </section>

  <section class="demo-section">
    <h2>免责声明</h2>
    <p>投资有风险 <small>过往业绩不代表未来表现</small></p>
    <p>本页面数据仅供参考 <small>不构成任何投资建议</small></p>
  </section>

  <section class="demo-section">
    <h2>辅助说明</h2>
    <p>原价 &yen;999 <small>已含税</small></p>
    <p>免费试用 30 天 <small>无需绑定信用卡</small></p>
  </section>
</body>

</html>

<s> 元素

描述

<s> 元素表示不再准确或不再相关的内容。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：s 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>s 元素表示不再准确或不再相关的内容</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;s&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>不再准确的价格</h2>
    <p>原价：<s>&yen;999</s> 现价：&yen;599</p>
    <p>会员价：<s>&yen;199</s> 促销价：&yen;99</p>
  </section>

  <section class="demo-section">
    <h2>已售罄的商品</h2>
    <p><s>红色款 - 暂时缺货</s></p>
    <p><s>32GB 版本 - 已停产</s></p>
  </section>

  <section class="demo-section">
    <h2>过时的信息</h2>
    <p>会议时间：<s>3月20日 上午9点</s> 已更改为 3月21日 下午2点</p>
    <p>负责人：<s>张三</s> 现由李四接任</p>
  </section>

  <section class="demo-section">
    <h2>不再适用的条款</h2>
    <p><s>免费配送仅限北京地区</s> 现已扩展至全国</p>
    <p><s>试用期7天</s> 现调整为30天</p>
  </section>
</body>

</html>

<cite> 元素

描述

<cite> 元素表示作品的标题，例如：书籍、论文、电影、电视剧、法律案例报告、计算机程序等。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：cite 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>cite 元素表示作品的标题</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;cite&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>引用书籍</h2>
    <p>正如 <cite>百年孤独</cite> 中所写，"多年以后，面对行刑队，奥雷里亚诺·布恩迪亚上校将会回想起父亲带他去见识冰块的那个遥远的下午。"</p>
  </section>

  <section class="demo-section">
    <h2>引用文章</h2>
    <p>该研究发表于 <cite>自然</cite> 杂志2025年第12期。</p>
  </section>

  <section class="demo-section">
    <h2>引用电影</h2>
    <p><cite>肖申克的救赎</cite> 被誉为影史经典之作。</p>
  </section>

  <section class="demo-section">
    <h2>引用音乐作品</h2>
    <p>贝多芬的 <cite>第九交响曲</cite> 是古典音乐的巅峰之作。</p>
  </section>

  <section class="demo-section">
    <h2>引用法律文件</h2>
    <p>依据 <cite>中华人民共和国民法典</cite> 第一千零三十四条规定...</p>
  </section>

  <section class="demo-section">
    <h2>引用网页或标准</h2>
    <p>详见 <cite>HTML Living Standard</cite> 规范中的相关定义。</p>
  </section>
</body>

</html>
注意事项
  • <cite> 不能用于标记人物姓名。

<q> 元素

描述

<q> 元素表示从其他来源引用的一些短语内容。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

属性
  • cite：此属性的值是一个 URL，指向所引用信息的源文档或消息。
使用示例

示例1：q 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>q 元素表示短引用</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>正确使用 q 元素</h1>

  <p>
    万维网联盟（W3C）的使命是让
    <q cite="https://www.w3.org/Consortium/mission">
      互联网充分发挥其潜力，并通过对可访问、国际化、安全的网络标准进行指导来引领网络走向更美好的未来
    </q>。
    这一愿景推动了整个互联网行业的发展。
  </p>

  <p>
    正如 Albert Einstein 所说：
    <q>想象力比知识更重要。因为知识是有限的，而想象力概括世界上的一切，推动着进步，并且是知识进化的源泉。</q>
  </p>
</body>

</html>

<dfn> 元素

描述

<dfn> 元素表示术语的定义实例。该元素最近的祖先段落、描述列表组或章节中，必须同时包含由 <dfn> 元素所给出术语的定义。

术语的确定方式：

  • 若 <dfn> 元素带有 title 属性，则该属性的精确值即为被定义的术语；
  • 否则，若该元素仅包含一个子元素节点且没有子文本节点，且该子元素为带有 title 属性的 <abbr> 元素，则该 title 属性的精确值为被定义的术语；
  • 否则，由 <dfn> 元素的后代文本内容给出被定义的术语。
技术摘要

  • 类别：

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

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

  • 内容模型 ：短语内容，但不得包含任何后代 <dfn> 元素。

属性
  • title：完整的术语或缩写的展开形式。
    • 其内容必须仅为被定义的术语本身。
使用示例

示例1：dfn 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dfn 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1>&lt;dfn&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>基础用法：元素内容即术语</h2>
    <p>
      <dfn>万维网</dfn> 是一个由许多互相链接的超文本组成的系统，通过互联网访问。
    </p>
  </section>

  <section class="demo-section">
    <h2>使用 title 属性定义确切术语</h2>
    <p>
      <dfn title="HyperText Markup Language">HTML</dfn> 是用于构建网页的标准标记语言。
    </p>
    <p class="note">当元素内容与确切术语不同时，通过 title 属性指定。</p>
  </section>

  <section class="demo-section">
    <h2>配合 id 供全局引用</h2>
    <p>
      <dfn id="css-definition">CSS</dfn> 是一种样式表语言，用于描述 HTML 文档的呈现。
    </p>
    <p>后续引用：<a href="#css-definition">CSS</a> 支持响应式设计。</p>
  </section>

  <section class="demo-section">
    <h2>在定义列表中使用</h2>
    <dl>
      <dt><dfn>HTTP</dfn></dt>
      <dd>超文本传输协议，用于在 Web 上传输数据。</dd>
      
      <dt><dfn>URL</dfn></dt>
      <dd>统一资源定位符，标识互联网上资源的位置。</dd>
    </dl>
  </section>

  <section class="demo-section">
    <h2>缩写词定义：dfn 嵌套 abbr</h2>
    <p>
      <dfn><abbr title="Application Programming Interface">API</abbr></dfn>
      是一组定义了软件组件之间交互方式的规范。
    </p>
  </section>
</body>
</html>

<abbr> 元素

描述

<abbr> 元素用于表示一个缩写或首字母缩略词，可以选择性地给出其完整形式。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

属性
  • title：完整的术语或缩写的展开形式。
使用示例

示例1：无障碍图标标签

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

<head>
  <meta charset="UTF-8">
  <title>无障碍图标标签</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>无障碍图标标签呈现</h1>

  <section class="demo-section">
    <h2>状态标签（纯图标 + 隐藏文本）</h2>

    <p class="tag-item">
      <abbr class="status-icon deprecated" title="已废弃。不应在新项目中使用，请使用 CSS 替代。">
        <span class="visually-hidden">已废弃</span>
      </abbr>
      <code>&lt;big&gt;</code>
    </p>

    <p class="tag-item">
      <abbr class="status-icon experimental" title="实验性特性。API 可能随时变化，不建议用于生产环境。">
        <span class="visually-hidden">实验性</span>
      </abbr>
      <code>&lt;dialog&gt;</code>
    </p>

    <p class="tag-item">
      <abbr class="status-icon nonstandard" title="非标准特性。仅部分浏览器支持，不推荐广泛使用。">
        <span class="visually-hidden">非标准</span>
      </abbr>
      <code>&lt;blink&gt;</code>
    </p>

    <p class="tag-item">
      <abbr class="status-icon standard" title="标准特性。广泛支持，可放心使用。">
        <span class="visually-hidden">标准</span>
      </abbr>
      <code>&lt;article&gt;</code>
    </p>
  </section>

  <section class="demo-section">
    <h2>操作按钮（图标 + 工具提示）</h2>

    <button class="action-btn danger-action">
      <abbr class="icon icon-delete" title="危险操作">
        <span class="visually-hidden">删除</span>
      </abbr>
      <span class="tooltip">此操作不可撤销。删除后数据将永久丢失，无法恢复。</span>
    </button>

    <button class="action-btn warning-action">
      <abbr class="icon icon-warning" title="警告">
        <span class="visually-hidden">警告</span>
      </abbr>
      <span class="tooltip">检测到潜在风险，请确认后再继续操作。</span>
    </button>
  </section>

  <section class="demo-section">
    <h2>行内术语（图标 + 术语）</h2>
    <p>
      该技术目前处于
      <abbr class="inline-badge experimental" title="实验性阶段。规范尚未稳定。">
        <span class="visually-hidden">实验性</span>
      </abbr>
      阶段，预计明年成为
      <abbr class="inline-badge standard" title="候选推荐标准。">
        <span class="visually-hidden">标准</span>
      </abbr>
      。
    </p>
  </section>
</body>

</html>

<data> 元素

描述

<data> 元素用于表示其内容，并通过 value 属性提供该内容的机器可读形式。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

属性
  • value：必选，指定元素内容的机器可读翻译。
使用示例

示例1：data 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>data 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;data&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>产品价格（机器可读格式）</h2>
    <p>
      当前价格：
      <data value="299.00">&yen;299.00</data>
    </p>
    <p>
      原价：
      <data value="599.00">&yen;599.00</data>
    </p>
  </section>

  <section class="demo-section">
    <h2>库存数量</h2>
    <p>
      库存：
      <data value="42">42 件</data>
      （编号：<data value="SKU-2026-0015">SKU-2026-0015</data>）
    </p>
  </section>

  <section class="demo-section">
    <h2>评分数据（机器可读 + 人类可读）</h2>
    <p>
      用户评分：
      <data value="4.5">★★★★☆ 4.5 分</data>
      （<data value="128">128 条评价</data>）
    </p>
    <p>
      综合得分：
      <data value="87">87 / 100</data>
    </p>
  </section>

  <section class="demo-section">
    <h2>度量数据</h2>
    <p>
      重量：
      <data value="1.25">1.25 千克</data>
    </p>
    <p>
      尺寸：
      <data value="1920">1920</data> ×
      <data value="1080">1080</data> 像素
    </p>
  </section>

  <section class="demo-section">
    <h2>枚举值（隐藏实际值）</h2>
    <p>
      状态：
      <data value="in-stock">有货</data>
    </p>
    <p>
      优先级：
      <data value="3">高</data>
    </p>
  </section>
</body>

</html>

<time> 元素

描述

<time> 元素表示其内容，以及这些内容在 datetime 属性中的机器可读形式。内容的类型限于以下几种：各种日期、时间、时区偏移量和持续时间。

技术摘要

  • 类别：

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

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

  • 内容模型：

    • 如果该元素具有 datetime 属性：短语内容
    • 否则：文本（必须符合要求）。
属性
  • datetime：指示元素所表示的时间和 / 或日期。有效的 datetime 值：

    • 有效的月份字符串：YYYY-MM 2026-01

    • 有效的日期字符串：YYYY-MM-DD 2026-01-31

    • 有效的不带年份的日期字符串：MM-DD 12-31

    • 有效的时间字符串：HH:MM、HH:MM:SS、HH:MM:SS.mmm 23:59, 12:30:20, 12:15:52.998

    • 有效的本地日期和时间字符串

      • YYYY-MM-DD HH:MM：2025-01-01 09:00
      • YYYY-MM-DD HH:MM:SS：2025-01-01 13:30:02
      • YYYY-MM-DD HH:MM:SS.mmm：2025-01-01 13:00:00.480
      • YYYY-MM-DDTHH:MM：2025-01-01T10:30（T 用来明确分隔日期部分和时间部分。）
      • YYYY-MM-DDTHH:MM:SS：2025-01-01T13:30:00
      • YYYY-MM-DDTHH:MM:SS.mmm：2025-01-01T13:00:00.678

    • 有效的周字符串：YYYY-WWW 2025-W46（2025 年的第 46 个 ISO 周）

    • 持续时间字符串：PThHmMsS PT2H30M15S：2 小时 30 分 15 秒

使用示例

示例1：time 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>time 元素标准使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;time&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>日期（Date）</h2>
    <p>
      发布日期：
      <time datetime="2026-03-19">2026年3月19日</time>
    </p>
    <p>
      截止日期：
      <time datetime="2026-12-31">2026年12月31日</time>
    </p>
  </section>

  <section class="demo-section">
    <h2>日期时间（DateTime with Time）</h2>
    <p>
      会议时间：
      <time datetime="2026-03-19T14:30">2026年3月19日 14:30</time>
    </p>
    <p>
      活动时间：
      <time datetime="2026-03-19T14:30:00">2026年3月19日 14:30:00</time>
    </p>
    <p>
      带时区：
      <time datetime="2026-03-19T14:30:00+08:00">2026年3月19日 14:30（北京时间）</time>
    </p>
  </section>

  <section class="demo-section">
    <h2>周（Year-Week）</h2>
    <p>
      第12周：
      <time datetime="2026-W12">2026年第12周</time>
    </p>
  </section>

  <section class="demo-section">
    <h2>时间（Time only）</h2>
    <p>
      营业时间：
      <time datetime="09:00">上午9:00</time> -
      <time datetime="18:00">下午6:00</time>
    </p>
    <p>
      持续时间：
      <time datetime="PT2H30M">2小时30分钟</time>
    </p>
  </section>

  <section class="demo-section">
    <h2>持续时间（Duration）</h2>
    <p>
      视频时长：
      <time datetime="PT1H23M45S">1小时23分45秒</time>
    </p>
  </section>
</body>

</html>

<code> 元素

描述

<code> 元素用于表示一段计算机代码片段。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：code 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>code 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;code&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>行内代码片段</h2>
    <p>
      使用 <code>console.log()</code> 方法在控制台输出信息。
    </p>
    <p>
      在 CSS 中，<code>display: flex</code> 用于启用弹性布局。
    </p>
    <p>
      通过 <code>git commit -m "message"</code> 提交代码更改。
    </p>
  </section>

  <section class="demo-section">
    <h2>HTML 标签名</h2>
    <p>
      <code>&lt;div&gt;</code> 是一个通用的块级容器元素。
    </p>
    <p>
      使用 <code>&lt;img&gt;</code> 元素在网页中嵌入图像。
    </p>
  </section>

  <section class="demo-section">
    <h2>文件路径与文件名</h2>
    <p>
      配置文件位于 <code>/etc/nginx/nginx.conf</code>。
    </p>
    <p>
      入口文件是 <code>src/index.js</code>。
    </p>
  </section>

  <section class="demo-section">
    <h2>键盘输入（配合 kbd）</h2>
    <p>
      按 <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> 复制选中的内容。
    </p>
    <p>
      在终端中输入 <code>npm install</code> 后按 <kbd>Enter</kbd> 执行。
    </p>
  </section>

  <section class="demo-section">
    <h2>代码块（配合 pre）</h2>
    <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));</code></pre>
  </section>

  <section class="demo-section">
    <h2>变量名（配合 var）</h2>
    <p>
      计算圆的面积公式为 <code>π * <var>r</var><sup>2</sup></code>，其中 <var>r</var> 表示半径。
    </p>
  </section>

  <section class="demo-section">
    <h2>程序输出（配合 samp）</h2>
    <p>
      运行程序后显示：
      <samp><code>Error: File not found</code></samp>
    </p>
  </section>
</body>

</html>

<var> 元素

描述

<var> 元素表示一个变量。这个变量可以是数学表达式或编程上下文中的实际变量，也可以是表示常量的标识符、表示物理量的符号、函数参数，或者只是作为文本中的占位术语使用。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：var 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>var 元素标准使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1>&lt;var&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>数学公式中的变量</h2>
    <p>
      圆的面积公式：<code>S = π<var>r</var><sup>2</sup></code>，其中 <var>r</var> 表示半径。
    </p>
    <p>
      勾股定理：<code><var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></code>
    </p>
    <p>
      一元二次方程求根公式：
      <code><var>x</var> = (-<var>b</var> ± √(<var>b</var><sup>2</sup> - 4<var>a</var><var>c</var>)) / 2<var>a</var></code>
    </p>
  </section>

  <section class="demo-section">
    <h2>物理公式中的变量</h2>
    <p>
      速度公式：<code><var>v</var> = <var>s</var> / <var>t</var></code>，
      <var>v</var> 表示速度，<var>s</var> 表示路程，<var>t</var> 表示时间。
    </p>
    <p>
      牛顿第二定律：<code><var>F</var> = <var>m</var><var>a</var></code>
    </p>
  </section>

  <section class="demo-section">
    <h2>编程中的变量</h2>
    <p>
      声明变量：<code>let <var>userName</var> = 'Alice';</code>
    </p>
    <p>
      函数参数：<code>function greet(<var>name</var>, <var>age</var>) { ... }</code>
    </p>
    <p>
      循环变量：<code>for (let <var>i</var> = 0; <var>i</var> &lt; 10; <var>i</var>++) { ... }</code>
    </p>
  </section>

  <section class="demo-section">
    <h2>算法描述中的占位符</h2>
    <p>
      交换两个变量的值：将 <var>a</var> 的值赋给临时变量 <var>temp</var>，
      再将 <var>b</var> 的值赋给 <var>a</var>，最后将 <var>temp</var> 的值赋给 <var>b</var>。
    </p>
  </section>
</body>
</html>

<samp> 元素

描述

<samp> 元素表示来自其他程序或计算系统的示例输出或引用输出。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：samp 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>samp 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1>&lt;samp&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>程序输出信息</h2>
    <p>
      编译成功后显示：
      <samp>Build completed successfully in 2.34s</samp>
    </p>
    <p>
      服务器响应：
      <samp>Server running at http://localhost:3000</samp>
    </p>
  </section>

  <section class="demo-section">
    <h2>错误与警告信息</h2>
    <p>
      当文件不存在时，系统返回：
      <samp>Error: ENOENT: no such file or directory, open 'config.json'</samp>
    </p>
    <p>
      内存不足警告：
      <samp>Warning: Heap memory limit approaching threshold</samp>
    </p>
  </section>

  <section class="demo-section">
    <h2>命令行交互输出</h2>
    <p>
      执行 <code>npm list</code> 后显示：
    </p>
    <pre><samp>project@1.0.0 /home/user/project
├── express@4.18.2
├── lodash@4.17.21
└── react@18.2.0</samp></pre>
  </section>

  <section class="demo-section">
    <h2>状态与反馈信息</h2>
    <p>
      提交成功：
      <samp>[main 3f4a2b1] fix: resolve memory leak issue</samp>
    </p>
    <p>
      测试通过：
      <samp>✓ 42 tests passed (234ms)</samp>
    </p>
  </section>

  <section class="demo-section">
    <h2>配合其他元素</h2>
    <p>
      用户输入 <kbd>help</kbd> 后，程序输出：
      <samp>Available commands: start, build, test, deploy</samp>
    </p>
    <p>
      计算结果存储在变量 <var>result</var> 中，最终输出：
      <samp><code>42</code></samp>
    </p>
  </section>
</body>
</html>

<kbd> 元素

描述

<kbd> 元素表示用户输入（通常是键盘输入，但也可用于表示其他形式的输入，例如语音命令）。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：kbd 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>kbd 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <h1>&lt;kbd&gt; 元素使用示例</h1>
  <section class="demo-section">
    <h2>单个按键</h2>
    <p>
      按 <kbd>Esc</kbd> 键取消操作。
    </p>
    <p>
      按 <kbd>Enter</kbd> 确认提交。
    </p>
  </section>

  <section class="demo-section">
    <h2>组合快捷键（嵌套 kbd）</h2>
    <p>
      复制：<kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>
    </p>
    <p>
      粘贴：<kbd><kbd>Ctrl</kbd> + <kbd>V</kbd></kbd>
    </p>
  </section>

  <section class="demo-section">
    <h2>命令行输入</h2>
    <p>
      在终端中输入 <kbd>npm install</kbd> 安装依赖。
    </p>
    <p>
      输入 <kbd>git status</kbd> 查看仓库状态。
    </p>
  </section>

  <section class="demo-section">
    <h2>配合其他元素</h2>
    <p>
      按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制，程序输出 <samp>Copied to clipboard</samp>。
    </p>
  </section>
</body>

</html>

<sub> 元素和 <sup>

描述

<sup> 元素表示上标，<sub> 元素表示下标。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：sup 和 sub 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>sub 和 sup 元素角标效果</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>sub 和 sup 元素角标效果</h1>

  <section class="demo-section">
    <h2>上标角标（sup）</h2>
    <p class="feature-item">
      实时协作<sup class="badge new">NEW</sup>
    </p>
    <p class="feature-item">
      AI 自动补全<sup class="badge beta">BETA</sup>
    </p>
    <p class="feature-item">
      云端同步<sup class="badge hot">HOT</sup>
    </p>
  </section>

  <section class="demo-section">
    <h2>下标角标（sub）</h2>
    <p class="feature-item">
      专业版<sub class="badge pro">PRO</sub>
    </p>
    <p class="feature-item">
      企业版<sub class="badge enterprise">ENT</sub>
    </p>
  </section>

  <section class="demo-section">
    <h2>数学公式中的使用</h2>
    <p>
      化学方程式：H<sub>2</sub>O 是水，CO<sub>2</sub> 是二氧化碳。
    </p>
    <p>
      数学公式：E = mc<sup>2</sup>，a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>。
    </p>
  </section>
</body>

</html>

<i> 元素

描述

<i> 元素表示一段处于另一种语气或情绪的文本，或者以某种方式从普通散文中偏移出来，表明文本具有不同的性质，例如分类名称、技术术语、其他语言的惯用短语、音译、想法，或西方文本中的船只名称。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：i 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>i 元素的使用</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <article>
    <h2>科幻小说《沙丘》中的生态隐喻</h2>

    <p>
      当保罗凝视着厄拉科斯的双月时，他低声念出了贝尼·杰瑟里特的箴言：
      <i>恐惧是思维杀手</i>。
      这让他想起了母亲曾教他的古地球语言
      <i lang="zh-Latn-wadegile">kung fu</i>，
      以及姐妹会那些神秘的仪式
      <i lang="la">litany against fear</i>。
    </p>

    <p>
      在弗雷曼人的洞穴中，他听到了关于
      <i>造物主</i>
      的传说------这个术语在当地方言中指的是巨大的沙虫。
      生态学家凯恩斯博士的笔记中提到，这种生物属于
      <i>节肢动物门</i>，
      尽管其体型远超任何已知的地球物种。
    </p>

    <p>
      保罗在日记中写道：
      <i>他们称我为李桑·阿尔-盖布，但我只是保罗。</i>
      这种身份的张力贯穿了整个叙事。
    </p>
  </article>
</body>

</html>

<b> 元素

描述

<b> 元素表示一段出于实用目的而需要引起注意的文本，但并不传达额外的重要性，也不暗示不同的语气或情绪。例如：文档摘要中的关键词、评测中的产品名称、以文本驱动的交互式软件中的可操作词语，或文章的导语。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：b 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>b 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <h1>&lt;b&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>关键词（文档摘要）</h2>
    <p>
      <b>HTML</b> 是构建网页的标准标记语言，
      <b>CSS</b> 用于控制样式，
      <b>JavaScript</b> 用于实现交互功能。
    </p>
  </section>

  <section class="demo-section">
    <h2>产品名称（评论）</h2>
    <p>
      我对 <b>Pixel 8 Pro</b> 的相机表现印象深刻，
      但 <b>iPhone 15 Pro</b> 的视频拍摄更稳定。
    </p>
  </section>

  <section class="demo-section">
    <h2>文章导语/ lead 句子</h2>
    <p>
      <b>2026年3月20日，全球首个量子计算云平台正式上线。</b>
      这一突破标志着量子技术从实验室走向商业化应用的关键一步。
    </p>
  </section>

  <section class="demo-section">
    <h2>用户界面元素</h2>
    <p>
      点击 <b>文件</b> 菜单，选择 <b>另存为</b> 保存文档。
    </p>
    <p>
      在 <b>设置</b> 页面中找到 <b>隐私与安全</b> 选项。
    </p>
  </section>

  <section class="demo-section">
    <h2>人物姓名（传记/访谈）</h2>
    <p>
      <b>张三</b> 出生于1990年，现任某科技公司首席架构师。
      <b>李四</b> 评价道："他是团队中最有远见的工程师。"
    </p>
  </section>
</body>

</html>

<u> 元素

描述

<u> 元素表示一段带有未明确表述但被显式渲染的非文本注释的文本。例如，用于在中文文本中标注专有名词，或标示拼写错误的文本。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：u 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>u 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;u&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>拼写错误提示</h2>
    <p>
      请检查您的输入：<u>recieve</u> 应为 <u>receive</u>。
    </p>
    <p>
      常见错误：<u>seperate</u> → separate
    </p>
  </section>

  <section class="demo-section">
    <h2>中文专有名词标注</h2>
    <p>
      <u>北京</u>是中华人民共和国的首都。
    </p>
    <p>
      <u>长江</u>是亚洲第一长河。
    </p>
  </section>
</body>

</html>

<mark> 元素

描述

<mark> 元素表示在文档中因其在其他上下文中的相关性，而被标记或高亮的一段文本。

技术摘要

  • 类别：

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

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

  • 内容模型：短语内容。

使用示例

示例1：mark 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>mark 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <h1>&lt;mark&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>搜索结果高亮</h2>
    <p>
      关于 <mark>HTML</mark> 的搜索结果：
      "<mark>HTML</mark>（超文本标记语言）是构建 Web 的标准语言。
      学习 <mark>HTML</mark> 是前端开发的第一步。"
    </p>
  </section>

  <section class="demo-section">
    <h2>引用内容中的重点标记</h2>
    <blockquote>
      "我们必须接受失望，因为它是有限的；但千万不可失去希望，因为它是<mark>无穷的</mark>。"
    </blockquote>
  </section>

  <section class="demo-section">
    <h2>文档审阅中的注意点</h2>
    <p>
      请特别关注<mark>第三章的预算数据</mark>，需要进一步核实。
    </p>
  </section>

  <section class="demo-section">
    <h2>代码审查中的标记</h2>
    <pre><code>function calculate(<mark>total</mark>, count) {
  return <mark>total</mark> / count;
}</code></pre>
  </section>

</body>

</html>

<span> 元素

描述

<span> 元素本身不具有任何语义含义，但在与全局属性（例如 class、lang 或 dir）一起使用时非常有用。它仅用于表示其子内容本身。

技术摘要

  • 类别：

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

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

  • 内容模型：

    • 如果该元素是 <option> 元素的后代：可以包含零个或多个 <option> 元素的内部内容元素，但不包括 <div> 元素。
    • 否则：短语内容。
使用示例

示例1：span 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>span 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;span&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>行内文本样式控制</h2>
    <p>
      本商品<span class="price">限时特价 ¥99</span>，原价 <span class="original-price">¥299</span>。
    </p>
  </section>

  <section class="demo-section">
    <h2>语言混合标注</h2>
    <p>
      欢迎使用 <span lang="en">Google Chrome</span> 浏览器。
    </p>
  </section>
</body>

</html>

<br> 元素

描述

<br> 元素表示一个换行符。

技术摘要

  • 类别：

    • 流内容。
    • 短语内容。

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

  • 内容模型：不可包含任何内容。

使用示例

示例1：br 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>br 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1>&lt;br&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>诗歌换行</h2>
    <p class="poem">
      床前明月光，<br>
      疑是地上霜。<br>
      举头望明月，<br>
      低头思故乡。
    </p>
  </section>

  <section class="demo-section">
    <h2>地址换行</h2>
    <p class="address">
      北京市海淀区<br>
      中关村大街1号<br>
      100080
    </p>
  </section>

  <section class="demo-section">
    <h2>表单标签换行</h2>
    <label>
      用户名<br>
      <input type="text" placeholder="请输入用户名">
    </label>
  </section>
</body>
</html>

<wbr> 元素

描述

<wbr> 元素表示一个可选的换行位置。

技术摘要

  • 类别：

    • 流内容。
    • 短语内容。

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

  • 内容模型：不可包含任何内容。

使用示例

示例1：wbr 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>wbr 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;wbr&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>长单词换行机会</h2>
    <p class="long-word">
      超长单词：<wbr> pneumo<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis
    </p>
  </section>

  <section class="demo-section">
    <h2>URL 换行</h2>
    <p class="url">
      https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource.html
    </p>
  </section>

  <section class="demo-section">
    <h2>长数字换行</h2>
    <p class="long-number">
      订单号：<wbr>2026<wbr>0319<wbr>1530<wbr>4287<wbr>5612
    </p>
  </section>

  <section class="demo-section">
    <h2>代码中的长类名</h2>
    <p class="code">
      class="<wbr>VeryLongClassName<wbr>ThatNeeds<wbr>ToBreak<wbr>Properly"
    </p>
  </section>
</body>

</html>

变更标记

<ins> 元素

描述

<ins> 元素表示对文档所做的新增内容。

技术摘要

  • 类别：

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

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

  • 内容模型：透明。

属性
  • cite：定义一个解释变更的资源的 URI，例如指向会议记录的链接或故障处理系统中的工单。
  • datetime：指示变更的日期和时间，其值必须是一个有效的日期字符串（可选地包含时间）。
使用示例

示例1：ins 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>ins 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;ins&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>文档修订：新增内容</h2>
    <p>
      会议时间：3月20日 上午9点<br>
      会议地点：<ins>第三会议室</ins>
    </p>
  </section>

  <section class="demo-section">
    <h2>价格调整</h2>
    <p>
      会员费用：<ins>299元/年</ins>（原价599元）
    </p>
  </section>

  <section class="demo-section">
    <h2>条款增补</h2>
    <p>
      服务协议第3条后新增：<ins>用户数据将在服务器保留30天后自动删除。</ins>
    </p>
  </section>

  <section class="demo-section">
    <h2>配合 cite 和 datetime 属性</h2>
    <p>
      更新日志：<ins cite="https://example.com/changelog" datetime="2026-03-19">新增暗黑模式支持</ins>
    </p>
  </section>

  <section class="demo-section">
    <h2>与 del 配合使用</h2>
    <p>
      本周任务：<del>完成原型设计</del> <ins>完成UI设计稿</ins>
    </p>
  </section>
</body>

</html>

<del> 元素

描述

<del> 元素表示从文档中移除的内容。

技术摘要

  • 类别：

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

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

  • 内容模型：透明。

属性
  • cite：定义一个解释变更的资源的 URI，例如指向会议记录的链接或故障处理系统中的工单。
  • datetime：指示变更的日期和时间，其值必须是一个有效的日期字符串（可选地包含时间）。
使用示例

示例1：del 元素的使用

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

<head>
  <meta charset="UTF-8">
  <title>del 元素使用示例</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <h1>&lt;del&gt; 元素使用示例</h1>

  <section class="demo-section">
    <h2>文档修订：删除内容</h2>
    <p>
      会议时间：<del>3月19日 下午2点</del> 3月20日 上午9点
    </p>
  </section>

  <section class="demo-section">
    <h2>价格变动</h2>
    <p>
      会员费用：<del>599元/年</del> 299元/年
    </p>
  </section>

  <section class="demo-section">
    <h2>条款删除</h2>
    <p>
      服务协议：<del>用户需年满16周岁方可注册。</del>（已删除）
    </p>
  </section>

  <section class="demo-section">
    <h2>配合 cite 和 datetime 属性</h2>
    <p>
      更新日志：<del cite="https://example.com/changelog" datetime="2026-03-19T09:00:00+08:00">旧版支付方式：仅支持支付宝</del>
    </p>
  </section>

  <section class="demo-section">
    <h2>与 ins 配合使用</h2>
    <p>
      本周任务：<del>完成原型设计</del> <ins>完成UI设计稿</ins>
    </p>
    <p>
      负责人：<del>张三</del> <ins>李四</ins>
    </p>
  </section>
</body>

</html>
相关推荐
冰暮流星2 小时前
javascript之dom方法访问内容
开发语言·前端·javascript
有意义2 小时前
滴滴一面复盘：从CSS布局到TS核心思想
前端·面试
竹林8182 小时前
React + wagmi 实战：从零构建一个能“读”能“写”的 DeFi 前端，我踩了这些坑
前端·javascript
我命由我123452 小时前
在 React 项目中，配置了 setupProxy.js 文件，无法正常访问 http://localhost:3000
开发语言·前端·javascript·react.js·前端框架·ecmascript·js
俺不会敲代码啊啊啊2 小时前
封装 ECharts Hook 适配多种图表容器
前端·vue.js·typescript·echarts
J2虾虾2 小时前
在Vue3中推荐使用的函数定义方法
前端·javascript·vue.js
3秒一个大2 小时前
Cookie/Session vs JWT 双 Token：登录认证方案的演进与对比
前端·安全·ajax
努力的lpp2 小时前
【小迪安全41天】WEB攻防-ASP应用&HTTP.SYS&短文件&文件解析&Access注入&数据库泄漏
前端·安全·http
yellowbuff2 小时前
巧用IntersectionObserver 与 Suspense，实现真正的视口内懒加载（vue3）
前端
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南04Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Claude Code 未登录 使用第三方模型07Oh My Codex 快速使用指南08UV安装并设置国内源09【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线10最新更新版本，OpenClaw v2026.4.2 深度解读剖析：Task Flow 重磅回归与安全架构的全面硬化