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