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中，要显示代码，核心是使用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>标签来标记代码片段，而对于多行或需要保留格式的代码块，通常会结合<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>标签。这样不仅能让<a style=”color:#f60; text-decoration:underline;” title=”浏览器” href=”https://www.php.cn/zt/16180.html” target=”_blank”>浏览器</a>正确渲染代码，还能赋予代码语义，方便搜索引擎和辅助技术理解。</p><h3>解决方案</h3><p>在网页上展示代码，这事儿说起来简单，但真要做好，还是有点门道的。我们主要围绕<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>和<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>这两个标签来展开。</p><p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>标签的本意是用来表示计算机代码片段。它是一个行内元素（inline element），就像<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><strong></pre>

</div>或者<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><em></pre>

</div>一样，主要用于标记文本中的一小段代码，比如你在文章里提到一个变量名<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">let myVariable;</pre>

</div>，或者一个函数名<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">console.log()</pre>

</div>，这时候用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>就再合适不过了。它告诉浏览器和阅读器：“嘿，这玩意儿是代码！”</p><p>举个例子：<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">这是关于<code>console.log(“Hello”);</code>的一个小例子。</pre>

</div></p><p>但光有<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>还不够。如果你想显示一大段代码，比如一个完整的函数或者一段CSS规则，直接把它们扔进<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>里，你会发现所有的换行和空格都没了，代码会挤成一团。这就是<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>标签出场的时候了。</p><p><span>立即学习</span>“<a href=”https://pan.quark.cn/s/cb6835dc7db1″ style=”text-decoration: underline !important; color: blue; font-weight: bolder;” rel=”nofollow” target=”_blank”>前端免费学习笔记（深入）</a>”；</p><p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>标签是“preformatted text”的缩写，意思是预格式化文本。它最大的特点就是会保留文本中的空格、换行符以及其他空白字符，完全按照你在HTML源文件里写的那样显示出来。它是一个块级元素（block-level element）。</p><p>所以，当我们想展示一个多行代码块时，最常见的做法就是把<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>标签嵌套在<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>标签里面，形成<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code>…</code></pre>

</div>的结构。这样一来，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>

</div>负责保持代码的格式（换行、缩进），而<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>

</div>则赋予这段内容“代码”的语义。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:html;toolbar:false;’><pre class="brush:php;toolbar:false;"><code>function greet(name) { console.log(`Hello, ${name}!`);}greet(“World”);</code></pre>

</div><p>需要特别注意的是，如果你在代码中包含了HTML的特殊字符，比如<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>

</div>、<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">></pre>

</div>、<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">&</pre>

</div>，它们会被浏览器解析成HTML标签的一部分，而不是字面量。所以，这些字符需要进行HTML实体转义。</p><ul><li><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>

&amp;amp;lt;/div&amp;amp;gt; 转义为 &amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;<&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt; 转义为 &amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;>&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt; 转义为 &amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;/ul&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;比如，如果你想显示&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;div&amp;amp;gt;Hello&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;这段代码，你就得写成：&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=’brush:html;toolbar:false;’&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;code&amp;amp;gt;

