HTML如何标记代码？code和pre标签怎么用？

在 html 中展示代码最常用的是 和 <pre class="brush:php;toolbar:false;"> 标签。1. &lt;code&gt; 用于标记一小段内联代码，适合变量名、函数名或简单语句，不会保留换行和空格；2. &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 用于多行代码展示，保留原有格式包括空格和换行；3. 常将 &lt;code&gt; 嵌套在 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; 中，既保留格式又明确内容类型；4. 配合 css 可美化代码块，如添加背景色、边框、语法高亮等，以提升可读性。正确使用这两个标签并搭配样式，能有效提升网页中代码的展示效果。&lt;/p&gt;&lt;p&gt;@@##@@&lt;/p&gt;&lt;p&gt;在 HTML 中标记代码，最常用的就是 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 和 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 这两个标签。它们各自有不同的用途，搭配使用可以更好地展示代码内容。&lt;/p&gt;&lt;h2&gt;&lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签：标记一小段代码&lt;/h2&gt;&lt;p&gt;&lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签用来表示一段计算机代码，适合用在内联文本中，比如写一个变量名、函数名或者简单的语句。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;用法示例：&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;p&gt;使用 &lt;code&gt;alert(&quot;Hello&quot;)&lt;/code&gt; 可以弹出提示框。&lt;/p&gt;</pre><p>浏览器会默认将 <code><code> 里的内容显示为等宽字体（比如 Courier），但不会保留换行和空格。所以如果是一整段多行的代码，只用 <code> 就不太合适了。

<pre class="brush:php;toolbar:false;">&lt;/code&gt; 标签：保留格式的预格式化文本&lt;/h2&gt;&lt;p&gt;如果你有一段多行代码，想保持原来的缩进和换行，那就需要用到 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 标签。它会原样显示内容，包括空格和换行符。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/762&quot; title=&quot;百宝箱&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175679962759206.png&quot; alt=&quot;百宝箱&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/762&quot; title=&quot;百宝箱&quot;&gt;百宝箱&lt;/a&gt; &lt;p&gt;百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/762&quot; title=&quot;百宝箱&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;strong&gt;基本用法：&lt;/strong&gt;&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; function hello() { console.log(&quot;Hello World&quot;); } </pre><p>这样写的话，浏览器就会按照你在 HTML 文件里写的格式来显示这段代码。</p> <p>但通常我们会把 <code><code> 嵌套在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 里面一起使用，这样既能保留格式，又能明确这段内容是代码：&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt; function hello() { console.log(&quot;Hello World&quot;); } &lt;/code&gt;</pre><p>这样做不仅结构清晰，也有利于 SEO 和可访问性。</p> <h2>搭配 CSS 更好地展示代码块</h2> <p>虽然 <code><code> 和 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 已经能很好地显示代码了，但如果想让代码看起来更美观，比如加个背景色、边框或语法高亮，就需要配合 CSS 使用。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;简单样式示例：&lt;/strong&gt;&lt;/p&gt;&lt;pre class='brush:css;toolbar:false;'&gt;code { background-color: #f4f4f4; padding: 2px 4px; border-radius: 4px; } pre { background-color: #2d2d2d; color: #fff; padding: 10px; overflow-x: auto; }</pre><p>加上这些样式后，代码区域会更有“代码感”，也更容易阅读。</p> <p>基本上就这些。用好 <code><code> 和 <pre class="brush:php;toolbar:false;"></pre>，再配上点 CSS，就能在网页上清楚地展示代码内容了。