讲解

段落内部还有一批「行内」元素，用来标记文字的性质。最常用也最容易混淆的是两对：<strong> 表示内容重要，<em> 表示语气强调——它们有语义，屏幕阅读器会用重读的方式念出来；而 <b> 和 <i> 只是视觉上的粗体、斜体，不带任何强调含义，现代实践中主要用于「需要区别但谈不上强调」的场景（比如 <i> 包英文术语、船名）。简单记：表达重要用 strong，表达语气用 em，纯视觉区分才考虑 b/i。

其余高频元素各有明确用途：<mark> 高亮标记（像荧光笔，常用于标出搜索命中的关键词）；<del> 和 <ins> 表示删除与新增的内容（修订记录、促销价划线）；<small> 是附属细则（版权、免责声明）；<sub>/<sup> 是下标上标（H₂O、平方米 m²）。引用一族包括：<blockquote> 块级长引用（带 cite 属性注明出处 URL）、<q> 行内短引用、<cite> 作品名。

技术类页面还有三个好搭档：<code> 标记代码片段、<kbd> 标记键盘按键（如 Ctrl + S）、<samp> 标记程序输出。另外 <abbr title="超文本标记语言">HTML</abbr> 给缩写提供全称（悬停可见），<time datetime="2026-08-09">今天</time> 用机器可读的格式标注时间，方便搜索引擎理解。这些元素默认样式朴素，但语义价值远大于视觉价值。

示例

<p>本活动<strong>仅限今天</strong>，请<em>务必</em>准时。</p>
<p>原价 <del>¥199</del>，现价 <ins>¥99</ins>。</p>
<p>搜索「<mark>语义化</mark>」共找到 3 个结果。</p>
<p>水的化学式是 H<sub>2</sub>O，面积单位是 m<sup>2</sup>。</p>

<blockquote cite="https://example.com/speech">
  <p> Stay hungry, stay foolish. </p>
  <footer>—— <cite>Steve Jobs</cite></footer>
</blockquote>

<p>
  按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存，终端会输出 <samp>saved.</samp>。
  本文使用的 <abbr title="HyperText Markup Language">HTML</abbr> 标准由
  WHATWG 维护，更新于 <time datetime="2026-08-09">2026 年 8 月</time>。
</p>

常见坑

  • 无脑用 / 替代 /：视觉一样，但语义尽失——屏幕阅读器不会重读，搜索引擎也不认为那是重点。表达强调时优先语义化的一对。
  • 用 只为缩进：它是「引用他人内容」的语义标签，想要缩进效果请用 CSS。
  • time 不写 datetime：<time>昨天</time> 对机器毫无意义，datetime 属性里的标准格式（YYYY-MM-DD）才是它的价值所在。
  • 滥用 当高亮样式：mark 表示「与当前上下文相关的标记」，通篇高亮请用 CSS 类。

小结

文本格式化元素的核心是「用词性选标签」：strong/em 表达强调，mark/del/ins 表达标记与修订，code/kbd/samp 服务技术写作，abbr/time 给机器读的信息。下一章学习让网页连成「网」的元素：链接。