HTML如何设置代码显示？code标签的用法是什么？

要正确在网页显示代码，需用标签表示代码片段，结合标签保留格式，并对、&等字符进行html实体转义，避免被浏览器误解析为html结构。用于行内代码，如console.log()；多行代码则嵌套于中，确保换行与缩进不丢失。直接粘贴代码至普通标签如会导致格式混乱、标签解析错误或安全风险，因浏览器会尝试解析代码中的尖括号为html标签。为提升可读性，可通过css设置等宽字体、背景色、边框及滚动条，实现基础美化。进一步可引入prism.js或highlight.js等工具实现语法高亮。此外，html还提供（变量）、（程序输出）、（用户输入）等语义化标签，用于精准表达技术内容，增强文档结构与可访问性。

在HTML中，要显示代码，核心是使用

<code>

<pre class="brush:php;toolbar:false;">

解决方案

在网页上展示代码，这事儿说起来简单，但真要做好，还是有点门道的。我们主要围绕

<code>

<pre class="brush:php;toolbar:false;">

<code>

<strong>

<em>

let myVariable;

console.log()

<code>

举个例子：

这是关于<code>console.log("Hello");</code>的一个小例子。

但光有

<code>

<code>

<pre class="brush:php;toolbar:false;">

立即学习“前端免费学习笔记（深入）”；

<pre class="brush:php;toolbar:false;">

所以，当我们想展示一个多行代码块时，最常见的做法就是把

<code>

<pre class="brush:php;toolbar:false;">

<pre class="brush:php;toolbar:false;"><code>...</code>

<pre class="brush:php;toolbar:false;">

<code>

<pre class="brush:php;toolbar:false;"><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
</code>

需要特别注意的是，如果你在代码中包含了HTML的特殊字符，比如

<

>

&

• <

  转义为

  <

• >

  转义为

  >

• &

  转义为

  &

比如，如果你想显示

<div>Hello</div>

<pre class="brush:php;toolbar:false;"><code>
<div>Hello</div>
</code>

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

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

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

<div>

<p>

浏览器在解析HTML文档时，会把所有的内容都当作HTML结构来处理。当你粘贴一段包含

<

>

&

if (a < b)

<b

MindShow

MindShow官网 | AI生成PPT，快速演示你的想法

下载

1. 标签解析错误： 代码中的尖括号可能被错误地解析为HTML标签，导致代码内容不显示或显示异常。比如

   <a>

   会被当作链接标签。
2. 格式丢失： HTML默认会忽略多个连续的空格和换行符（除非在

   <pre class="brush:php;toolbar:false;">

   等少数标签内）。所以你代码里的缩进、空行都会丢失，变得一团糟。
3. 安全性问题： 如果代码中包含脚本标签

   <script>

   ，浏览器可能会尝试执行这段脚本，这在某些情况下可能带来安全风险。

所以，为了让浏览器知道“这部分内容不是HTML结构，而是要原样显示的代码”，我们才需要用到

<code>

<pre class="brush:php;toolbar:false;">

如何让代码块在网页上美观显示？

代码显示出来只是第一步，让它看起来赏心悦目，甚至具备语法高亮，才是提升用户体验的关键。默认情况下，浏览器对

<code>

<pre class="brush:php;toolbar:false;">

一些常见的CSS美化思路：

1. 字体设置： 代码通常使用等宽字体（monospace font），这样每个字符占据的宽度都一样，代码对齐起来会更整齐。

   pre code {
     font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 0.9em; /* 稍微小一点，不那么占地方 */
     line-height: 1.5; /* 行高，让代码不那么挤 */
   }

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

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

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

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

4. 语法高亮（概念性）： 这是让代码块看起来专业且易读的关键。虽然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提供了一些语义化的标签，它们虽然不像

<code>

1. <var>

   标签： 用于表示程序或数学表达式中的变量。 比如，在数学公式里，你可以写

   E = mc<sup><var>2</var></sup>

   。在代码示例中，如果你要特别指出一个变量，也可以用它。

   请将<var>username</var>替换为你的用户名。

   默认情况下，浏览器会把

   <var>

   标签里的内容显示为斜体。

2. <samp>

   标签： 用于表示计算机程序的样本输出（sample output）。 当你需要展示一段程序运行后的结果时，这个标签就很有用。

   运行程序后，你将看到如下输出：<samp>Hello, World!</samp>

   <samp>

   通常也会使用等宽字体显示。

3. <kbd>

   标签： 用于表示用户输入（keyboard input），通常是键盘输入。 当你需要指导用户按下某个键或组合键时，这个标签非常直观。

   按下<kbd>Ctrl</kbd> + <kbd>C</kbd>即可复制。

   <kbd>

   也通常会以等宽字体显示，并且一些浏览器或CSS框架会给它加上边框，使其看起来像一个按键。

这些标签虽然不像

<code>