&amp;amp;lt;/code&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;这确实有点麻烦，但为了确保代码能正确显示，这是必须的步骤。很多现代的编辑器或框架在处理代码展示时，都会自动帮你处理这些转义。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;h3&amp;amp;gt;&amp;amp;lt;a style=”color:#f60; text-decoration:underline;” title=”为什么” href=”https://www.php.cn/zt/92702.html” target=”_blank”&amp;amp;gt;为什么&amp;amp;lt;/a&amp;amp;gt;直接粘贴代码到HTML会出问题？&amp;amp;lt;/h3&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;很多人初学HTML时，可能会直接把从某个教程或者项目里复制的代码，原封不动地粘贴到&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;div&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;或者&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;标签里。结果一刷新浏览器，发现代码要么显示不全，要么格式乱七八糟，甚至把整个页面结构都搞崩了。这背后的原因其实很简单，就是HTML的解析机制。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;浏览器在解析HTML文档时，会把所有的内容都当作HTML结构来处理。当你粘贴一段包含&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;、&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;、&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;等特殊字符的代码时，浏览器会误以为这些是HTML标签的开始或结束，或者HTML实体引用。例如，如果你粘贴了&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;if (a &amp;amp;lt; b)&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;，浏览器看到&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;b&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;可能会认为这是一个新的HTML标签的开始，而不是一个小于号后面跟着字母b。这就会导致：&amp;amp;lt;/p&amp;amp;gt; &amp;amp;lt;div class=”aritcle_card”&amp;amp;gt; &amp;amp;lt;a class=”aritcle_card_img” href=”/ai/2403″&amp;amp;gt; &amp;amp;lt;img src=”https://img.php.cn/upload/ai_manual/001/246/273/176386827899819.png” alt=”Google Antigravity”&amp;amp;gt; &amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;div class=”aritcle_card_info”&amp;amp;gt; &amp;amp;lt;a href=”/ai/2403″&amp;amp;gt;Google Antigravity&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;p&amp;amp;gt;谷歌推出的AI原生IDE，AI智能体协作开发&amp;amp;lt;/p&amp;amp;gt; &amp;amp;lt;div class=””&amp;amp;gt; &amp;amp;lt;img src=”/static/images/card_xiazai.png” alt=”Google Antigravity”&amp;amp;gt; &amp;amp;lt;span&amp;amp;gt;277&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;a href=”/ai/2403″ class=”aritcle_card_btn”&amp;amp;gt; &amp;amp;lt;span&amp;amp;gt;查看详情&amp;amp;lt;/span&amp;amp;gt; &amp;amp;lt;img src=”/static/images/cardxiayige-3.png” alt=”Google Antigravity”&amp;amp;gt; &amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;ol&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;标签解析错误：&amp;amp;lt;/strong&amp;amp;gt; 代码中的尖括号可能被错误地解析为HTML标签，导致代码内容不显示或显示异常。比如&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;a&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;会被当作链接标签。&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;格式丢失：&amp;amp;lt;/strong&amp;amp;gt; HTML默认会忽略多个连续的空格和换行符（除非在&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;等少数标签内）。所以你代码里的缩进、空行都会丢失，变得一团糟。&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;安全性问题：&amp;amp;lt;/strong&amp;amp;gt; 如果代码中包含脚本标签&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;script&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;，浏览器可能会尝试执行这段脚本，这在某些情况下可能带来安全风险。&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;/ol&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;所以，为了让浏览器知道“这部分内容不是HTML结构，而是要原样显示的代码”，我们才需要用到&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;code&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;和&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;这样的语义化标签，并且对特殊字符进行转义。这不仅仅是为了美观，更是为了确保内容的正确解析和页面的稳定性。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;h3&amp;amp;gt;如何让代码块在网页上美观显示？&amp;amp;lt;/h3&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;代码显示出来只是第一步，让它看起来赏心悦目，甚至具备语法高亮，才是提升用户体验的关键。默认情况下，浏览器对&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;code&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;和&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;标签的样式非常朴素，通常就是等宽字体。但我们可以通过CSS来对其进行美化。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;一些常见的CSS美化思路：&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;ol&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;字体设置：&amp;amp;lt;/strong&amp;amp;gt; 代码通常使用等宽字体（monospace font），这样每个字符占据的宽度都一样，代码对齐起来会更整齐。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=’brush:css;toolbar:false;’&amp;amp;gt;pre code { font-family: ‘Consolas’, ‘Monaco’, ‘Andale Mono’, ‘Ubuntu Mono’, monospace; font-size: 0.9em; /* 稍微小一点，不那么占地方 */ line-height: 1.5; /* 行高，让代码不那么挤 */}&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;背景和边框：&amp;amp;lt;/strong&amp;amp;gt; 给代码块一个不同的背景色，或者加上边框，可以使其从周围的文本中凸显出来。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=’brush:css;toolbar:false;’&amp;amp;gt;pre { background-color: #f6f8fa; /* GitHub风格的浅灰色背景 */ border: 1px solid #e1e4e8; /* 细边框 */ border-radius: 6px; /* 圆角 */ padding: 1em; /* 内边距 */ overflow-x: auto; /* 当代码过长时，出现水平滚动条 */}&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;文本颜色：&amp;amp;lt;/strong&amp;amp;gt; 可以根据背景色调整文本颜色，确保可读性。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=’brush:css;toolbar:false;’&amp;amp;gt;pre code { color: #333; /* 深色字体 */}&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;语法高亮（概念性）：&amp;amp;lt;/strong&amp;amp;gt; 这是让代码块看起来专业且易读的关键。虽然HTML和CSS本身无法实现复杂的语法高亮（比如根据关键字、字符串、注释等显示不同颜色），但这是通过JavaScript库来实现的。像Prism.js、Highlight.js等都是非常流行的选择。它们的工作原理是解析代码文本，然后动态地给不同类型的代码元素添加特定的CSS类，我们再通过CSS为这些类定义颜色。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;举个概念性的例子（CSS部分由JS库动态生成）：&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=’brush:css;toolbar:false;’&amp;amp;gt;.token.keyword { color: #d73a49; } /* 关键字 */.token.string { color: #032f62; } /* 字符串 */.token.comment { color: #6a737d; } /* 注释 *//* … 更多规则 */&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;虽然这里不深入具体库的使用，但知道有这个方向，能让你的代码显示更上一层楼。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;/ol&amp;amp;gt;&amp;amp;lt;h3&amp;amp;gt;除了&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;标签，还有哪些相关HTML元素可以用？&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;/h3&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;HTML提供了一些语义化的标签，它们虽然不像&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;code&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;那样直接表示“代码”，但在某些与代码、输入输出相关的场景下，也能派上用场，让你的内容更精确、更有意义。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;ol&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;var&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt; 标签：&amp;amp;lt;/strong&amp;amp;gt; 用于表示程序或数学表达式中的变量。比如，在数学公式里，你可以写 &amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;E = mc&amp;amp;lt;sup&amp;amp;gt;&amp;amp;lt;var&amp;amp;gt;2&amp;amp;lt;/var&amp;amp;gt;&amp;amp;lt;/sup&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;。在代码示例中，如果你要特别指出一个变量，也可以用它。&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;请将username替换为你的用户名。&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;默认情况下，浏览器会把&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;var&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;标签里的内容显示为斜体。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;samp&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt; 标签：&amp;amp;lt;/strong&amp;amp;gt; 用于表示计算机程序的样本输出（sample output）。当你需要展示一段程序运行后的结果时，这个标签就很有用。&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;运行程序后，你将看到如下输出：&amp;amp;lt;samp&amp;amp;gt;Hello, World!&amp;amp;lt;/samp&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;samp&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;通常也会使用等宽字体显示。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;li&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;&amp;amp;lt;strong&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;kbd&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt; 标签：&amp;amp;lt;/strong&amp;amp;gt; 用于表示用户输入（keyboard input），通常是键盘输入。当你需要指导用户按下某个键或组合键时，这个标签非常直观。&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;按下&amp;amp;lt;kbd&amp;amp;gt;Ctrl&amp;amp;lt;/kbd&amp;amp;gt; + &amp;amp;lt;kbd&amp;amp;gt;C&amp;amp;lt;/kbd&amp;amp;gt;即可复制。&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;kbd&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

&amp;amp;lt;/div&amp;amp;gt;也通常会以等宽字体显示，并且一些浏览器或CSS框架会给它加上边框，使其看起来像一个按键。&amp;amp;lt;/p&amp;amp;gt;&amp;amp;lt;/li&amp;amp;gt;&amp;amp;lt;/ol&amp;amp;gt;&amp;amp;lt;p&amp;amp;gt;这些标签虽然不像&amp;amp;lt;div class=”code” style=”position:relative; padding:0px; margin:0px;”&amp;amp;gt;&amp;amp;lt;pre class=&amp;amp;quot;brush:php;toolbar:false;&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;code&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;

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

以上就是HTML如何设置代码显示？code标签的用法是什么？的详细内容，更多请关注创想鸟其它相关文章！