预格式化文本标签 - <pre>

什么是 <pre> 标签？

<pre> 标签用于表示预格式化的文本。浏览器会保留预格式化文本中的空格、制表符和换行符，通常使用等宽字体显示内容。

基本语法

html 
<pre>预格式化的内容</pre>

语义与用法

<pre> 标签用于表示需要保留原始格式的文本，主要用于以下场景：

  • 多行代码片段
  • 计算机程序输出
  • 诗歌或歌词
  • 表格数据（在没有使用<table>标签时）
  • ASCII艺术
  • 任何需要精确格式的文本

<pre> 标签具有明确的语义含义，不仅改变文本的外观，还传达了内容需要保留原始格式的信息。

示例：

html 
<!-- 多行代码 -->
<pre>
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</pre>

<!-- 计算机程序输出 -->
<pre>
$ npm install
> node-sass@4.14.1 install /project/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/darwin-x64-64_binding.node
Download complete..
Binary saved to /project/node_modules/node-sass/vendor/darwin-x64-64/binding.node
</pre>

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

<!-- ASCII艺术 -->
<pre>
   /\_/\
  ( o.o )
   > ^ <
</pre>

与 <code> 标签的配合使用

对于计算机代码，通常将 <code> 标签放在 <pre> 标签内部，这样既可以保留格式，又能明确表示内容是代码：

html 
<pre>
<code class="javascript">
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}
</code>
</pre>

内容注意事项

在 <pre> 标签中，需要注意以下几点：

  1. 保留所有空白：空格、制表符和换行符都会被保留
  2. 自动换行：默认情况下，内容不会自动换行，可能会导致水平滚动
  3. 特殊字符：HTML特殊字符（如 <、>、&）需要转义
  4. 等宽字体：浏览器默认使用等宽字体显示

示例：

html 
<!-- 自动换行处理 -->
<pre style="white-space: pre-wrap;">
这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本，会自动换行。
</pre>

<!-- 特殊字符转义 -->
<pre>
HTML标签：&lt;div&gt;&lt;/div&gt;
特殊符号：&amp; &quot; &apos;
</pre>

全局属性

<pre> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<pre class="code-block">
function hello() {
  console.log("Hello!");
}
</pre>

<!-- 使用style自定义样式 -->
<pre style="background-color: #f5f5f5; padding: 15px; border-radius: 5px;">
这是带样式的预格式化文本。
    包含缩进和换行。
</pre>

<!-- 使用title提供额外信息 -->
<pre title="示例代码">
<code>
// 这是一个简单的示例
let count = 0;
</code>
</pre>

最佳实践

  1. 用于需要保留格式的文本：仅在需要精确保留原始格式时使用 <pre> 标签

  2. 与 <code> 标签配合使用：对于代码内容，使用 <pre><code> 组合

  3. 处理长内容：对于长内容，考虑添加 white-space: pre-wrap; 样式以实现自动换行

  4. 适当的间距：使用CSS添加适当的内边距和背景色，提高可读性

  5. 特殊字符转义：确保HTML特殊字符得到正确转义

好的示例：

html 
<!-- 格式化的代码块 -->
<pre class="code-highlight">
<code class="html">
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;示例页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

<!-- 带自动换行的长内容 -->
<pre style="white-space: pre-wrap; word-wrap: break-word;">
这是一段非常长的预格式化文本，包含了很多很多的内容，需要自动换行以避免水平滚动条的出现，提高用户体验。
</pre>

不好的示例：

html 
<!-- 用于不需要保留格式的文本 -->
<pre>
这只是一段普通的文本，不需要保留格式，不应该使用pre标签。
</pre>

<!-- 未转义的HTML标签 -->
<pre>
HTML代码：<div></div>
</pre> <!-- 这会被解析为实际的div标签 -->

<!-- 过度使用 -->
<pre>
标题：第一章
内容：这是第一章的内容。
</pre> <!-- 应该使用正常的标题和段落标签 -->

浏览器兼容性

<pre> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<pre> 标签是HTML中用于表示预格式化文本的语义化标签，它可以保留文本的原始格式，包括空格、制表符和换行符。与 <code> 标签配合使用，可以有效地显示多行代码。正确使用 <pre> 标签可以提高需要精确格式的文本的可读性和语义化程度，适用于代码、程序输出、诗歌等多种场景。

最后更新：2026-02-07