需转义html特殊字符以直接展示代码：一、用配合→>、"→"、&→&；二、js用textcontent自动转义；三、css加white-space: pre-wrap；四、highlight.js高亮需先转义；五、服务端如php用htmlspecialchars。
如果您希望在网页中直接展示HTML代码本身，而非让浏览器解析并渲染其效果，则需要对HTML特殊字符进行转义处理。以下是实现该目标的多种方法：
一、使用 和 <code> 标签配合字符转义</h2>
<p>此方法通过预格式化标签保留空格与换行，并将尖括号、引号等关键字符替换为对应的HTML实体，从而阻止浏览器解析。</p>
<p>1、将待显示的HTML代码中的 <strong><</strong> 替换为 <strong><font color="green"><</font></strong>。</p>
<p>2、将 <strong>></strong> 替换为 <strong><font color="green">></font></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>
<p>3、将 <strong>"</strong>（英文双引号）替换为 <strong><font color="green">"</font></strong>。</p>
<p>4、将 <strong>&</strong> 替换为 <strong><font color="green">&</font></strong>（此步不可省略，否则后续转义会失效）。</p>
<p>5、将处理后的字符串放入 <strong><font color="green"><pre class="brush:php;toolbar:false;"><code>...</code>
结构中。
二、使用 JavaScript 动态转义并插入
此方法借助脚本自动完成字符转义，避免手动替换出错，适用于从变量或用户输入中获取HTML代码的场景。
1、定义一个包含原始HTML字符串的JavaScript变量，例如：const rawHtml = "
2、创建一个临时DOM元素，如 const temp = document.createElement("div");。
3、将原始字符串赋值给该元素的 textContent 属性：temp.textContent = rawHtml;。
4、读取该元素的 innerHTML 属性，此时内容已自动转义：const escaped = temp.innerHTML;。
5、将 escaped 插入到目标容器的 innerHTML 中，或使用 textContent 配合 <code></font></strong> 显示。</p>
<h2>三、使用 CSS white-space 属性控制换行与空格</h2>
<p>当HTML代码需保持原始缩进和换行结构时，仅靠转义不够，还需CSS确保格式不被浏览器默认样式破坏。</p>
<p>1、为包裹代码的容器添加样式：<strong><font color="green">white-space: pre-wrap;</font></strong> 或 <strong><font color="green">white-space: pre-line;</font></strong>。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/js/426" title="网格图片手风琴jquery特效代码"><img
src="https://img.php.cn/upload/jscode/000/000/001/58c3887cd9c6d940.png" alt="网格图片手风琴jquery特效代码" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/js/426" title="网格图片手风琴jquery特效代码">网格图片手风琴jquery特效代码</a>
<p>网格图片手风琴jquery特效代码，结合网格手风琴缩略图和手风琴面板的功能，给你展示你的图片网站一个有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个jQuery插件的功能，可以方便地集成到您自己的应用程序。兼容主流浏览器，php中文网推荐下载！
使用方法：
1、在head区域引入样式表文件style.css和grid-accordion.css
2、在head</p>
</div>
<a href="/xiazai/js/426" title="网格图片手风琴jquery特效代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>2、确保容器具有固定宽度或设置 <strong><font color="green">word-break: break-all;</font></strong> 以防止长行溢出。</p>
<p>3、将已转义的HTML代码放入该容器内，例如：<strong><font color="green"><div style="white-space: pre-wrap;"><h1>Title</h1></div></font></strong>。</p>
<p>4、可进一步添加 <strong><font color="green">font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;</font></strong> 以启用等宽字体提升可读性。</p>
<h2>四、使用第三方库 highlight.js 实现语法高亮显示</h2>
<p>若需在展示HTML源码的同时提供语法着色效果，可引入轻量级高亮库，它支持自动识别HTML语言并渲染为带样式的代码块。</p>
<p>1、在页面中引入highlight.js的CSS与JS文件，例如：<strong><font color="green"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"></font></strong>。</p>
<p>2、引入JS：<strong><font color="green"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script></font></strong>。</p>
<p>3、准备代码块容器：<strong><font color="green"><pre class="brush:php;toolbar:false;"><code class="html"><div>...</div></code>。
4、调用初始化函数：hljs.highlightAll();。
5、注意：所有HTML特殊字符仍需提前转义，否则库无法正确解析内容。
五、服务端输出前统一转义（适用于PHP/Node.js等环境）
在服务端生成HTML响应时即完成转义，可彻底规避前端处理逻辑，提高安全性与一致性。
1、在PHP中使用 htmlspecialchars($html, ENT_NOQUOTES, 'UTF-8') 对原始HTML字符串处理。
2、在Node.js中使用内置模块 require('util').inspect() 不适用，应改用 he.escape()（需安装he库）或正则手动替换。
3、将转义结果嵌入模板中的 <code></code>
区域。
4、确保响应头声明正确的字符编码：Content-Type: text/html; charset=UTF-8。
