HTML 中怎样添加预格式化文本

在网页开发中，HTML 提供了多种方式来添加预格式化文本，这对于需要保留文本原始格式的场景至关重要，比如展示计算机代码、诗歌排版或特定格式的文本内容。

在 HTML 里，<pre> 标签是添加预格式化文本的主要方式。<pre> 标签会保留文本中的空格、换行符和其他空白字符，使得文本在网页上呈现的格式与在 HTML 源文件中的格式一致。例如，当你想要展示一段代码：

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

这段代码在网页上会以和上述代码块一模一样的格式显示，代码的缩进、换行等都被完整保留。

<pre> 标签还可以与 <code> 标签结合使用，<code> 标签用于表示一段计算机代码。这样结合不仅能保留代码的格式，还能在语义上更明确地告诉浏览器和搜索引擎这是代码内容。示例如下：

<pre>
  <code>
  public class Main {
      public static void main(String[] args) {
          System.out.println("Hello, Java!");
      }
  }
  </code>
</pre>

除了代码展示，<pre> 标签在展示诗歌等有特定排版要求的文本时也非常有用。例如一首诗：

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

如此一来，诗歌的每行格式都能精准地在网页上呈现。

在使用 <pre> 标签时，也可以通过 CSS 对其进行样式设置。比如，你可以设置字体、颜色、背景色等。例如：

pre {
    font-family: monospace;
    color: #333;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 10px;
}

通过这些设置，可以让预格式化文本在网页上更加美观、易读。

掌握在 HTML 中添加预格式化文本的方法，能为网页开发者在处理特定格式文本时提供极大便利，无论是展示代码片段，还是呈现富有格式美感的文本内容，都能轻松应对，为用户带来更好的浏览体验。