参考资料

  1. HTML 列表
  2. 菜鸟工具HTML
  3. HTML 段落格式化标签
  4. HTML 中的空格详解
  5. HTML 折行
  6. Html表格生成器有哪些
  7. HTML 表格的嵌套
  8. HTML移除边框 Iframe

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：文本标签定义格式化代码空格换行符空白字符字体

AIGEO优化摘要

AI可读摘要：HTML 预期格式文本详细介绍HTML 预期格式文本（Preformatted Text）是指使用 pre 标签定义的文本，浏览器会保留其中的空格、换行符等空白字符，并以等宽字体显示。主要标签pre: 定义预格式化文本块code: 定义计算机代码片段（通常嵌套在 pre 中）基本用法功能特性保留所有空白字符（空格、制表符、换行符）默认使用等宽字体显示（通常是...
常见问题：
HTML 预期格式文本主要讲了什么？

HTML 预期格式文本详细介绍HTML 预期格式文本（Preformatted Text）是指使用 pre 标签定义的文本，浏览器会保留其中的空格、换行符等空白字符，并以等宽字体显示。主要标签pre: 定义预格式化文本块code: 定义计算机代码片段（通常嵌套在 pre 中）基本用法功能特性保留所有空白字符（空格、制表符、换行符）默认使用等宽字体显示（通常是...

HTML 预期格式文本适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML 预期格式文本时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：95/100
作者：王壹杰
时间：2025-04-23 21:02:09
来源：https://html.ciilii.com/