预格式化文本标签(pre)

作者：陈川阅读数：47779人阅读分类： HTML

<pre>标签在HTML中用于定义预格式化文本。浏览器会保留该标签内文本的原始格式，包括空格、换行和缩进，通常以等宽字体显示。这与HTML默认忽略多余空格和换行的行为形成鲜明对比。

html 复制代码

<pre>
  这段文本
    会保留
      所有空格和换行
</pre>

基本特性

<pre>元素最显著的特点是保持文本的原始排版。在普通HTML中，连续的空格和换行会被压缩成单个空格：

html 复制代码

<p>这段  文本
  中的空格和换行
  会被忽略</p>

而使用<pre>时：

html 复制代码

<pre>这段  文本
  中的空格和换行
  会被保留</pre>

默认情况下，<pre>内容会：

使用等宽字体(通常是Courier New)
保留所有空白字符
不自动换行(可能导致水平滚动条)

与code标签的关系

<pre>常与<code>配合使用来展示代码片段：

html 复制代码

<pre><code>
function hello() {
  console.log("Hello World!");
  return true;
}
</code></pre>

这种组合既保留了代码格式，又语义化地表明了这是代码内容。现代开发中，这种模式被广泛用于技术文档和教程。

样式控制

虽然<pre>有默认样式，但可以通过CSS完全自定义：

css 复制代码

pre {
  background-color: #f4f4f4;
  border-left: 3px solid #3498db;
  font-family: 'Consolas', monospace;
  line-height: 1.6;
  margin: 1.5em 0;
  overflow: auto;
  padding: 1em;
  display: block;
  white-space: pre-wrap; /* 允许自动换行 */
}

white-space属性特别重要，它有几个可选值：

pre：完全保留空白(默认)
pre-wrap：保留空白但允许换行
pre-line：合并空白但保留换行

实际应用场景

代码展示：

html 复制代码

<pre><code class="language-javascript">
// 二分查找算法
function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;
  
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }
  
  return -1;
}
</code></pre>

ASCII艺术：

html 复制代码

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

格式化文本：

html 复制代码

<pre>
收件人：张三
主题：会议通知
日期：2023-11-15

请于本周五下午2点参加项目评审会议。
地点：3楼会议室A。
</pre>

高级用法

结合JavaScript可以实现动态内容：

html 复制代码

<pre id="dynamic-pre"></pre>

<script>
  const preElement = document.getElementById('dynamic-pre');
  const data = {
    user: 'Alice',
    level: 'admin',
    lastLogin: '2023-11-10T08:30:00Z'
  };
  
  preElement.textContent = JSON.stringify(data, null, 2);
</script>

输出效果：

json 复制代码

{
  "user": "Alice",
  "level": "admin",
  "lastLogin": "2023-11-10T08:30:00Z"
}

无障碍考虑

为<pre>内容提供适当的描述：

html 复制代码

<div role="region" aria-labelledby="code-heading">
  <h3 id="code-heading">JavaScript示例代码</h3>
  <pre><code>
  // 这里是代码
  </code></pre>
</div>

对于复杂内容，可以考虑添加"跳过"链接或提供替代文本。

性能影响

大型<pre>内容可能影响页面性能：

超长行可能导致布局问题
大量内容增加DOM大小
语法高亮可能造成渲染延迟

解决方案：

javascript 复制代码

// 懒加载示例
const preObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadPreContent(entry.target);
      preObserver.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('pre.lazy').forEach(pre => {
  preObserver.observe(pre);
});

与其他技术结合

Markdown转换：
许多Markdown解析器将代码块转换为<pre><code>组合。
语法高亮：
使用Prism.js或highlight.js等库：

html 复制代码

<pre><code class="language-javascript">
// 高亮示例
const message = "Hello World";
console.log(message);
</code></pre>

<!-- 引入高亮库 -->
<script src="prism.js"></script>

终端模拟：
创建命令行界面效果：

css 复制代码

.terminal {
  background-color: #000;
  color: #0f0;
  padding: 1em;
  border-radius: 5px;
  font-family: monospace;
}

html 复制代码

<pre class="terminal">
$ npm install package
Installing...
Package installed successfully!
</pre>

浏览器兼容性

<pre>标签在所有现代浏览器中都有良好支持，包括：

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 7+

需要注意的差异：

早期IE版本对tab字符的处理不一致
移动端浏览器可能调整默认字体大小
打印样式可能需要特殊处理

内容安全

当展示用户提供的内容时：

javascript 复制代码

// 安全处理
function safePreContent(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

userContent = safePreContent(userInput);
preElement.innerHTML = userContent;

响应式设计

确保<pre>在不同设备上表现良好：

css 复制代码

@media screen and (max-width: 600px) {
  pre {
    font-size: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

打印优化

针对打印媒体的样式调整：

css 复制代码

@media print {
  pre {
    page-break-inside: avoid;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ddd !important;
  }
}

嵌套规则

<pre>标签内可以包含：

文本内容
短语元素(<strong>, <em>等)
<code>, <samp>, <kbd>等代码相关元素

但不能包含：

块级元素(<div>, <p>等)
会破坏格式的元素(<br>, <img>等)

历史演变

HTML规范中对<pre>的定义经历了多次调整：

HTML 2.0：基本预格式化功能
HTML 4.01：添加width属性(已废弃)
HTML5：明确内容模型和语义角色
现代HTML：与ARIA角色集成

替代方案比较

<textarea>只读模式：

html 复制代码

<textarea readonly style="font-family: monospace; border: none; background: #f5f5f5;">
  这里的内容
  也会保留格式
</textarea>

CSSwhite-space属性：

html 复制代码

<div style="white-space: pre-wrap; font-family: monospace;">
  使用CSS模拟pre效果
</div>

<xmp>标签(已废弃)：

html 复制代码

<xmp>
  旧式预格式化标签
  不建议使用
</xmp>

调试技巧

检查<pre>元素问题时：

确认没有意外继承了样式
检查特殊字符编码
验证DOM结构是否正确
测试不同字体下的显示效果

javascript 复制代码

// 获取计算样式
const preStyle = window.getComputedStyle(document.querySelector('pre'));
console.log(preStyle.whiteSpace);
console.log(preStyle.fontFamily);

服务器端处理

在生成<pre>内容时，服务器端需要注意：

正确转义HTML特殊字符
处理不同操作系统的换行符(\n vs \r\n)
考虑内容编码(UTF-8推荐)

PHP示例：

php 复制代码

<?php
$code = '<?php echo "Hello World!"; ?>';
echo '<pre>' . htmlspecialchars($code) . '</pre>';
?>

内容编辑

使<pre>可编辑：

html 复制代码

<pre contenteditable="true" style="outline: none;">
  点击可以编辑这段文本
  但会保留预格式化特性
</pre>

配合JavaScript保存修改：

javascript 复制代码

document.querySelector('pre[contenteditable]').addEventListener('blur', function() {
  localStorage.setItem('preContent', this.textContent);
});

扩展应用

数据可视化：

javascript 复制代码

const data = [12, 19, 3, 5, 2, 3];
const pre = document.createElement('pre');
pre.textContent = data.map(val => '■'.repeat(val)).join('\n');
document.body.appendChild(pre);

文本游戏：

html 复制代码

<pre id="game">
  ########
  #      #
  # @    #
  #      #
  ########
</pre>

<script>
  // 简单的键盘控制逻辑
  document.addEventListener('keydown', (e) => {
    const game = document.getElementById('game');
    let content = game.textContent;
    // 处理移动逻辑...
    game.textContent = updatedContent;
  });
</script>