html怎么插入HTML代碼？代碼嵌入技巧指南

要在網(wǎng)頁(yè)中展示html代碼需先用

和<code>標(biāo)簽保留格式并轉(zhuǎn)義特殊字符，其次通過(guò)手動(dòng)轉(zhuǎn)義或JavaScript防止瀏覽器解析執(zhí)行，最后可引入prism.JS等高亮庫(kù)提升可讀性。具體步驟為：1. 使用<pre class="brush:php;toolbar:false">保留格式、<code>標(biāo)明代碼片段，并將<和>替換為html實(shí)體；2. 避免直接插入html代碼，應(yīng)使用轉(zhuǎn)義字符或動(dòng)態(tài)插入文本方式防止被解析；3. 引入代碼高亮庫(kù)如prism.js，通過(guò)添加對(duì)應(yīng)css類實(shí)現(xiàn)語(yǔ)法高亮，從而提升展示效果。</p><p>@@##@@</p><p>有時(shí)候我們需要在HTML頁(yè)面里插入一段HTML代碼本身，比如寫教程、展示示例或者構(gòu)建動(dòng)態(tài)內(nèi)容。這時(shí)候問(wèn)題就來(lái)了：怎么才能讓瀏覽器正確顯示這段“代碼”而不是直接解析執(zhí)行呢？其實(shí)方法并不復(fù)雜，但有幾個(gè)關(guān)鍵點(diǎn)需要注意。</p><hr /><h3>1. 使用 <pre class="brush:php;toolbar:false"> 和 <code> 標(biāo)簽保留格式</h3><p>如果你想在網(wǎng)頁(yè)中展示HTML代碼，并且希望保留空格和換行，通常會(huì)用到 <pre class="brush:php;toolbar:false"> 和 <code> 這兩個(gè)標(biāo)簽組合。</p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false"><code><div>這是一個(gè)示例</div></code>

•  標(biāo)簽會(huì)讓瀏覽器保留里面的空白字符和換行。</li><li><code> 則表示這是代碼片段，語(yǔ)義上更清晰。</li><li>注意要把 HTML 特殊字符（如 < 和 >）替換成 HTML 實(shí)體（分別是 < 和 >），否則瀏覽器會(huì)嘗試解析它們。</li></ul><hr /><h3>2. 避免瀏覽器解析嵌入的HTML代碼</h3><p>如果你直接把 HTML 代碼寫進(jìn)頁(yè)面，比如：</p><p><span>立即學(xué)習(xí)</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費(fèi)學(xué)習(xí)筆記（深入）</a>”；</p><pre class='brush:html;toolbar:false;'><div>     <p>這是一段測(cè)試文字</p> </div>

  那瀏覽器會(huì)把它當(dāng)作正常的 HTML 解析并渲染，而不是顯示出來(lái)。要防止這種情況，你需要手動(dòng)轉(zhuǎn)義這些標(biāo)簽字符，或者使用 JavaScript 動(dòng)態(tài)插入。

  例如，你可以這樣做：

  <pre class="brush:php;toolbar:false"><code id="example"></code>

  <script> const code = ‘<div>n <p>這是一段測(cè)試文字n’; document.getElementById(‘example’).textContent = code; </script>

  這樣可以確保代碼被當(dāng)作文本處理，而不是被解析執(zhí)行。

  ---

  3. 使用第三方代碼高亮庫(kù)增強(qiáng)可讀性

  如果你不只是想展示代碼，還想讓它看起來(lái)更專業(yè)、更容易閱讀，可以考慮使用一些代碼高亮庫(kù)，比如 Prism.js 或 Highlight.js。

  使用步驟大致如下：

  • 在頁(yè)面中引入對(duì)應(yīng)的 CSS 和 JS 文件
  • 把代碼包裹在

    <code class="html">...</code>

    中

  • 頁(yè)面加載后，庫(kù)會(huì)自動(dòng)對(duì)代碼進(jìn)行語(yǔ)法高亮

  舉個(gè)例子：

  <link rel="stylesheet" href="prism.css"> <script src="prism.js"></script>  <pre class="brush:php;toolbar:false"><code class="html"><p>Hello World</p></code>

  這樣你就能得到一個(gè)帶顏色高亮的 HTML 示例了。

  ---

  基本上就這些。只要注意轉(zhuǎn)義字符、避免被瀏覽器解析，再加上一點(diǎn)美化技巧，就可以輕松地在網(wǎng)頁(yè)中展示 HTML 代碼了。