要在网页中展示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. 使用 <code><pre></code> 和 <code><code></code> 标签保留格式</h3><p>如果你想在网页中展示HTML代码，并且希望保留空格和换行，通常会用到 <code><pre></code> 和 <code><code></code> 这两个标签组合。</p><pre class='brush:html;toolbar:false;'><pre><code><div>这是一个示例</div></code></pre>
-
<pre>标签会让浏览器保留里面的空白字符和换行。 -
<code>则表示这是代码片段，语义上更清晰。 - 注意要把 HTML 特殊字符（如
<和>）替换成 HTML 实体（分别是和 <code>>），否则浏览器会尝试解析它们。
2. 避免浏览器解析嵌入的HTML代码
如果你直接把 HTML 代码写进页面，比如：
立即学习“前端免费学习笔记（深入）”；
<div>
<p>这是一段测试文字</p>
</div>那浏览器会把它当作正常的 HTML 解析并渲染，而不是显示出来。要防止这种情况，你需要手动转义这些标签字符，或者使用 JavaScript 动态插入。
例如，你可以这样做：
<pre><code id="example"></code></pre>
<script>
const code = '<div>\n <p>这是一段测试文字</p>\n</div>';
document.getElementById('example').textContent = code;
</script>这样可以确保代码被当作文本处理，而不是被解析执行。
3. 使用第三方代码高亮库增强可读性
如果你不只是想展示代码，还想让它看起来更专业、更容易阅读，可以考虑使用一些代码高亮库，比如 Prism.js 或 Highlight.js。
使用步骤大致如下：
- 在页面中引入对应的 CSS 和 JS 文件
- 把代码包裹在
<pre><code class="html">...</code></pre>中 - 页面加载后，库会自动对代码进行语法高亮
举个例子：
<link rel="stylesheet" href="prism.css"> <script src="prism.js"></script> <pre><code class="html"><p>Hello World</p></code></pre>
这样你就能得到一个带颜色高亮的 HTML 示例了。
基本上就这些。只要注意转义字符、避免被浏览器解析，再加上一点美化技巧，就可以轻松地在网页中展示 HTML 代码了。
