预格式化文本标签(pre)

<pre> 标签在 HTML 中用于定义预格式化的文本，保留文本中的空格、换行和其他格式，通常用于显示代码块或其他需要固定格式的内容。它的行为与普通文本容器不同，默认以等宽字体渲染，且不会忽略空白字符。

<pre> 标签的基本用法

<pre> 标签的语法非常简单，只需将需要预格式化的内容包裹在 <pre> 和 </pre> 之间：

<pre>
  这是预格式化文本。
  它会保留  空格   和
  换行。
</pre>

渲染效果如下：

  这是预格式化文本。
  它会保留  空格   和
  换行。

与 <code> 标签的配合使用

<pre> 常与 <code> 标签结合使用，用于展示代码片段。<code> 表示内联代码，而 <pre> 保留格式，二者结合能更好地呈现代码结构：

<pre><code>
function greet() {
  console.log("Hello, world!");
}
</code></pre>

效果：

function greet() {
  console.log("Hello, world!");
}

空白字符的处理

普通 HTML 会合并连续的空白字符（空格、制表符、换行），但 <pre> 会保留所有空白：

<p>
  这段文字    中的空格    会被合并。
</p>

<pre>
  这段文字    中的空格    会被保留。
</pre>

对比效果：

这段文字 中的空格 会被合并。

  这段文字    中的空格    会被保留。

滚动与溢出控制

当 <pre> 内容过长时，默认会溢出容器。可以通过 CSS 添加横向滚动条：

<pre style="overflow-x: auto;">
  这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文本。
</pre>

嵌套其他标签的限制

<pre> 标签内通常只能包含文本和短语内容（如 <code>），嵌套块级元素（如 <div>）可能导致解析错误：

<!-- 不推荐的做法 -->
<pre>
  <div>无效的嵌套</div>
</pre>

实际应用场景

展示命令行输出

<pre>
$ npm install package
+ package@1.0.0
added 1 package in 0.5s
</pre>

效果：

$ npm install package
+ package@1.0.0
added 1 package in 0.5s

显示诗歌或歌词

<pre>
  春江潮水连海平，
  海上明月共潮生。
  滟滟随波千万里，
  何处春江无月明。
</pre>

效果：

  春江潮水连海平，
  海上明月共潮生。
  滟滟随波千万里，
  何处春江无月明。

浏览器默认样式

大多数浏览器对 <pre> 的默认样式包括：

• display: block
• font-family: monospace
• white-space: pre
• margin: 1em 0

可以通过 CSS 覆盖这些样式：

pre {
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
  border-left: 3px solid #6ce26c;
}

与 JavaScript 的交互

可以通过 DOM 操作动态修改 <pre> 内容：

<pre id="dynamic-pre">初始内容</pre>
<button onclick="updatePre()">更新内容</button>

<script>
  function updatePre() {
    document.getElementById('dynamic-pre').textContent = '新的预格式化内容';
  }
</script>

可访问性考虑

为屏幕阅读器用户添加 aria-label：

<pre aria-label="代码示例">
  const data = { key: 'value' };
</pre>

性能影响

大量使用 <pre> 可能影响页面渲染性能，因为浏览器需要精确计算每个空白字符的位置。对于超长内容（如数万行日志），建议采用虚拟滚动技术。

与其他技术的结合

配合 Markdown 使用

在 Markdown 中，使用三个反引号创建代码块时，实际生成的就是 <pre><code> 结构：

```javascript
console.log('Markdown 代码块');
```

转换为 HTML：

<pre><code class="language-javascript">console.log('Markdown 代码块');
</code></pre>

在模板引擎中的应用

Handlebars 示例：

<pre>
  {{#each lines}}
    {{this}}
  {{/each}}
</pre>

历史与兼容性

<pre> 标签自 HTML 2.0 起就存在，所有浏览器完全支持。在早期网页中常被用于创建 ASCII 艺术：

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

效果：

  /\_/\
 ( o.o )
  > ^ <

现代替代方案

虽然 <pre> 仍然常用，但现代开发中也会选择：

1. 使用 <div> 配合 white-space: pre-wrap
2. 专用代码高亮库（如 Prism.js）
3. Web Components 如 <marked-element>

示例替代方案：

<div style="white-space: pre-wrap; font-family: monospace;">
  替代方案同样可以
  保留  空白字符
</div>

特殊字符处理

<pre> 标签内仍需对 HTML 特殊字符进行转义：

<pre>
  &lt;div&gt; 需要转义 &lt;/div&gt;
</pre>

输出：

  <div> 需要转义 </div>

打印样式优化

确保打印时 <pre> 内容不会截断：

@media print {
  pre {
    white-space: pre-wrap;
    page-break-inside: avoid;
  }
}

服务器端渲染注意事项

在服务端生成 <pre> 内容时，注意换行符的统一处理（CRLF vs LF），避免在不同操作系统上显示不一致。