要在网页中展示html代码需先用
和<code>标签保留格式并转义特殊字符，其次通过手动转义或JavaScript防止浏览器解析执行，最后可引入prism.JS等高亮库提升可读性。具体步骤为：1. 使用<pre class="brush:php;toolbar:false">保留格式、<code>标明代码片段，并将<和>替换为html实体；2. 避免直接插入html代码，应使用转义字符或动态插入文本方式防止被解析；3. 引入代码高亮库如prism.js，通过添加对应css类实现语法高亮，从而提升展示效果。</p><p>@@##@@</p><p>有时候我们需要在HTML页面里插入一段HTML代码本身，比如写教程、展示示例或者构建动态内容。这时候问题就来了：怎么才能让浏览器正确显示这段“代码”而不是直接解析执行呢？其实方法并不复杂，但有几个关键点需要注意。</p><hr /><h3>1. 使用 <pre class="brush:php;toolbar:false"> 和 <code> 标签保留格式</h3><p>如果你想在网页中展示HTML代码，并且希望保留空格和换行，通常会用到 <pre class="brush:php;toolbar:false"> 和 <code> 这两个标签组合。</p><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false"><code><div>这是一个示例</div></code>
-
标签会让浏览器保留里面的空白字符和换行。</li><li><code> 则表示这是代码片段，语义上更清晰。</li><li>注意要把 HTML 特殊字符（如 < 和 >）替换成 HTML 实体（分别是 < 和 >），否则浏览器会尝试解析它们。</li></ul><hr /><h3>2. 避免浏览器解析嵌入的HTML代码</h3><p>如果你直接把 HTML 代码写进页面，比如：</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;'><div> <p>这是一段测试文字</p> </div>
那浏览器会把它当作正常的 HTML 解析并渲染，而不是显示出来。要防止这种情况，你需要手动转义这些标签字符，或者使用 JavaScript 动态插入。
例如，你可以这样做：
<pre class="brush:php;toolbar:false"><code id="example"></code>
<script> const code = ‘<div>n <p>这是一段测试文字n’; document.getElementById(‘example’).textContent = code; </script>
这样可以确保代码被当作文本处理，而不是被解析执行。
3. 使用第三方代码高亮库增强可读性
如果你不只是想展示代码，还想让它看起来更专业、更容易阅读，可以考虑使用一些代码高亮库，比如 Prism.js 或 Highlight.js。
使用步骤大致如下：
- 在页面中引入对应的 CSS 和 JS 文件
- 把代码包裹在
<code class="html">...</code>
中
- 页面加载后，库会自动对代码进行语法高亮
举个例子：
<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 代码了。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
