行内文本语义全谱

基于 HTML Living Standard · 核于 2026-06

速查

• 代码四件套：<code> 代码片段、<kbd> 键盘 / 用户输入、<samp> 程序输出、<var> 变量名——别互相混用
• <mark>：因「与用户当前相关」而高亮（搜索命中、引文中标重点）；区别于「只是醒目」的 <b>
• 引用三元素：<q> 行内引语（浏览器自动加引号，别手敲）、<cite> 作品标题（不能标人名）、<blockquote> 块级引用
• <abbr title="…">：缩写 / 首字母缩略词；title 存全称，但屏幕阅读器默认不读 title，首次出现建议正文写全
• <time datetime="…">：日期 / 时间，datetime 给机器（ISO 格式），文字给人；不带 datetime 时文字本身须是合法格式
• <data value="…">：把人类可读文字关联到机器可读值（如商品 SKU、非时间类编码）
• <sub> / <sup>：下标 / 上标（化学式如水的分子式、脚注、次方），不是用来缩放字号的
• <small>：小字附注（版权、免责声明、署名），别用于大段文字
• <s>：内容不再准确 / 不再相关（非「编辑删除」——那是 <del>，见国际化页）
• <span>：无任何语义的兜底行内容器，仅用于挂样式 / 钩子

一、代码相关：code · kbd · samp · var

这四个元素常被无脑全写成 <code>，但它们语义完全不同，对应「代码 / 输入 / 输出 / 变量」四种角色。

<code>：一段计算机代码

<p>用 <code>Array.prototype.map()</code> 遍历并转换数组。</p>
<p>把环境变量 <code>NODE_ENV</code> 设为 <code>production</code>。</p>

<code> 表示「一段计算机代码片段」，默认等宽字体。它本身只标记行内代码；多行代码块要把 <code> 放进 <pre> 里以保留空白与换行（详见 wbr/br 与空白折叠 对 <pre> 的说明）：

<pre><code class="language-js">function add(a, b) {
  return a + b;
}</code></pre>

规范建议用 class="language-*" 标注语言，供语法高亮工具识别。

<kbd>：键盘 / 用户输入

<kbd> 表示「用户输入」——通常是键盘按键，也可以是语音命令等。它可以嵌套来表达组合键或按键序列：

<p>按 <kbd>Enter</kbd> 提交。</p>
<!-- 组合键：外层 kbd 包整组，内层 kbd 包单个键 -->
<p>保存：<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd></p>

<samp>：程序的示例输出

<samp> 表示「程序或系统的示例输出」——和 <kbd>（用户输入）正好是一对：

<p>运行后终端会打印 <samp>installed my-cli@2.0.0</samp>。</p>
<p>若文件不存在，会报 <samp>Error: ENOENT</samp>。</p>

<var>：变量名

<var> 表示数学表达式或程序里的变量名 / 占位符：

<p>面积公式：<var>S</var> = <var>π</var><var>r</var><sup>2</sup>。</p>
<p>函数签名为 <code>login(<var>username</var>, <var>password</var>)</code>。</p>

元素	角色	例子
<code>	代码片段	Array.map()
<kbd>	用户输入的键	Ctrl + S
<samp>	程序输出	Error 404
<var>	变量 / 占位符	x、username

二、<mark>：相关性高亮

<mark> 表示「因与用户当前活动相关而被标记 / 高亮」的文字——最典型是搜索结果里命中的关键词，或在引用别人文字时高亮你想让读者注意的部分：

<!-- 搜索「viewport」后高亮命中词 -->
<p>这份文档讲了 <mark>viewport</mark> 的全部取值。</p>

<!-- 在引文里标出自己关注的重点（高亮非原文所有） -->
<blockquote>
  <p>性能优化的第一原则是 <mark>先测量再优化</mark>。</p>
</blockquote>

它和 <b> 的区别：<mark> 强调「与读者当下相关」（动态、上下文相关），<b> 只是「实用性地引人注意」（静态、与读者活动无关）。

三、引用：q · cite · blockquote

<q>：行内引语（自动加引号）

<q> 表示「引自其他来源的行内短语」。关键铁律：不要自己敲引号——浏览器会根据 lang 自动插入符合该语言习惯的引号：

<p>他说：<q>代码即文档。</q></p>
<!-- 中文环境渲染出「」，英文环境渲染出 "" -->

规范明确：引用内容的引号「不得出现在 <q> 前后或内部，它们会由浏览器插入渲染」。可选的 cite 属性放来源 URL（机器可读，不显示）：

<p>正如官方文档所述：<q cite="https://example.com/doc">默认是惰性加载。</q></p>

<cite>：作品标题（不是人名！）

