Web学习网站

Appearance

<pre> 标签 ​

<pre> 标签用于定义预格式化的文本。它表示文本已经按照特定格式排版，浏览器会保留文本中的空格、制表符和换行符。

概述 ​

<pre> 标签是 HTML 中的语义化标签，用于定义预格式化的文本块。与普通文本不同，<pre> 标签中的文本会保留原有的空格、制表符和换行符，浏览器会按照原文格式显示。

语法 ​

html
<pre>预格式化文本</pre>

基本用法 ​

保留格式的文本 ​

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

注意看这里的格式！
</pre>

代码块 ​

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

实际示例 ​

诗歌展示 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>pre 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    pre {
      background-color: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
      border-left: 4px solid #007bff;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    .poem {
      font-family: '楷体', serif;
      background-color: #fff8e1;
      border-left-color: #ff9800;
    }
    
    .code-block {
      font-family: 'Courier New', Courier, monospace;
      background-color: #2d2d2d;
      color: #f8f8f2;
      border-left-color: #4CAF50;
    }
  </style>
</head>
<body>
  <h1>诗歌展示</h1>
  
  <pre class="poem">
静夜思
    
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
        ——李白
  </pre>
  
  <h2>英文诗歌</h2>
  
  <pre class="poem">
The Road Not Taken

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
        ——Robert Frost
  </pre>
</body>
</html>

代码示例 ​

html
<section>
  <h2>JavaScript 代码示例</h2>
  
  <pre class="code-block">
// 递归实现斐波那契数列
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 测试函数
console.log(fibonacci(10)); // 输出: 55
  </pre>
  
  <h3>HTML 结构示例</h3>
  
  <pre class="code-block">
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;主标题&lt;/h1&gt;
    &lt;p&gt;这是一个段落。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
  </pre>
</section>

系统输出 ​

html
<section>
  <h2>命令行输出示例</h2>
  
  <pre>
$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add &lt;file&gt;..." to update what will be committed)
  (use "git restore &lt;file&gt;..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")
  </pre>
  
  <h3>错误消息</h3>
  
  <pre>
Error: ENOENT: no such file or directory, open '/path/to/file.txt'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at readFile (/path/to/app.js:10:15)
    at processFile (/path/to/app.js:25:20)
  </pre>
</section>

与相关标签的区别 ​

与普通文本的区别 ​

html
<!-- 普通文本：浏览器会忽略多余空格和换行 -->
<p>
这是普通文本。
它会忽略多余的空格和换行符。
</p>

<!-- pre 标签：保留原有格式 -->
<pre>
这是预格式化文本。
它会保留空格和换行符。

注意格式差异！
</pre>

与 <code> 标签的区别 ​

html
<!-- code 标签：用于内联代码 -->
<p>使用 <code>console.log()</code> 输出信息。</p>

<!-- pre 标签：用于预格式化文本块 -->
<pre>
function hello() {
  console.log("Hello, World!");
}
</pre>

<!-- pre + code 标签：用于代码块 -->
<pre><code>function hello() {
  console.log("Hello, World!");
}</code></pre>

样式化 ​

自定义预格式化文本样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 pre 样式 */
    pre {
      font-family: monospace;
      white-space: pre;
      margin: 1em 0;
    }
    
    /* 代码块样式 */
    .code-block {
      background-color: #f4f4f4;
      padding: 1rem;
      border-radius: 5px;
      border: 1px solid #ddd;
      overflow-x: auto;
    }
    
    /* 响应式代码块 */
    .responsive-pre {
      background-color: #2d2d2d;
      color: #f8f8f2;
      padding: 1rem;
      border-radius: 5px;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    /* 诗歌样式 */
    .poem {
      font-family: '楷体', serif;
      background-color: #fff8e1;
      padding: 1.5rem;
      border-radius: 8px;
      border-left: 4px solid #ff9800;
      white-space: pre-line;
    }
  </style>
</head>
<body>
  <pre class="code-block">
function calculate(a, b) {
  return a + b;
}

let result = calculate(5, 3);
console.log(result); // 8
  </pre>
  
  <pre class="responsive-pre">
这是一个很长的预格式化文本，它会自动换行以适应不同的屏幕尺寸。这样可以确保在移动设备上也能正常显示内容。
  </pre>
  
  <pre class="poem">
春晓
    
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
  </pre>
</body>
</html>

无障碍访问 ​

屏幕阅读器支持 ​

html
<pre aria-label="JavaScript 代码示例">
function greet(name) {
  return "你好, " + name + "!";
}

console.log(greet("张三"));
</pre>

响应式设计 ​

处理长代码行 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .responsive-code {
      background-color: #f4f4f4;
      padding: 1rem;
      border-radius: 5px;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: 'Courier New', Courier, monospace;
    }
    
    @media (max-width: 768px) {
      .responsive-code {
        font-size: 0.9em;
        padding: 0.8rem;
      }
    }
  </style>
</head>
<body>
  <pre class="responsive-code">
// 这是一行非常长的代码示例，用于演示响应式设计如何处理长代码行
const veryLongVariableNameForDemonstrationPurpose = someObject.method().anotherMethod().finalResult();
  </pre>
</body>
</html>

最佳实践 ​

  1. 语义化使用：只在需要保留文本格式时使用 <pre> 标签
  2. 与 <code> 配合：对于代码块，应与 <code> 标签配合使用
  3. 样式化：使用 CSS 为预格式化文本提供合适的样式
  4. 响应式处理：为长文本提供水平滚动或自动换行
  5. 可访问性：为屏幕阅读器用户提供适当的标签说明

浏览器兼容性 ​

<pre> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <pre> 标签是块级元素
  2. 浏览器会保留文本中的空格、制表符和换行符
  3. 默认使用等宽字体显示内容
  4. 对于长文本行，应考虑提供水平滚动或自动换行
  5. 可以通过 CSS 的 white-space 属性控制文本的处理方式

相关标签 ​