在 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>
