入门
基于 HTML Living Standard · 核于 2026-06
速查
- 强调 vs 重要：
<em>（改变语调的强调）≠<strong>（内容重要，如警告）；二者都有语义，可嵌套叠加 - 样式 vs 语义：
<b>（引人注意，无重要性）/<i>（异声 / 术语 / 外文）只是「替代 CSS 的语义占位」，纯排版请用 CSS - 代码族：
<code>（代码片段）、<kbd>（键盘输入）、<samp>（程序输出）、<var>（变量名）各司其职 - 引用：
<q>（行内引语，浏览器自动加引号）、<cite>（作品标题，不是人名）、<blockquote>（块级引用，配cite属性存源 URL） - 时间：
<time datetime="2026-06-24">——datetime给机器，文字给人；格式见 行内语义页 - 链接：
<a href>的href支持绝对 / 相对 URL、#锚点、mailto:、tel:；链接文字要自解释，别写「点这里」 - 安全铁律：
target="_blank"务必配rel="noopener"（现代浏览器已隐含，老浏览器仍需写），外链再加noreferrer - 列表：有序
<ol>（顺序有意义）、无序<ul>（顺序无关）、描述<dl>（术语 + 释义）——别为缩进滥用<dl> - 换行：
<br>强制换行（仅诗歌 / 地址 / 签名），<wbr>建议断点（长 URL / 长标识符），段落分隔永远用<p> - 国际化：局部
lang、<bdi>隔离方向未知的用户内容、<ruby>给汉字注音
一段「语义正确」的文本
下面这段示例把本叶最常用的行内元素都用上了，其余各页就是逐个拆解它：
<p>
<strong>注意：</strong>升级前请先备份。本工具基于
<a href="https://nodejs.org" target="_blank" rel="noopener">Node.js</a>
运行，要求版本 <code>>= 20</code>。安装命令为
<kbd>npm i -g my-cli</kbd>，成功后终端会打印
<samp>installed my-cli@2.0.0</samp>。
</p>
<p>
正如 <cite>《重构》</cite> 所言：<q>任何傻瓜都能写出计算机能懂的代码。</q>
本页最后更新于 <time datetime="2026-06-24">2026 年 6 月 24 日</time>。
</p>这段里：<strong> 标重要、<a> 带安全 rel、<code> 包代码、<kbd> 标键盘输入、<samp> 标程序输出、<cite> 标作品名、<q> 自动加引号、<time> 同时给人和机器读。
一条贯穿全叶的判断准则
先问「这段文字是什么意思」，再选元素；样式交给 CSS。「我想让它变粗 / 变斜」不是选 <strong> / <em> 的理由——那是 font-weight / font-style 的活。只有当「粗 / 斜」背后有语义（重要、强调、术语、键盘键）时，才用对应的语义元素。
逐块拆解
① 强调与重要性
<em> 表示改变语意的强调（朗读时会重读，「我喜欢猫」vs「我喜欢猫」），<strong> 表示内容重要（如警告、关键步骤）。二者都有语义、都能嵌套叠加；而 <b> / <i> 只是「引人注意 / 异声」的弱语义占位。详见 强调与重要性。
② 行内文本语义
<code>、<kbd>、<samp>、<var> 分别对应代码、键盘输入、程序输出、变量名；<mark> 高亮、<abbr> 缩写、<cite> 作品名、<q> 行内引语、<time> 日期时间、<sub> / <sup> 上下标。每个都有明确语义，不可混用。详见 行内文本语义全谱。
③ 超链接
<a href> 是 HTML 的灵魂。href 可指向绝对 / 相对 URL、页内 #锚点、mailto: 邮件、tel: 电话；download 触发下载、target 控制在哪打开。链接文字必须自解释（屏幕阅读器可单独列出所有链接），安全上 target="_blank" 必须配 rel。详见 超链接机制与 rel 安全。
④ 列表
<ul> 用于顺序无关的项、<ol> 用于顺序有意义的项（可用 start / type / reversed 调编号）、<dl> 用于「术语 + 释义」这类成对结构。判据：把项重新排序后意义是否改变——会变就用 <ol>。详见 列表三型。
⑤ 国际化与编辑标注
局部 lang 标注外文片段、<bdi> 隔离方向未知的用户生成内容（阿拉伯语 / 希伯来语名字）、<bdo> 强制方向、<ruby> 给汉字 / 假名注音；<ins> / <del> 标注文档的增删修订。详见 国际化与编辑标注。
⑥ 换行与空白
HTML 默认折叠空白（连续空格 / 换行/制表符合并成一个空格）。<br> 强制换行，只该用于诗歌 / 地址 / 签名等「换行本身是内容」的场景；<wbr> 给浏览器一个可选断点，专治长 URL、长标识符撑破容器。详见 wbr/br 与空白折叠。
常被误用的几对元素
| 想表达的意思 | 正确元素 | 别误用 |
|---|---|---|
| 这段很重要（警告 / 关键） | <strong> | <b>（只是引人注意） |
| 朗读时要重读的强调 | <em> | <i>（异声 / 术语 / 外文） |
| 用户要按的键 | <kbd> | <code>（那是代码片段） |
| 程序打印的输出 | <samp> | <code> |
| 作品 / 书 / 文章的标题 | <cite> | 用它标人名（规范明确禁止） |
| 行内引用一句话 | <q>（自动加引号） | 手动敲引号 + <span> |
| 段落之间换行 | 两个 <p> | 连写 <br><br> |