HTML pre 标签

提示

1. HTML预格式化标签：<pre>标签定义一块预格式化的文本，保留了文本的所有格式，如空白和换行。
2. <pre>标签的字体特性：默认情况下，<pre>标签中的文本使用等宽字体，这种字体中的所有字符占用相同的空间。
3. <pre>标签的代码展示用途：通常用于展示代码块，因为它保留了代码的格式和空白，使得代码更易于阅读和理解。

HTML 预格式化文本标签 <pre> 用于定义一块文本，并以与其在 HTML 文件中编写的方式相同的方式显示。

在 HTML 中，我们使用 <pre> 标签来创建预格式化文本。例如，

<pre>
  这段    文本会
  按照原样   显示
      它的   编写。
</pre>

浏览器输出

<pre> 标签保留所有的新行和空白。因此，上述示例显示的输出与其编写方式完全相同。

HTML <pre> 标签中的字体

默认情况下，HTML <pre> 标签会将其内容的字体更改为等宽字体。等宽字体是一种所有字符占用相同空间的字体。

如上图所示，文本中的所有字符都具有相同的宽度。

HTML <pre> 标签中的代码

一般来说，HTML <pre> 标签用于在我们的 HTML 页面中包含代码块。例如，

<pre>
      let inviteFunction = async (invite) => {
      let response = await fetch("/invite", {
        method: "POST",
        headers: getHeaders(),
        body: JSON.stringify(invite),
      });
      let data = await response.json();
      if (response.ok) return data;
      throw new Error(data);
    }
</pre>

浏览器输出

在这里，我们可以看到使用 HTML <pre> 标签是在 HTML 文章中显示代码的好方法。它保留了空白，使代码更易读。

相比之下，如果我们使用 <p> 标签，输出将如下所示。

<p>
  let inviteFunction = async (invite) => { let response = await fetch("/invite",
  { method: "POST", headers: getHeaders(), body: JSON.stringify(invite), }); let
  data = await response.json(); if (response.ok) return data; throw new
  Error(data); }
</p>

浏览器输出

注意： 我们也使用 HTML <code> 标签来显示代码。