HTML pre 标签

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

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

<pre>
  This    Text will 
  be shown   exactly 
      as it   is written.
</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> 标签来显示代码。要了解更多信息，请访问 HTML <code> 标签。