<pre>-预格式化文本

<pre> 标签在 HTML 中用于定义预格式化的文本，它会保留文本中的空格、换行和其他格式，通常用于显示代码块或其他需要保持原始格式的内容。

<pre> 标签的基本用法

<pre> 标签内的文本会以等宽字体（通常是 Courier New 或 monospace）显示，并且会保留所有空格和换行符。例如：

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

在浏览器中，这段文本会原样显示：

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

如果不使用 <pre> 标签，HTML 会忽略多余的空格和换行，例如：

<p>
  这是普通段落，
  它不会保留  空格和
  换行。
</p>

浏览器渲染后，这段文本会变成：

这是普通段落， 它不会保留 空格和 换行。

<pre> 标签的常见用途

1. 显示代码块

<pre> 标签最常见的用途是显示代码，尤其是多行代码。例如：

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

渲染效果：

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

2. 结合 <code> 标签增强语义

虽然 <pre> 可以单独使用，但通常会和 <code> 标签结合，以增强语义化：

<pre><code>
function add(a, b) {
  return a + b;
}
</code></pre>

这样既能保留格式，又能明确表示这是一段代码。

3. 显示 ASCII 艺术或表格

由于 <pre> 会保留空格和换行，它也可以用于显示 ASCII 艺术或简单的表格：

<pre>
  +---------+---------+
  |  姓名   |  年龄   |
  +---------+---------+
  |  张三   |   25    |
  |  李四   |   30    |
  +---------+---------+
</pre>

渲染效果：

  +---------+---------+
  |  姓名   |  年龄   |
  +---------+---------+
  |  张三   |   25    |
  |  李四   |   30    |
  +---------+---------+

<pre> 标签的 CSS 样式

默认情况下，<pre> 标签的文本会以等宽字体显示，并且可能会有默认的 margin 和 padding。我们可以通过 CSS 调整它的样式：

<pre style="background-color: #f4f4f4; padding: 10px; border-radius: 5px;">
  这是一个带样式的预格式化文本块。
</pre>

渲染效果：

  这是一个带样式的预格式化文本块。

控制换行和溢出

默认情况下，<pre> 标签的内容不会自动换行，如果文本过长，可能会导致横向滚动。我们可以使用 CSS 的 white-space 和 overflow 属性来控制：

<pre style="white-space: pre-wrap; overflow-x: auto;">
  这是一段非常长的文本，如果超出容器宽度，我们希望它能自动换行而不是出现横向滚动条。
</pre>

• white-space: pre-wrap：保留空格和换行，但允许文本在必要时换行。
• overflow-x: auto：如果内容超出容器宽度，则显示横向滚动条。

<pre> 标签的注意事项

1. 特殊字符的转义

由于 <pre> 标签会原样显示内容，如果文本中包含 HTML 特殊字符（如 <、>、&），需要手动转义，否则它们会被解析为 HTML 标签：

<pre>
  &lt;div&gt;这是一个 div 标签&lt;/div&gt;
</pre>

渲染效果：

  <div>这是一个 div 标签</div>

2. 与 JavaScript 结合使用

如果动态插入内容到 <pre> 标签中，需要注意特殊字符的处理。例如：

<pre id="code-block"></pre>
<script>
  const code = `function test() {
    return "Hello";
  }`;
  document.getElementById("code-block").textContent = code;
</script>

使用 textContent 而不是 innerHTML，可以避免 HTML 解析问题。

<pre> 标签的进阶用法

1. 语法高亮

虽然 <pre> 本身不支持语法高亮，但可以结合 JavaScript 库（如 Prism.js 或 highlight.js）实现代码高亮：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<pre><code class="language-javascript">
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

<script>hljs.highlightAll();</script>

2. 响应式 <pre> 标签

在移动设备上，<pre> 标签的内容可能会溢出屏幕。可以通过 CSS 调整：

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

<pre> 与其他 HTML 标签的对比

<pre> vs <code>

• <pre>：用于保留格式的文本块，通常用于多行代码或格式化文本。
• <code>：用于行内代码片段，不会保留空格和换行。

<pre> vs <textarea>

• <pre>：仅用于显示文本，用户无法编辑。
• <textarea>：允许用户输入和编辑多行文本。

<pre> 标签的实际应用示例

1. 显示 JSON 数据

<pre id="json-display"></pre>
<script>
  const data = {
    name: "张三",
    age: 25,
    skills: ["HTML", "CSS", "JavaScript"]
  };
  document.getElementById("json-display").textContent = JSON.stringify(data, null, 2);
</script>

渲染效果：

{
  "name": "张三",
  "age": 25,
  "skills": [
    "HTML",
    "CSS",
    "JavaScript"
  ]
}

2. 显示命令行输出

<pre>
$ npm install react
+ react@18.2.0
added 1 package in 2s
</pre>

渲染效果：

$ npm install react
+ react@18.2.0
added 1 package in 2s