标签不自动转义，需手动对&、<、>、"、'五字符实体编码，否则浏览器会解析为HTML语法，导致内容错位或XSS。
<code> 标签本身不自动转义内容，它只是语义化标记“一段代码”，但里面若含 &、、<code>> 等字符，浏览器仍会按 HTML 规则解析——结果就是标签被吃掉、内容错位，甚至触发 XSS。
为什么 <code> 里直接写 <div> 会出问题
<p>因为 <code><code> 是普通 HTML 元素，不是沙箱。浏览器在解析时看到 就准备开新标签，根本不管它在不在 <code><code> 里。
- 写
<code><div></div></code> → 渲染出一个空 <div>，而不是字符串 <div>
- 写
<code>price & tax</code> → & 被当实体起始符，后面没合法名（如 amp;），可能截断或报错
- 用户输入含
<script>alert(1)</script>，直接塞进 <code> 就执行
正确做法：先转义，再放进 <code>
<code><div></div></code> → 渲染出一个空 <div>，而不是字符串 <div>
<code>price & tax</code> → & 被当实体起始符，后面没合法名（如 amp;），可能截断或报错<script>alert(1)</script>，直接塞进 <code> 就执行<code>
必须对原始字符串做 HTML 实体转义，再放入 <code>，且推荐配合 <pre> 保留格式。
- 只转义五个基础字符：
&→&（必须最先）、→ <code><、>→>、"→"、'→' - 顺序不能错：先
&，否则<可能被误认为<实体的一部分 - 服务端 PHP 用
htmlspecialchars($str, ENT_QUOTES, 'UTF-8')；Node.js 推荐he.encode(str, { useNamedReferences: true }) - 前端 JS 动态处理时，别手写正则链，用浏览器原生逻辑更稳：
const el = document.createElement('div'); el.textContent = raw; return el.innerHTML;
JS 动态插入时，textContent 和 innerHTML 怎么选
想安全显示原始代码字符串，就别碰 innerHTML ——除非你已确保内容 100% 转义完毕。
立即学习“前端免费学习笔记（深入）”；
- 往
<code>元素设内容，优先用el.textContent = escapedString，完全规避解析风险 - 若需保留换行/缩进，
textContent本身支持，再加 CSSwhite-space: pre-wrap即可 - 千万别
el.innerHTML = rawString，哪怕 rawString 看起来“只是代码”——用户输入不可信 - React/Vue 中，
{'<code><div>'} 或{{ '<code><div>' }} 会原样输出，但这是框架插值机制在转义；若用dangerouslySetInnerHTML或v-html，传入值必须是已转义的字符串，且不能重复转义
最常被忽略的一点：前后端协作时，API 返回的 HTML 字符串如果已是转义态（比如 <div>），前端再调一次 <code>he.encode() 或拼接 <code>，就会变成双层编码，页面显示 <div> 而不是 <code><div>。约定好“传输不转义、展示层负责”比补救更省事。
