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

<blockquote>要正确在网页显示代码，需用标签表示代码片段，结合标签保留格式，并对、&等字符进行HTML实体转义，避免被浏览器误解析为HTML结构。用于行内代码，如console.log()；多行代码则嵌套于中，确保换行与缩进不丢失。直接粘贴代码至普通标签如会导致格式混乱、标签解析错误或安全风险，因浏览器会尝试解析代码中的尖括号为HTML标签。为提升可读性，可通过CSS设置等宽字体、背景色、边框及滚动条，实现基础美化。进一步可引入Prism.js或Highlight.js等工具实现语法高亮。此外，HTML还提供（变量）、（程序输出）、（用户输入）等语义化标签，用于精准表达技术内容，增强文档结构与可访问性。</blockquote>
<p><img src=”https://img.php.cn/upload/article/001/221/864/175518096493987.png” alt=”html如何设置代码显示？code标签的用法是什么？”></p>
<p>在HTML中，要显示代码，核心是使用<pre class="brush:php;toolbar:false"><code></pre>标签来标记代码片段，而对于多行或需要保留格式的代码块，通常会结合<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>标签。这样不仅能让<a title=”浏览器” href=”https://www.php.cn/zt/16180.html” target=”_blank”>浏览器</a>正确渲染代码，还能赋予代码语义，方便搜索引擎和辅助技术理解。</p>
<h3>解决方案</h3>
<p>在网页上展示代码，这事儿说起来简单，但真要做好，还是有点门道的。我们主要围绕<pre class="brush:php;toolbar:false"><code></pre>和<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>这两个标签来展开。</p>
<p><pre class="brush:php;toolbar:false"><code></pre>标签的本意是用来表示计算机代码片段。它是一个行内元素（inline element），就像<pre class="brush:php;toolbar:false"><strong></pre>或者<pre class="brush:php;toolbar:false"><em></pre>一样，主要用于标记文本中的一小段代码，比如你在文章里提到一个变量名<pre class="brush:php;toolbar:false">let myVariable;</pre>，或者一个函数名<pre class="brush:php;toolbar:false">console.log()</pre>，这时候用<pre class="brush:php;toolbar:false"><code></pre>就再合适不过了。它告诉浏览器和阅读器：“嘿，这玩意儿是代码！”</p>
<p>举个例子：
<pre class="brush:php;toolbar:false">这是关于<code>console.log(“Hello”);</code>的一个小例子。</pre></p>
<p>但光有<pre class="brush:php;toolbar:false"><code></pre>还不够。如果你想显示一大段代码，比如一个完整的函数或者一段CSS规则，直接把它们扔进<pre class="brush:php;toolbar:false"><code></pre>里，你会发现所有的换行和空格都没了，代码会挤成一团。这就是<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>标签出场的时候了。</p>
<p><span>立即学习</span>“<a href=”https://pan.quark.cn/s/cb6835dc7db1″ rel=”nofollow” target=”_blank”>前端免费学习笔记（深入）</a>”；</p>
<p><pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>标签是“preformatted text”的缩写，意思是预格式化文本。它最大的特点就是会保留文本中的空格、换行符以及其他空白字符，完全按照你在HTML源文件里写的那样显示出来。它是一个块级元素（block-level element）。</p>
<p>所以，当我们想展示一个多行代码块时，最常见的做法就是把<pre class="brush:php;toolbar:false"><code></pre>标签嵌套在<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>标签里面，形成<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>…</code></pre>的结构。这样一来，<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>负责保持代码的格式（换行、缩进），而<pre class="brush:php;toolbar:false"><code></pre>则赋予这段内容“代码”的语义。</p><pre class=’brush:html;toolbar:false;’><pre class="brush:php;toolbar:false"><code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet(“World”);
</code></pre><p>需要特别注意的是，如果你在代码中包含了HTML的特殊字符，比如<pre class="brush:php;toolbar:false"><</pre>、<pre class="brush:php;toolbar:false">></pre>、<pre class="brush:php;toolbar:false">&</pre>，它们会被浏览器解析成HTML标签的一部分，而不是字面量。所以，这些字符需要进行HTML实体转义。</p>
<ul>
<li><pre class="brush:php;toolbar:false"><</pre> 转义为 <pre class="brush:php;toolbar:false"><</pre></li>
<li><pre class="brush:php;toolbar:false">></pre> 转义为 <pre class="brush:php;toolbar:false">></pre></li>
<li><pre class="brush:php;toolbar:false">&</pre> 转义为 <pre class="brush:php;toolbar:false">&</pre></li>
</ul>
<p>比如，如果你想显示<pre class="brush:php;toolbar:false"><div>Hello</div></pre>这段代码，你就得写成：</p><pre class=’brush:html;toolbar:false;’><pre class="brush:php;toolbar:false"><code>
<div>Hello</div>
</code></pre><p>这确实有点麻烦，但为了确保代码能正确显示，这是必须的步骤。很多现代的编辑器或框架在处理代码展示时，都会自动帮你处理这些转义。</p>
<h3>
<a title=”为什么” href=”https://www.php.cn/zt/92702.html” target=”_blank”>为什么</a>直接粘贴代码到HTML会出问题？</h3>
<p>很多人初学HTML时，可能会直接把从某个教程或者项目里复制的代码，原封不动地粘贴到<pre class="brush:php;toolbar:false"><div></pre>或者<pre class="brush:php;toolbar:false"><p></pre>标签里。结果一刷新浏览器，发现代码要么显示不全，要么格式乱七八糟，甚至把整个页面结构都搞崩了。这背后的原因其实很简单，就是HTML的解析机制。</p>
<p>浏览器在解析HTML文档时，会把所有的内容都当作HTML结构来处理。当你粘贴一段包含<pre class="brush:php;toolbar:false"><</pre>、<pre class="brush:php;toolbar:false">></pre>、<pre class="brush:php;toolbar:false">&</pre>等特殊字符的代码时，浏览器会误以为这些是HTML标签的开始或结束，或者HTML实体引用。例如，如果你粘贴了<pre class="brush:php;toolbar:false">if (a < b)</pre>，浏览器看到<pre class="brush:php;toolbar:false"><b</pre>可能会认为这是一个新的HTML标签的开始，而不是一个小于号后面跟着字母b。这就会导致：</p>
<ol>
<li>
<strong>标签解析错误：</strong> 代码中的尖括号可能被错误地解析为HTML标签，导致代码内容不显示或显示异常。比如<pre class="brush:php;toolbar:false"><a></pre>会被当作链接标签。</li>
<li>
<strong>格式丢失：</strong> HTML默认会忽略多个连续的空格和换行符（除非在<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>等少数标签内）。所以你代码里的缩进、空行都会丢失，变得一团糟。</li>
<li>
<strong>安全性问题：</strong> 如果代码中包含脚本标签<pre class="brush:php;toolbar:false"><script></pre>，浏览器可能会尝试执行这段脚本，这在某些情况下可能带来安全风险。</li>
</ol>
<p>所以，为了让浏览器知道“这部分内容不是HTML结构，而是要原样显示的代码”，我们才需要用到<pre class="brush:php;toolbar:false"><code></pre>和<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>这样的语义化标签，并且对特殊字符进行转义。这不仅仅是为了美观，更是为了确保内容的正确解析和页面的稳定性。</p>
<h3>如何让代码块在网页上美观显示？</h3>
<p>代码显示出来只是第一步，让它看起来赏心悦目，甚至具备语法高亮，才是提升用户体验的关键。默认情况下，浏览器对<pre class="brush:php;toolbar:false"><code></pre>和<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"></pre>标签的样式非常朴素，通常就是等宽字体。但我们可以通过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; /* 行高，让代码不那么挤 */
}</pre></li>
<li>
<p><strong>背景和边框：</strong> 给代码块一个不同的背景色，或者加上边框，可以使其从周围的文本中凸显出来。</p><pre class=’brush:css;toolbar:false;’>pre {
background-color: #f6f8fa; /* GitHub风格的浅灰色背景 */
border: 1px solid #e1e4e8; /* 细边框 */
border-radius: 6px; /* 圆角 */
padding: 1em; /* 内边距 */
overflow-x: auto; /* 当代码过长时，出现水平滚动条 */
}</pre></li>
<li>
<p><strong>文本颜色：</strong> 可以根据背景色调整文本颜色，确保可读性。</p><pre class=’brush:css;toolbar:false;’>pre code {
color: #333; /* 深色字体 */
}</pre></li>
<li>
<p><strong>语法高亮（概念性）：</strong> 这是让代码块看起来专业且易读的关键。虽然HTML和CSS本身无法实现复杂的语法高亮（比如根据关键字、字符串、注释等显示不同颜色），但这是通过JavaScript库来实现的。像Prism.js、Highlight.js等都是非常流行的选择。它们的工作原理是解析代码文本，然后动态地给不同类型的代码元素添加特定的CSS类，我们再通过CSS为这些类定义颜色。</p>
<p>举个概念性的例子（CSS部分由JS库动态生成）：</p><pre class=’brush:css;toolbar:false;’>.token.keyword { color: #d73a49; } /* 关键字 */
.token.string { color: #032f62; } /* 字符串 */
.token.comment { color: #6a737d; } /* 注释 */
/* … 更多规则 */</pre><p>虽然这里不深入具体库的使用，但知道有这个方向，能让你的代码显示更上一层楼。</p>
</li>
</ol>
<h3>除了<pre class="brush:php;toolbar:false">标签，还有哪些相关HTML元素可以用？</pre>
</h3>
<p>HTML提供了一些语义化的标签，它们虽然不像<pre class="brush:php;toolbar:false"><code></pre>那样直接表示“代码”，但在某些与代码、输入输出相关的场景下，也能派上用场，让你的内容更精确、更有意义。</p>
<ol>
<li><p><strong><pre class="brush:php;toolbar:false"><var></pre> 标签：</strong> 用于表示程序或数学表达式中的变量。
比如，在数学公式里，你可以写 <pre class="brush:php;toolbar:false">E = mc<sup><var>2</var></sup></pre>。在代码示例中，如果你要特别指出一个变量，也可以用它。
<pre class="brush:php;toolbar:false">请将<var>username</var>替换为你的用户名。</pre>
默认情况下，浏览器会把<pre class="brush:php;toolbar:false"><var></pre>标签里的内容显示为斜体。</p></li>
<li><p><strong><pre class="brush:php;toolbar:false"><samp></pre> 标签：</strong> 用于表示计算机程序的样本输出（sample output）。
当你需要展示一段程序运行后的结果时，这个标签就很有用。
<pre class="brush:php;toolbar:false">运行程序后，你将看到如下输出：<samp>Hello, World!</samp></pre><pre class="brush:php;toolbar:false"><samp></pre>通常也会使用等宽字体显示。</p></li>
<li><p><strong><pre class="brush:php;toolbar:false"><kbd></pre> 标签：</strong> 用于表示用户输入（keyboard input），通常是键盘输入。
当你需要指导用户按下某个键或组合键时，这个标签非常直观。
<pre class="brush:php;toolbar:false">按下<kbd>Ctrl</kbd> + <kbd>C</kbd>即可复制。</pre><pre class="brush:php;toolbar:false"><kbd></pre>也通常会以等宽字体显示，并且一些浏览器或CSS框架会给它加上边框，使其看起来像一个按键。</p></li>
</ol>
<p>这些标签虽然不像<pre class="brush:php;toolbar:false"><code></pre>那样频繁地用于展示大段代码，但在特定的语境下，它们能更准确地表达内容的语义。比如，在技术文档中，区分一个变量名、一段程序输出和一个键盘按键，能让读者更快地理解你的意图。用对这些标签，不仅仅是让HTML更“规范”，更是让信息传递更高效、更准确，也算是对阅读体验的一种细致的打磨。</p>