在 html 中展示代码最常用的是 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 标签。1. <code> 用于标记一小段内联代码，适合变量名、函数名或简单语句，不会保留换行和空格；2. <pre class="brush:php;toolbar:false"> 用于多行代码展示，保留原有格式包括空格和换行；3. 常将 <code> 嵌套在 <pre class="brush:php;toolbar:false"> 中，既保留格式又明确内容类型；4. 配合 css 可美化代码块，如添加背景色、边框、语法高亮等，以提升可读性。正确使用这两个标签并搭配样式，能有效提升网页中代码的展示效果。</p><p>@@##@@</p><p>在 HTML 中标记代码，最常用的就是 <code> 和 <pre class="brush:php;toolbar:false"> 这两个标签。它们各自有不同的用途，搭配使用可以更好地展示代码内容。</p><h2><code> 标签：标记一小段代码</h2><p><code> 标签用来表示一段计算机代码，适合用在内联文本中，比如写一个变量名、函数名或者简单的语句。</p><p><strong>用法示例：</strong></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><pre class='brush:html;toolbar:false;'><p>使用 <code>alert("Hello")</code> 可以弹出提示框。</p></pre><div class="contentsignin"></div></div><p><a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>会默认将 <code> 里的内容显示为等宽字体（比如 Courier），但不会保留换行和空格。所以如果是一整段多行的代码，只用 <code> 就不太合适了。
标签：保留格式的预格式化文本</h2><p>如果你有一段多行代码，想保持原来的缩进和换行，那就需要用到 <pre class="brush:php;toolbar:false"> 标签。它会原样显示内容，包括空格和换行符。</p><p><strong>基本用法：</strong></p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false"> function hello() { console.log("Hello World"); }
标签：保留格式的预格式化文本</h2><p>如果你有一段多行代码，想保持原来的缩进和换行，那就需要用到 <pre class="brush:php;toolbar:false"> 标签。它会原样显示内容，包括空格和换行符。</p><p><strong>基本用法：</strong></p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false"> function hello() { console.log("Hello World"); }
这样写的话，浏览器就会按照你在 HTML 文件里写的格式来显示这段代码。
但通常我们会把 嵌套在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 里面一起使用，这样既能保留格式，又能明确这段内容是代码：</p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false"><code> function hello() { console.log("Hello World"); } </code></pre><div class="contentsignin"></div></div><p>这样做不仅结构清晰，也有利于 SEO 和可访问性。</p> <h2>搭配 CSS 更好地展示代码块</h2> <p>虽然 <code> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 已经能很好地显示代码了，但如果想让代码看起来更美观，比如加个背景色、边框或语法高亮，就需要配合 CSS 使用。</p><p><strong>简单样式示例：</strong></p><pre class='brush:css;toolbar:false;'>code { background-color: #f4f4f4; padding: 2px 4px; border-radius: 4px; } pre { background-color: #2d2d2d; color: #fff; padding: 10px; overflow-x: auto; }</pre><div class="contentsignin"></div></div><p>加上这些样式后，代码区域会更有“代码感”，也更容易阅读。</p> <p>基本上就这些。用好 <code> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">，再配上点 CSS，就能在网页上清楚地展示代码内容了。</pre><div class="contentsignin"></div></div>