<cite> 表示「一部作品的标题」——书、文章、电影、歌曲、软件、网站等。规范有一条极其明确的禁令：

人名不是作品标题——即便有人说某人「是个人物（a piece of work）」——因此本元素绝不能用来标记人名。

人名请用 <b> 或 <span>。<cite> 默认斜体：

<p>正如 <cite>《重构》</cite> 一书所言……</p>
<p>这段引文出自电影 <cite>盗梦空间</cite>。</p>
<!-- 错误：不要这样标人名 -->
<!-- <p><cite>Martin Fowler</cite> 说……</p> -->

<blockquote>：块级引用

<blockquote> 表示一段较长的、块级引用。它支持 cite 属性（注意：是属性，存来源 URL，机器可读、不显示）；要在页面上显示出处，应在 <blockquote> 外面用 <p> + <cite> 写：

<blockquote cite="https://example.com/article">
  <p>过早优化是万恶之源。</p>
</blockquote>
<p>—— <cite>《计算机程序设计艺术》</cite>，Donald Knuth</p>

浏览器默认给 <blockquote> 左右加缩进，但不会自动加引号（这点和 <q> 不同）。

四、时间与数据：time · data

<time>：日期与时间

<time> 同时承载「给人看的文字」和「给机器读的 datetime」。datetime 必须是合法的日期 / 时间微格式；若省略 datetime，则元素的文字内容本身必须是合法格式：

<p>活动定于 <time datetime="2026-07-07">7 月 7 日</time> 举行。</p>
<p>开场 <time datetime="20:00">晚 8 点</time>，时长约
  <time datetime="PT2H30M">2 小时 30 分</time>。</p>
<p>最后更新：<time datetime="2026-06-24T14:30+08:00">2026-06-24 下午 2:30</time></p>

常用 datetime 格式：

含义	格式	示例
年	YYYY	2026
年月	YYYY-MM	2026-06
日期	YYYY-MM-DD	2026-06-24
时间	HH:MM[:SS]	20:00、12:15:47
本地日期时间	YYYY-MM-DDTHH:MM	2026-06-24T14:30
全球日期时间（带时区）	…±HH:MM 或 …Z	2026-06-24T14:30+08:00
周	YYYY-Www	2026-W26
时长	PnDTnHnMnS	PT2H30M

<time> 别用于太久远的古代日期

规范建议不要用 <time> 标注公历（格里高利历）启用之前的日期，因为换算复杂、机器解读会出问题。

<data>：把文字关联到机器可读值

当你想给一段人类可读的文字附上机器可读的值、而它又不是日期 / 时间（那是 <time> 的活）时，用 <data> 的 value 属性：

<p>商品：<data value="SKU-12345">蓝色小组件</data></p>
<p>名次：<data value="3">季军</data></p>

value 给程序读，元素文字给人看。

五、上下标与小字：sub · sup · small

<sub> / <sup>：下标 / 上标

<p>水的化学式是 H<sub>2</sub>O。</p>
<p>勾股定理：<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>。</p>
<p>这是一处脚注<sup><a href="#fn1">[1]</a></sup>。</p>

它们有语义（化学式、幂、脚注、英文序数词如 1st 里的 st），不是单纯「把字缩小并升高 / 降低」——纯排版需求请用 CSS vertical-align + font-size。

<small>：小字附注

<small> 表示「附带的小字」——版权声明、免责声明、署名、条款细则等。规范警告：不要用它包大段文字（多个段落 / 列表 / 整节）：

<footer>
  <small>© 2026 Example 公司。保留所有权利。</small>
</footer>

六、<s>：不再准确 / 不再相关

<s>（strikethrough）表示内容「不再准确或不再相关」，默认加删除线。注意它不是「编辑删除」——表达文档修订的增删要用 <ins> / <del>（见 国际化与编辑标注）：

<p>原价 <s>￥299</s> 现价 ￥199。</p>

「这条优惠已过期 / 这个事实已不成立」用 <s>；「我在修订稿里删掉了这句」用 <del>。

七、<span>：无语义兜底

当没有任何语义元素合适、你只是需要一个行内容器来挂 CSS 类或 JS 钩子时，才用 <span>：

<p>余额：<span class="amount">￥1,024</span></p>

它和块级的 <div> 一样，是「最后手段」——能用语义元素就别用 <span>。

小结

行内语义的精髓是「一词一义」：代码 / 输入 / 输出 / 变量分别是 <code> / <kbd> / <samp> / <var>，引语 / 作品名分别是 <q> / <cite>，时间 / 数据分别是 <time> / <data>，而 <span> 是没有语义时的兜底。选对了，机器和人都能读懂你的意图。下一页转向 HTML 的灵魂——超链接，以及它背后的安全机制：超链接机制与 rel 安全。