HTML code 语法
在 HTML 中，code 是一个语义化标签，用于表示一小段计算机代码，例如函数名、变量、命令、文件路径等内容。
code 标签的目的是从语义上明确指出其内容是一段计算机代码，而不是普通文本。
语法：
<code>简短代码</code>说明：
code 标签会保留代码的格式（如空格等），并使其以等宽字体显示，以便与周围文本区分开来。
虽然浏览器通常会将 code 标签内的文本以 “等宽字体（monospaced font）” 显示，但其主要价值在于语义化，以帮助搜索引擎和辅助技术理解页面内容。
code 标签主要用于以下 2 个方面。
- 表示行内代码：如果要表示简短的、嵌入在文本段落中的行内代码片段，可以直接使用 code 标签。
- 表示代码块：如果要表示多行代码或包含复杂格式的代码块，通常会将 code 标签嵌套在 pre 标签内部。pre 标签会保留代码的原始格式（包括空格和换行），而 code 则提供了语义化的标识。
HTML code 摘要
| 属于 | HTML 语义化 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML code 示例
接下来，我们通过几个简单的例子来讲解一下 HTML code 标签是如何使用的。
示例 1：code 用于表示行内代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><code>font-weight:bold;</code>这句代码用于实现文本的加粗效果。</p>
</body>
</html>页面效果如下图所示。
分析：
code 标签的默认样式并不是十分美观，在实际项目开发中，我们一般会自定义 code 标签的样式。code 标签非常有用，像绿叶网上面的行内代码效果，也是使用它来实现的，如下图所示。
示例 2：code 用于表示代码块
<!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 用于提供语义化的标识。
code 标签非常有用，像绿叶网上面的代码块效果，也是使用 pre 标签结合 code 标签来实现的，如下图所示。
pre、code、var、samp 与 kbd 的区别
pre、code、var、samp 与 kbd 这 5 个标签比较相似，它们之间的区别如下表所示。
| 标签 | 行内 / 块级 | 用途 |
|---|---|---|
| pre | 块级 | 用于表示代码块（一大段代码） |
| code | 行内 | 用于表示简短代码（一句代码） |
| var | 行内 | 用于表示数学表达式或编程中的变量名称 |
| samp | 行内 | 用于表示程序的输出结果 |
| kbd | 行内 | 用于表示用户输入（如快捷键）的内容 |
