HTML中code标签使用教程

想在HTML网页上优雅地展示代码片段？``标签是关键！本文深入解析了``标签的基本用法，并结合`

`标签，教你如何保留代码格式，避免浏览器错误解析。通过CSS样式美化，让代码块更醒目易读，甚至实现语法高亮。此外，还介绍了`<samp>`、`<kbd>`等语义化标签，用于精确表达程序输出和用户输入，提升文档结构与可访问性。掌握这些技巧，让你的技术文档更专业、更易懂，显著提升用户体验，并让搜索引擎更好地理解你的页面内容。
</kbd></samp>

要正确在网页显示代码，需用标签表示代码片段，结合

标签保留格式，并对<、>、&等字符进行HTML实体转义，避免被浏览器误解析为HTML结构。<code>用于行内代码，如console.log()；多行代码则嵌套于<pre><code>中，确保换行与缩进不丢失。直接粘贴代码至普通标签如<div>会导致格式混乱、标签解析错误或安全风险，因浏览器会尝试解析代码中的尖括号为HTML标签。为提升可读性，可通过CSS设置等宽字体、背景色、边框及滚动条，实现基础美化。进一步可引入Prism.js或Highlight.js等工具实现语法高亮。此外，HTML还提供<var>（变量）、<samp>（程序输出）、<kbd>（用户输入）等语义化标签，用于精准表达技术内容，增强文档结构与可访问性。</p></blockquote><p><img src="/uploads/20250915/175792969368c7e0dd11504.png" alt="HTML如何设置代码显示？code标签的用法是什么？"></p><p>在HTML中，要显示代码，核心是使用<code><code></code>标签来标记代码片段，而对于多行或需要保留格式的代码块，通常会结合<code><pre></code>标签。这样不仅能让浏览器正确渲染代码，还能赋予代码语义，方便搜索引擎和辅助技术理解。</p><h3>解决方案</h3><p>在网页上展示代码，这事儿说起来简单，但真要做好，还是有点门道的。我们主要围绕<code><code></code>和<code><pre></code>这两个标签来展开。</p><p><code><code></code>标签的本意是用来表示计算机代码片段。它是一个行内元素（inline element），就像<code><strong></code>或者<code><em></code>一样，主要用于标记文本中的一小段代码，比如你在文章里提到一个变量名<code>let myVariable;</code>，或者一个函数名<code>console.log()</code>，这时候用<code><code></code>就再合适不过了。它告诉浏览器和阅读器：“嘿，这玩意儿是代码！”</p><p>举个例子：
<code>这是关于<code>console.log("Hello");</code>的一个小例子。</code></p><p>但光有<code><code></code>还不够。如果你想显示一大段代码，比如一个完整的函数或者一段CSS规则，直接把它们扔进<code><code></code>里，你会发现所有的换行和空格都没了，代码会挤成一团。这就是<code><pre></code>标签出场的时候了。</p><p><code><pre></code>标签是“preformatted text”的缩写，意思是预格式化文本。它最大的特点就是会保留文本中的空格、换行符以及其他空白字符，完全按照你在HTML源文件里写的那样显示出来。它是一个块级元素（block-level element）。</p><p>所以，当我们想展示一个多行代码块时，最常见的做法就是把<code><code></code>标签嵌套在<code><pre></code>标签里面，形成<code><pre><code>...</code>

的结构。这样一来，

</code>负责保持代码的格式（换行、缩进），而<code><code></code>则赋予这段内容“代码”的语义。</p><pre class="brush:html;toolbar:false;"><pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
</code>

需要特别注意的是，如果你在代码中包含了HTML的特殊字符，比如<、>、&，它们会被浏览器解析成HTML标签的一部分，而不是字面量。所以，这些字符需要进行HTML实体转义。

• < 转义为 <
• > 转义为 >
• & 转义为 &

比如，如果你想显示

Hello

这段代码，你就得写成：

<pre><code>
&lt;div&gt;Hello&lt;/div&gt;
</code>

这确实有点麻烦，但为了确保代码能正确显示，这是必须的步骤。很多现代的编辑器或框架在处理代码展示时，都会自动帮你处理这些转义。

为什么直接粘贴代码到HTML会出问题？

很多人初学HTML时，可能会直接把从某个教程或者项目里复制的代码，原封不动地粘贴到

或者

标签里。结果一刷新浏览器，发现代码要么显示不全，要么格式乱七八糟，甚至把整个页面结构都搞崩了。这背后的原因其实很简单，就是HTML的解析机制。

浏览器在解析HTML文档时，会把所有的内容都当作HTML结构来处理。当你粘贴一段包含<、>、&等特殊字符的代码时，浏览器会误以为这些是HTML标签的开始或结束，或者HTML实体引用。例如，如果你粘贴了if (a < b)，浏览器看到可能会认为这是一个新的HTML标签的开始，而不是一个小于号后面跟着字母b。这就会导致：

