HTML的pre标签

在HTML中，pre标签是用来定义预格式化文本的元素。它是“preformatted”的缩写，意思是预设格式，表示要保留其中的空格、回车、字体等格式，将其原封不动地显示在浏览器中。这意味着如果你在 pre 标签中输入刻意的空格或 TAB 字符，则在页面中它们将被精确地呈现。

语法

HTML中，pre标签的语法如下:

<pre>
  ...
</pre>

预格式化文本通常在pre标签中。标签中的第一行会从文档边缘开始，这意味着如果你在

 标签内放置了一个不同于其他标签的前置空白符 (space，tab，通常是四个空格等)，它也会在第一行的文本前出现。

属性
pre标签也可以使用一些属性，其中最常见的是 class 和 style 属性。class 属性常用于定义样式表规则，而 style 属性可以用于在HTML中直接定义样式。
<pre class="code" style="font-size: 18px;">
  <!-- 此处为预格式化文本 -->
</pre>
用法
在pre标签中，你可以直接输入想要的文本，它们将被原封不动地显示。pre标签通常用于如下场景：

显示程序代码

pre标签在网页设计中非常有用。它通常用于在HTML页面中放置代码，包括复制粘贴的代码示例，脚本或其他编程语言的源代码等。
例如:
<pre>
  <code>
    // JavaScript代码示例
    let name = "Lucas";
    console.log(`Hello, ${name}!`);
  </code>
</pre>
这段代码就将 JavaScript 代码示例以预格式化方式显示在页面上。

显示预格式化文本

当你需要引用一些文本，而在这段文本中包含多个空格和回车等格式，这时像一个普通的 p 或 div 元素并不能很好地显示这些格式，这个时候就需要使用 pre 标签。例如：
<pre>
  Hello,   and welcome to my website!
  
  Please browse my collection of books and feel free to contact me if you have any questions.
  
  Sincerely,
  John Doe
</pre>
在这个例子中，预格式化文本被保留，并按照原样显示。注意：预格式化文本的样式也可以使用 CSS 来进行自定义。
总结
pre标签用于定义预格式化文本，通常用于显示程序代码、预格式化文本、ASCII艺术等需要保留格式的文本。有关 pre 标签的要点是它会保留 HTML 中的所有空格和换行符，而其他 HTML 元素对其不起作用。即使文本中包含大量的前导空格，它也会被完美地显示，并始终在同一位置。