HTML <code> 标签详解：功能与应用场景

HTML（HyperText Markup Language）是构建网页的基础，而其中的 <code> 标签是用于表示计算机代码的元素。本文将详细介绍 <code> 标签的用途、属性以及在实际应用中的注意事项。

HTML <code> 标签的常见问题解答

1. <code> 标签与 <pre> 标签有什么区别？

<code> 标签用于表示一小段代码，而 <pre> 标签则用于表示大段代码或预格式化的文本。具体来说：

• <code> 标签中的代码会保留原有的字体样式，如等宽字体。
• <pre> 标签中的文本会保留空白字符，并且文本的显示格式与在文本编辑器中看到的格式相同。
• <code> 标签通常用于突出显示代码中的关键字或变量，而 <pre> 标签则用于展示整个代码块。

2. 如何在 <code> 标签中设置代码高亮？

要实现代码高亮，可以使用一些在线工具或代码高亮库，如 highlight.js。以下是一个简单的示例：

  <script src="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  <pre><code>console.log("Hello, world!");</code></pre>

在这个例子中，highlight.js 库会自动对 <code> 标签中的代码进行高亮显示。

3. <code> 标签是否支持自定义样式？

是的，您可以通过 CSS 对 <code> 标签进行样式自定义。以下是一个简单的 CSS 样式示例：

  <style>
    code {
      background-color: f4f4f4;
      border: 1px solid ccc;
      padding: 2px 4px;
      font-family: monospace;