1. 标签解析错误： 代码中的尖括号可能被错误地解析为HTML标签，导致代码内容不显示或显示异常。比如会被当作链接标签。
2. 格式丢失： HTML默认会忽略多个连续的空格和换行符（除非在

   </code>等少数标签内）。所以你代码里的缩进、空行都会丢失，变得一团糟。</li><li><strong>安全性问题：</strong> 如果代码中包含脚本标签<code><script></code>，浏览器可能会尝试执行这段脚本，这在某些情况下可能带来安全风险。</li></ol><p>所以，为了让浏览器知道“这部分内容不是HTML结构，而是要原样显示的代码”，我们才需要用到<code><code></code>和<code><pre></code>这样的语义化标签，并且对特殊字符进行转义。这不仅仅是为了美观，更是为了确保内容的正确解析和页面的稳定性。</p><h3>如何让代码块在网页上美观显示？</h3><p>代码显示出来只是第一步，让它看起来赏心悦目，甚至具备语法高亮，才是提升用户体验的关键。默认情况下，浏览器对<code><code></code>和<code><pre></code>标签的样式非常朴素，通常就是等宽字体。但我们可以通过CSS来对其进行美化。</p><p>一些常见的CSS美化思路：</p><ol><li><p><strong>字体设置：</strong> 代码通常使用等宽字体（monospace font），这样每个字符占据的宽度都一样，代码对齐起来会更整齐。</p><pre class="brush:css;toolbar:false;">pre code {
     font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 0.9em; /* 稍微小一点，不那么占地方 */
     line-height: 1.5; /* 行高，让代码不那么挤 */
   }

3. 背景和边框： 给代码块一个不同的背景色，或者加上边框，可以使其从周围的文本中凸显出来。

   pre {
     background-color: #f6f8fa; /* GitHub风格的浅灰色背景 */
     border: 1px solid #e1e4e8; /* 细边框 */
     border-radius: 6px; /* 圆角 */
     padding: 1em; /* 内边距 */
     overflow-x: auto; /* 当代码过长时，出现水平滚动条 */
   }

4. 文本颜色： 可以根据背景色调整文本颜色，确保可读性。

   pre code {
     color: #333; /* 深色字体 */
   }

5. 语法高亮（概念性）： 这是让代码块看起来专业且易读的关键。虽然HTML和CSS本身无法实现复杂的语法高亮（比如根据关键字、字符串、注释等显示不同颜色），但这是通过JavaScript库来实现的。像Prism.js、Highlight.js等都是非常流行的选择。它们的工作原理是解析代码文本，然后动态地给不同类型的代码元素添加特定的CSS类，我们再通过CSS为这些类定义颜色。

   举个概念性的例子（CSS部分由JS库动态生成）：

   .token.keyword { color: #d73a49; } /* 关键字 */
   .token.string { color: #032f62; } /* 字符串 */
   .token.comment { color: #6a737d; } /* 注释 */
   /* ... 更多规则 */

   虽然这里不深入具体库的使用，但知道有这个方向，能让你的代码显示更上一层楼。

除了标签，还有哪些相关HTML元素可以用？

HTML提供了一些语义化的标签，它们虽然不像那样直接表示“代码”，但在某些与代码、输入输出相关的场景下，也能派上用场，让你的内容更精确、更有意义。

1. 标签： 用于表示程序或数学表达式中的变量。 比如，在数学公式里，你可以写 E = mc2。在代码示例中，如果你要特别指出一个变量，也可以用它。 请将<var>username</var>替换为你的用户名。 默认情况下，浏览器会把标签里的内容显示为斜体。

2. 标签： 用于表示计算机程序的样本输出（sample output）。 当你需要展示一段程序运行后的结果时，这个标签就很有用。 运行程序后，你将看到如下输出：Hello, World!通常也会使用等宽字体显示。

3. 标签： 用于表示用户输入（keyboard input），通常是键盘输入。 当你需要指导用户按下某个键或组合键时，这个标签非常直观。 按下Ctrl + C即可复制。也通常会以等宽字体显示，并且一些浏览器或CSS框架会给它加上边框，使其看起来像一个按键。

这些标签虽然不像那样频繁地用于展示大段代码，但在特定的语境下，它们能更准确地表达内容的语义。比如，在技术文档中，区分一个变量名、一段程序输出和一个键盘按键，能让读者更快地理解你的意图。用对这些标签，不仅仅是让HTML更“规范”，更是让信息传递更高效、更准确，也算是对阅读体验的一种细致的打磨。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中code标签使用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。

退款后如何避免被商家拉黑

上一篇

退款后如何避免被商家拉黑

下一篇

Java对象数组引用传递详解