跳转至

HTML 文本格式化

HTML 的文本级元素主要表达含义，而不是直接指定粗体、斜体或颜色。选择正确语义后， 再用 CSS 设计一致的视觉表现。

学习目标

  • 区分强调、重要性、标注和纯视觉样式。
  • 正确标记代码、用户输入、程序输出和时间。
  • 避免使用过时表现元素或不安全的富文本拼接。

核心概念

文本级元素应按内容含义选择；强调与重要性是最常见的两类，但不是所有视觉变化都需要额外元素。

强调与重要性

em 表示语气强调，重音不同可能改变句意；strong 表示重要、严重或紧迫：

<p>请在升级前<strong>创建备份</strong>。</p>
<p>这个选项只影响<em>当前</em>页面。</p>

b 可用于吸引注意但不增加重要性，i 可表示术语、分类名称或不同语气。 如果目的只是加粗或倾斜，应使用 CSS，而不要赋予内容不存在的语义。

代码与交互文本

<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>
<p>运行 <code>node --version</code> 后，终端输出 <samp>v22.0.0</samp>。</p>

多行预格式化代码通常组合 pre 与 code：

<pre><code>&lt;h1&gt;安全显示标签示例&lt;/h1&gt;</code></pre>

若要把标签作为文字显示，应转义 < 和 &，否则浏览器会将其解析为标记。

其他语义文本

  • mark 标记与当前上下文相关的内容，例如搜索结果命中。
  • small 表示附注、版权或小字条款，不只是缩小字号。
  • del 与 ins 表示删除和新增内容，可用于修订记录。
  • sub 与 sup 用于确有排版含义的上下标，如 H2O 或 x2。
  • time 可用 datetime 提供机器可读日期。
<p>课程时间：<time datetime="2026-07-20T09:00:00+08:00">7 月 20 日 9:00</time></p>

安全实践

富文本编辑内容不能仅靠移除 <script> 保证安全，因为事件属性、危险 URL 和解析差异也可能 引入风险。优先限定允许的标记集合，使用维护良好的净化器，并配置内容安全策略作为纵深防护。

常见错误

  • 使用 strong 只为加粗所有视觉标题。
  • 使用已过时的 font、center 或 big 元素控制外观。
  • 把未转义的 HTML 示例直接放入 code。
  • 用 mark 表示普通黄色背景，而没有上下文相关含义。
  • 只靠 HTML 过滤黑名单处理不可信富文本。

相关链接