<code>标签不自动转义HTML字符，必须手动转义<、>、&、"、'这5个字符，否则会导致DOM解析错误；多行代码需嵌套<pre><code>并仍需转义；JS动态插入推荐用textContent或临时div.textContent兜底。
<code> 标签本身不转义任何内容，它只是语义化标记——你必须手动转义 HTML 特殊字符，否则浏览器照常解析标签，<code> 会直接消失或破坏 DOM。
为什么 <code> 不能自动转义
<code> 是纯语义标签，不是安全容器。它不拦截、不处理、不转换任何字符。写 <code><div>hello</div></code>，浏览器会先解析 <div>，再把它的渲染结果塞进 <code> 里，最终你看到的是“hello”，而不是字符串 <div>hello</div>。
常见错误现象：
- 页面中突然少了一段文字（被当成未闭合标签吞掉）
- 代码块后面整个布局错位（
<script>或<style>被提前执行） - 用户输入的
<img alt="HTML中code标签转义HTML代码的完整教程" >显示成图片（漏转&，导致被识别为实体）
必须转义的 5 个核心字符
只转这 5 个： <、>、&、"、'。其他字符（如中文、emoji、空格、换行）无需转义，但需注意上下文：
立即学习“前端免费学习笔记（深入）”；
-
<→（最优先，漏掉必崩） -
>→>（HTML5 宽松，但 XML/SVG/旧浏览器仍要求） -
&→&（第二重要；不转会导致变成 <code><，二次解析） -
"→"（仅在双引号属性值中必需，如title=""hello""） -
'→'（HTML5 支持，旧标准用'）
别碰 、© 这类显示字符——它们不是安全问题，而是排版需求。
正确组合：<pre><code> + 手动转义
单行代码可用 <code>，但只要含 < 就必须转义；多行、带缩进的代码必须用 <pre><code>，且两者缺一不可：
-
<pre>管格式（保留换行、空格、tab） -
<code>管语义（告诉浏览器这是代码，非普通文本） - 两者嵌套后，仍要对内容做完整转义，不能依赖
<pre>
示例（正确）：
<button onclick="alert('hi')">Click</button>
错误写法（没转 &）：<button onclick="alert('hi')">Click</button> —— 中间 " 会提前闭合属性，onclick 值截断，后续变成裸文本。
JS 动态插入时的安全兜底方案
手动替换容易漏，尤其处理用户输入时。推荐用 DOM 方法自动转义：
- 创建临时元素：
const temp = document.createElement('div') - 设
textContent：temp.textContent = rawHtmlString - 取
innerHTML：const safe = temp.innerHTML - 再塞进目标位置：
el.innerHTML = safe或codeEl.textContent = safe
这个方法覆盖全部 5 个字符，且不依赖正则顺序（避免 被误还原）。注意：<code>textContent 在 IE8- 不支持，如需兼容，加 fallback 判断 innerText。
真正容易被忽略的点是：**转义必须发生在插入 DOM 前，且不能和 innerHTML 混用两次**。比如先用 JS 转义一次，又用 el.innerHTML = ... 再赋值——若字符串里已有 ，第二次解析可能出错。最稳路径：始终用 <code>textContent 插入，或确保转义后只走一次 innerHTML 渲染。
