<pre>-预格式化文本

<pre>标签在HTML中用于定义预格式化文本，保留文本中的空格、换行和制表符等格式，通常用于展示代码块或需要保持原始格式的文本内容。它与<code>标签不同，后者仅用于内联代码片段。

<pre>标签的基本用法

<pre>标签会以等宽字体（通常是Courier New）显示文本，并保留所有空白字符。例如：

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

渲染效果如下：

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

与<code>标签的区别

虽然<pre>和<code>都用于展示代码，但它们的用途不同：

1. <code>用于内联代码片段：

   <p>使用<code>console.log()</code>打印信息到控制台。</p>
   

2. <pre>用于多行代码块：

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

结合CSS样式

可以为<pre>标签添加CSS样式来增强视觉效果：

<style>
  pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
  }
</style>

<pre>
  // 这是一段很长的代码行，如果没有overflow-x: auto，可能会导致布局问题
  const veryLongLine = "This is a very long line of code that might exceed the container width if not handled properly";
</pre>

处理特殊字符

在<pre>标签中，HTML实体需要转义：

<pre>
  &lt;div&gt;这是一个div元素&lt;/div&gt;
  &amp; 表示 & 符号
</pre>

响应式设计考虑

对于小屏幕设备，<pre>内容可能会溢出容器。解决方案：

pre {
  white-space: pre-wrap;       /* 保留空白符序列，但允许换行 */
  word-wrap: break-word;       /* 允许长单词换行 */
}

与JavaScript交互

可以通过JavaScript动态修改<pre>内容：

<pre id="dynamicPre">初始内容</pre>

<script>
  document.getElementById('dynamicPre').textContent = 
    '更新后的内容\n带换行';
</script>

性能考虑

大块的<pre>内容可能影响页面性能，特别是当包含数千行时。可以考虑：

1. 分页显示
2. 懒加载
3. 使用虚拟滚动技术

无障碍访问

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

<pre aria-label="JavaScript代码示例">
  function example() {
    return "Hello";
  }
</pre>

与其他标签的组合

<pre>常与<code>、<samp>（样本输出）和<kbd>（键盘输入）一起使用：

<pre>
  <kbd>Ctrl + C</kbd> 复制文本
  <samp>文件已复制</samp>
</pre>

浏览器兼容性

<pre>标签在所有现代浏览器中都有良好支持，但需要注意：

1. 默认样式可能因浏览器而异
2. 某些移动浏览器对长行的处理不一致
3. 旧版IE可能需要特定hack

实际应用场景

1. 文档系统展示代码示例
2. 日志查看器显示原始日志
3. 命令行界面模拟
4. 诗歌或需要特定格式的文本展示

<pre>
  静夜思 - 李白

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

高级技巧：语法高亮

虽然<pre>本身不支持语法高亮，但可以配合库实现：

<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 highlightExample() {
    return "这段代码会被高亮显示";
  }
</code></pre>

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

嵌套其他元素

<pre>标签内通常只包含文本，但也可以包含某些短语元素：

<pre>
  这是<strong>加粗</strong>文本
  这是<em>斜体</em>文本
</pre>

限制与注意事项

1. 避免在<pre>中嵌套块级元素
2. 大量使用可能影响SEO
3. 移动端体验需要特别测试
4. 复制粘贴时可能保留不必要的空白

替代方案比较

对于现代Web开发，也可以考虑：

1. Markdown代码块
2. 富文本编辑器的代码插件
3. 专门的代码展示组件库

```javascript
// Markdown中的代码块
const markdownExample = "Markdown语法";