参考资料

  1. HTML 水平线
  2. HTML 表格背景
  3. HTML 引文、引用和定义元素
  4. html文本标签详细说明以及案例
  5. HTML 布局
  6. HTML 合并单元格
  7. HTML 用于著作标题的
  8. HTML 数学符号

HTML 预期格式文本

详细介绍

HTML 预期格式文本（Preformatted Text）是指使用 <pre> 标签定义的文本，浏览器会保留其中的空格、换行符等空白字符，并以等宽字体显示。

主要标签

  • <pre>: 定义预格式化文本块

  • <code>: 定义计算机代码片段（通常嵌套在 <pre> 中）

基本用法

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

功能特性

  1. 保留所有空白字符（空格、制表符、换行符）

  2. 默认使用等宽字体显示（通常是 Courier 或 Consolas）

  3. 文本内容会按照源码中的格式原样显示

  4. 适用于显示代码、ASCII 艺术、格式化文本等

CSS 扩展样式

可以通过 CSS 对预格式化文本进行样式控制：

pre {
  font-family: monospace; /* 确保等宽字体 */
  white-space: pre; /* 保留空白 */
  background-color: #f5f5f5; /* 背景色 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  border: 1px solid #ddd; /* 边框 */
  overflow-x: auto; /* 水平滚动条 */
  line-height: 1.5; /* 行高 */
}

/* 代码高亮样式 */
pre code {
  color: #333;
  display: block;
}

高级用法

结合 <code> 标签实现代码高亮：

<pre><code class="language-html">
  <!DOCTYPE html>
  <html>
    <head>
      <title>示例页面</title>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
  </html>
</code></pre>

注意事项

  1. <pre> 标签内的 HTML 标签会被正常解析

  2. 过长的行可能需要设置 overflow 属性

  3. 在 <pre> 中显示特殊字符可能需要转义

TAG：文本标签定义格式化代码空格换行符空白字符字体