代码文本标签 - <code>

什么是 <code> 标签？

<code> 标签用于表示计算机代码片段。浏览器通常会使用等宽字体（如Courier New）来显示代码文本，以提高代码的可读性。

基本语法

html 
<code>代码内容</code>

语义与用法

<code> 标签用于表示各种类型的计算机代码，主要用于以下场景：

  • 单行代码片段
  • 编程语言关键字
  • 函数名或变量名
  • 命令行指令
  • HTML标签本身
  • 计算机程序输出

<code> 标签具有明确的语义含义，不仅改变文本的外观，还传达了内容是计算机代码的信息。

示例：

html 
<!-- 编程语言关键字 -->
<p>在JavaScript中，使用 <code>function</code> 关键字定义函数。</p>

<!-- 函数名 -->
<p>使用 <code>console.log()</code> 可以在控制台输出信息。</p>

<!-- 命令行指令 -->
<p>运行 <code>npm install</code> 安装依赖包。</p>

<!-- HTML标签本身 -->
<p>使用 <code>&lt;div&gt;</code> 标签创建块级容器。</p>

<!-- 变量名 -->
<p>定义变量 <code>let count = 0;</code>。</p>

与 <pre> 标签的配合使用

对于多行代码，通常需要将 <code> 标签放在 <pre> 标签内部，这样可以保留代码的格式（包括空格和换行）：

html 
<pre>
<code>
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("World");
</code>
</pre>

特殊字符处理

在 <code> 标签中，需要对一些特殊字符进行转义，特别是HTML标签的尖括号：

原字符 转义字符
< &lt;
> &gt;
& &amp;
" &quot;
' &apos;

示例：

html 
<!-- 正确：转义HTML标签 -->
<p>使用 <code>&lt;a href="https://example.com"&gt;链接&lt;/a&gt;</code> 创建超链接。</p>

<!-- 错误：未转义HTML标签 -->
<p>使用 <code><a href="https://example.com">链接</a></code> 创建超链接。</p> <!-- 这会被解析为实际的链接 -->

全局属性

<code> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<p>
  <code class="javascript">function greet() {}</code>
</p>

<!-- 使用style自定义样式 -->
<p>
  <code style="background-color: #f5f5f5; padding: 2px 4px; border-radius: 3px;">console.log()</code>
</p>

<!-- 使用title提供额外信息 -->
<p>
  运行 <code title="安装所有依赖">npm install</code> 命令。
</p>

代码高亮

为了提高代码的可读性，通常会对代码进行语法高亮。这可以通过CSS或专门的代码高亮库（如Prism.js、Highlight.js）实现：

使用CSS实现简单高亮：

html 
<style>
.code-highlight {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
}

.keyword {
  color: blue;
  font-weight: bold;
}

.function {
  color: green;
}
</style>

<pre class="code-highlight">
<code>
<span class="keyword">function</span> <span class="function">greet</span>(name) {
  console.log(<span class="string">"Hello, "</span> + name + <span class="string">"!"</span>);
}
</code>
</pre>

最佳实践

  1. 用于代码内容：仅在显示计算机代码时使用 <code> 标签，不要用于其他等宽文本。

  2. 使用适当的转义：在代码中包含HTML特殊字符时，确保进行正确的转义。

  3. 多行代码使用 <pre>：对于多行代码，使用 <pre><code> 组合来保留格式。

  4. 提供语言信息：使用 class 属性指定代码的编程语言，便于语法高亮和理解。

  5. 保持代码可读性：使用适当的缩进和格式，提高代码的可读性。

好的示例：

html 
<!-- 单行代码 -->
<p>使用 <code>document.getElementById()</code> 获取DOM元素。</p>

<!-- 多行代码 -->
<pre><code class="html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;示例页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<!-- 命令行示例 -->
<p>在终端中运行：</p>
<pre><code class="bash">
cd my-project
npm start
</code></pre>

不好的示例：

html 
<!-- 用于非代码文本 -->
<p>请拨打 <code>123-456-7890</code> 联系我们。</p> <!-- 应该使用普通文本 -->

<!-- 未转义HTML标签 -->
<p>HTML文档的根标签是 <code><html></code>。</p> <!-- 会被解析为实际的html标签 -->

<!-- 多行代码未使用pre标签 -->
<p>代码示例：<code>function greet() {
  console.log("Hello!");
}</code></p> <!-- 格式会丢失 -->

浏览器兼容性

<code> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<code> 标签是HTML中用于表示计算机代码的语义化标签，它不仅使用等宽字体显示内容，还传达了文本是代码的信息。对于多行代码，应与 <pre> 标签配合使用以保留格式。正确使用 <code> 标签可以提高代码的可读性和语义化程度，帮助用户更好地理解代码内容。

最后更新：2026-02-07