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

要在网页中展示html代码需先用<pre>和<code>标签保留格式并转义特殊字符，其次通过手动转义或javascript防止浏览器解析执行，最后可引入prism.js等高亮库提升可读性。具体步骤为：1. 使用<pre>保留格式、<code>标明代码片段，并将<和>替换为html实体；2. 避免直接插入html代码，应使用转义字符或动态插入文本方式防止被解析；3. 引入代码高亮库如prism.js，通过添加对应css类实现语法高亮，从而提升展示效果。

有时候我们需要在HTML页面里插入一段HTML代码本身，比如写教程、展示示例或者构建动态内容。这时候问题就来了：怎么才能让浏览器正确显示这段“代码”而不是直接解析执行呢？其实方法并不复杂，但有几个关键点需要注意。

1. 使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签保留格式&lt;/h3&gt;&lt;p&gt;如果你想在网页中展示HTML代码，并且希望保留空格和换行，通常会用到 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&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;<div>这是一个示例</div>&lt;/code&gt;</pre>

登录后复制

</div><ul><li><code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt; 标签会让浏览器保留里面的空白字符和换行。&lt;/li&gt;&lt;li&gt;&lt;code&gt;&lt;code&gt;&lt;/code&gt; 则表示这是代码片段，语义上更清晰。&lt;/li&gt;&lt;li&gt;注意要把 HTML 特殊字符（如 &lt;code&gt;&lt;&lt;/code&gt; 和 &lt;code&gt;&gt;&lt;/code&gt;）替换成 HTML 实体（分别是 &lt;code&gt;<&lt;/code&gt; 和 &lt;code&gt;>&lt;/code&gt;），否则浏览器会尝试解析它们。&lt;/li&gt;&lt;/ul&gt;&lt;hr /&gt;&lt;h3&gt;2. 避免浏览器解析嵌入的HTML代码&lt;/h3&gt;&lt;p&gt;如果你直接把 HTML 代码写进页面，比如：&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;div&gt; &lt;p&gt;这是一段测试文字&lt;/p&gt; &lt;/div&gt;</pre>

登录后复制

</div><p>那浏览器会把它当作正常的 HTML 解析并渲染，而不是显示出来。要防止这种情况，你需要手动转义这些标签字符，或者使用 JavaScript 动态插入。</p> <p>例如，你可以这样做：</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1873"> <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6c5db630b5379.png" alt="Icons8 Background Remover"> </a> <div class="aritcle_card_info"> <a href="/ai/1873">Icons8 Background Remover</a> <p>Icons8出品的免费图片背景移除工具</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Icons8 Background Remover"> <span>31</span> </div> </div> <a href="/ai/1873" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Icons8 Background Remover"> </a> </div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code id=&quot;example&quot;&gt;&lt;/code&gt;</pre>

登录后复制

</div> <script> const code = '<div>\n <p>这是一段测试文字\n'; document.getElementById('example').textContent = code; </script><p>这样可以确保代码被当作文本处理，而不是被解析执行。</p> <hr> <h3>3. 使用第三方代码高亮库增强可读性</h3> <p>如果你不只是想展示代码，还想让它看起来更专业、更容易阅读，可以考虑使用一些代码高亮库，比如 <a href="https://www.php.cn/link/64ec9b72454858cf22b819d0bce64fbd">Prism.js</a> 或 <a href="https://www.php.cn/link/ebb2f6ac7f9ba659ac28c0b0433c7ce1">Highlight.js</a>。</p> <p>使用步骤大致如下：</p> <ul> <li>在页面中引入对应的 CSS 和 JS 文件</li> <li>把代码包裹在 <code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;</pre>

登录后复制

</div> 中

页面加载后，库会自动对代码进行语法高亮

举个例子：

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

登录后复制

这样你就能得到一个带颜色高亮的 HTML 示例了。

---

基本上就这些。只要注意转义字符、避免被浏览器解析，再加上一点美化技巧，就可以轻松地在网页中展示 HTML 代码了。

以上就是html怎么插入HTML代码？代码嵌入技巧指南的详细内容，更多请关注php中文网其它相关文章！