编辑“︁HTML预格式化文本”︁

= HTML预格式化文本 =

'''HTML预格式化文本'''（Preformatted Text）是一种特殊的文本格式，在HTML中通过<code><nowiki><pre></nowiki></code>标签实现。它保留文本中的空格、换行符和缩进，使得文本在浏览器中的显示与其在源代码中的格式完全一致。这对于展示代码、诗歌、ASCII艺术等需要精确格式的内容非常有用。

== 基本概念 ==

在HTML中，普通的文本内容会忽略多余的空格和换行符，只保留一个空格作为分隔。例如：

<syntaxhighlight lang="html">
<p>这段文本中有    多个空格，
但浏览器只会显示一个。</p>
</syntaxhighlight>

输出：
<p>这段文本中有    多个空格，
但浏览器只会显示一个。</p>

而使用<code><nowiki><pre></nowiki></code>标签时，所有空格和换行符都会被保留：

<syntaxhighlight lang="html">
<pre>这段文本中的    多个空格，
会被完全保留。</pre>
</syntaxhighlight>

输出：
<pre>这段文本中的    多个空格，
会被完全保留。</pre>

== 语法与属性 ==

<code><nowiki><pre></nowiki></code>标签的基本语法如下：

<syntaxhighlight lang="html">
<pre>
    这里的内容会保留
    所有空格和换行。
</pre>
</syntaxhighlight>

<code><nowiki><pre></nowiki></code>标签支持所有全局HTML属性，如<code>class</code>、<code>id</code>、<code>style</code>等。例如：

<syntaxhighlight lang="html">
<pre class="code-block" style="background-color: #f5f5f5; padding: 10px;">
    带样式的预格式化文本
</pre>
</syntaxhighlight>

== 与<code><nowiki><code></nowiki></code>标签的区别 ==

初学者常混淆<code><nowiki><pre></nowiki></code>和<code><nowiki><code></nowiki></code>标签：

{| class="wikitable"
|-
! 标签 !! 用途 !! 是否保留格式
|-
| <code><nowiki><pre></nowiki></code> || 用于多行预格式化文本 || 是
|-
| <code><nowiki><code></nowiki></code> || 用于单行内联代码 || 否
|}

== 实际应用案例 ==

=== 1. 展示代码 ===

预格式化文本最常见的用途是展示源代码：

<syntaxhighlight lang="html">
<pre>
function helloWorld() {
    console.log("Hello, World!");
    return 42;
}
</pre>
</syntaxhighlight>

输出：
<pre>
function helloWorld() {
    console.log("Hello, World!");
    return 42;
}
</pre>

=== 2. ASCII艺术 ===

ASCII艺术依赖精确的字符位置：

<syntaxhighlight lang="html">
<pre>
   /\_/\
  ( o.o )
   > ^ <
</pre>
</syntaxhighlight>

输出：
<pre>
   /\_/\
  ( o.o )
   > ^ <
</pre>

=== 3. 诗歌格式 ===

诗歌需要保留特定的换行和缩进：

<syntaxhighlight lang="html">
<pre>
    静夜思
        ——李白

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

== 高级主题 ==

=== 结合语义化标签 ===

为提高可访问性，建议将<code><nowiki><pre></nowiki></code>与<code><nowiki><code></nowiki></code>结合使用：

<syntaxhighlight lang="html">
<pre><code>
// 更好的代码展示方式
const pi = 3.14159;
</code></pre>
</syntaxhighlight>

=== 响应式设计考虑 ===

预格式化文本可能导致水平滚动条。解决方案：

<syntaxhighlight lang="css">
pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
</syntaxhighlight>

=== 性能影响 ===

大量使用<code><nowiki><pre></nowiki></code>标签可能影响页面渲染性能，因为：

* 浏览器需要精确计算每个字符的位置
* 无法进行常规的文本流优化

== 数学公式展示 ==

虽然<code><nowiki><pre></nowiki></code>不适合复杂数学公式，但可以展示简单公式：

<pre>
E = mc²

    ∫ f(x) dx
</pre>

对于复杂公式，应使用MathML或<math>标签：

<math>
\sum_{i=1}^n i = \frac{n(n+1)}{2}
</math>

== 流程图示例 ==

虽然<code><nowiki><pre></nowiki></code>不适合绘制图表，但可以展示简单的ASCII流程图：

<pre>
开始
  ↓
[处理数据]
  ↓
结束
</pre>

更复杂的图表应使用专门的工具如mermaid：

<mermaid>
graph TD
    A[开始] --> B(处理数据)
    B --> C{是否完成?}
    C -->|是| D[结束]
    C -->|否| B
</mermaid>

== 最佳实践 ==

1. 仅在需要精确控制空白字符时使用<code><nowiki><pre></nowiki></code>
2. 对于代码展示，结合<code><nowiki><code></nowiki></code>标签
3. 添加适当的CSS样式提高可读性
4. 考虑移动设备的显示效果
5. 避免过度使用，以免影响性能

== 总结 ==

HTML预格式化文本通过<code><nowiki><pre></nowiki></code>标签实现，是保留文本原始格式的强大工具。它特别适用于代码展示、诗歌和需要精确空格的文本内容。理解其工作原理和最佳实践，可以帮助开发者更有效地展示格式敏感的内容。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]