HTML pre 语法
在 HTML 中，pre 标签用于显示代码块或预格式化的文本块，它会保留文本中的所有空格、换行符和制表符。
语法：
<pre>代码块</pre>说明：
pre 是一个块级元素，它内部的文本通常会以等宽字体（monospaced font）显示，这对于显示代码片段、ASCII 艺术或其他需要精确字符对齐的内容非常有用。
提示: pre 是 “preformatted（预定义格式）” 的缩写。
HTML pre 摘要
| 属于 | HTML 语义化 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML pre 示例
接下来，我们通过一个简单的例子来讲解一下 HTML pre 标签是如何使用的。
示例：pre 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>下面这段代码演示了 JavaScript 函数的定义和调用。</p>
<pre>
<code>
// 定义函数
function hello() {
console.log("绿叶网");
}
// 调用函数
hello();
</code>
</pre>
</body>
</html>页面效果如下图所示。
分析：
从页面效果可以看出，包含在 pre 标签内的代码块会保留格式并原样输出。需要注意的是，如果想要表示代码块，为了更好的语义化，通常我们会将 code 标签嵌套在 pre 标签内部。其中，pre 标签用于保留代码的原始格式（包括空格和换行），而 code 用于提供语义化的标识。
此外还需要注意一点，pre 标签会保留源代码中的所有缩进。如果不希望页面显示多余的左侧空白，我们应该将 pre 标签内的内容顶格书写。也就是写成下面这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>下面这段代码演示了 JavaScript 函数的定义和调用。</p>
<pre><code>// 定义函数
function hello() {
console.log("绿叶网");
}
// 调用函数
hello();</code></pre>
</body>
</html>pre 标签非常有用，像绿叶网上面的代码块效果，也是使用它来实现的，如下图所示。
pre、code、var、samp 与 kbd 的区别
pre、code、var、samp 与 kbd 这 5 个标签比较相似，它们之间的区别如下表所示。
| 标签 | 行内 / 块级 | 用途 |
|---|---|---|
| pre | 块级 | 用于表示代码块（一大段代码） |
| code | 行内 | 用于表示简短代码（一句代码） |
| var | 行内 | 用于表示数学表达式或编程中的变量名称 |
| samp | 行内 | 用于表示程序的输出结果 |
| kbd | 行内 | 用于表示用户输入（如快捷键）的内容 |
