HTML 的 ＜pre＞ 元素

1. 什么是

元素

<pre> 是 HTML 中一个非常实用的元素，全称是 preformatted text （预格式化文本）。它的核心作用就是保留文本中的空格、换行和缩进，让浏览器按照源代码中的原始格式来显示内容。

在普通的 HTML 元素中，连续的空格会被合并为一个，换行符也会被忽略。但 <pre> 元素打破了这一规则，它会原封不动地展示文本的排版。

2. 基本用法

<pre> 的使用非常简单，只需要把需要保留格式的文本放在开始标签和结束标签之间即可：

<pre>
  床前明月光，
  疑是地上霜。
  举头望明月，
  低头思故乡。
</pre>

浏览器会按照上面代码中的缩进和换行来显示这段文字，而不是像普通段落那样自动排版。

3. 与普通文本的对比

为了更直观地理解 <pre> 的作用，我们来看一个对比示例：

<p>这是普通段落。
  这里有多个空格和换行，
  但浏览器会忽略它们。</p>

<pre>这是预格式化文本。
  这里有多个空格和换行，
  浏览器会完整保留。</pre>

在浏览器中，<p> 中的多余空格和换行会被折叠，而 <pre> 中的格式会被完整呈现。

4. 常用场景

<pre> 元素在以下场景中非常有用：

• 展示代码片段 ：配合 <code> 元素使用，是展示代码最经典的方式
• 显示 ASCII 艺术：字符画依赖精确的空格和换行
• 展示日志文件：日志通常有固定的缩进格式
• 呈现数据表格：用空格对齐的纯文本表格
• 显示配置文件：如 YAML、INI 等对缩进敏感的文件内容

5. 与 元素配合

在实际开发中，<pre> 经常与 <code> 元素一起使用，用来展示代码块：

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

<code> 负责语义化地标记代码内容，<pre> 负责保留代码的缩进和换行格式，两者配合相得益彰。

6. 样式定制

浏览器默认会给 <pre> 元素使用等宽字体，但我们可以通过 CSS 自定义样式：

pre {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
}

其中 overflow-x: auto 特别重要，当内容超出容器宽度时，可以出现横向滚动条，避免破坏页面布局。

7. 注意事项

使用 <pre> 元素时有几点需要留意：

• 特殊字符转义 ：<pre> 内部的 <、>、& 等字符仍然需要转义，否则会被浏览器解析为标签
• 长行处理：默认情况下超长行不会自动换行，需要配合 CSS 处理
• 可访问性 ：屏幕阅读器对 <pre> 内容的朗读方式可能与普通文本不同
• 嵌套限制 ：<pre> 内部可以包含行内元素，但要注意语义的合理性

8. 总结

<pre> 元素是 HTML 中处理预格式化文本的重要工具。它保留了文本的原始排版，特别适合展示代码、日志和任何对格式有要求的文本内容。配合 <code> 元素和适当的 CSS 样式，可以打造出清晰美观的代码展示效果。