必须转义的字符只有五个：&、、"、'；漏转会导致html解析错误、xss漏洞或页面结构崩溃，其中&最危险，未转义会引发连锁实体解析错误。
哪些字符必须转义，漏掉就出问题
只这五个：&、、<code>>、"、'。浏览器靠它们切分标签、解析属性、识别实体，漏一个就可能让页面结构错位或执行恶意脚本。
常见错误现象：Unclosed entity 报错、段落突然截断、按钮文字消失、用户输入的 <script></script> 真的执行了。
-
&最危险：不先转成&，后面紧跟着的lt;就会被当成，但 <code>©里没转&，结果整个实体失效 和 <code>>在文本中不转，浏览器会尝试匹配闭合标签，比如5 可能被切开成 <code>5+10，中间内容丢失-
"在title="他说 "Hello""里必须写成title="他说 "Hello""，否则引号提前闭合，后续 HTML 崩坏 -
'同理，单引号属性值里用'更稳；'在 IE8 及更早版本不支持
命名实体 vs 数字实体，怎么选不踩坑
命名实体（如 、<code>©）易读但范围有限；数字实体（如 、<code>©）覆盖全部 Unicode，兼容性更强。
实际建议：
- 常用符号优先用命名实体：
、<code>>、&、"、©、®、€——编辑器高亮友好，团队协作一眼看懂 - 中文、emoji、数学符号（→、∑、α）、箭头、破折号必须用数字实体：
→、∑、α、—，因为它们没有命名别名 - 十六进制写法（如
→）合法，但部分 XML 解析器或旧 RSS 工具不认，生产环境优先用十进制 - 别混写：
没问题，但或容易漏分号、拼错名，维护时极易出错
JavaScript 动态插入时，innerHTML 和 textContent 的取舍
往 element.innerHTML 写任何用户数据前不转义，等于主动引入 XSS。而 textContent 是纯文本通道，天然免疫 HTML 解析风险。
但不能无脑换用 textContent：
- 想保留链接、加粗、换行？
textContent会把<b>加粗</b>当纯字符串渲染，显示为字面量 - 必须用
innerHTML时，先转义再拼接：el.innerHTML = escapeHtml(userInput)，其中escapeHtml必须按顺序处理：.replace(/&/g, '&')→.replace(/, ' → <code>.replace(/>/g, '>')→.replace(/"/g, '"')→.replace(/'/g, ''') - 借浏览器原生逻辑（
document.createElement('div').textContent = str; temp.innerHTML）虽稳妥，但别在循环里高频调用——创建 DOM 节点开销大 - 框架如 React 默认走
textContent语义，dangerouslySetInnerHTML才需自行转义；Vue 同理，v-html是唯一需警惕的出口
容易被忽略的编码与上下文陷阱
写了 © 却显示成方块或问号？大概率不是实体写错了，而是编码声明或上下文错位。
关键检查点：
- 页面必须声明
<meta charset="UTF-8">，否则浏览器可能用 ISO-8859-1 解析，导致实体解码失败 - 实体必须以分号结尾：
有效，<code><无效，浏览器忽略整段或报错 - HTML 实体只在 HTML 文本节点和属性值中生效；
放在 <code><script></script>块里就是普通字符串，不会被转义——但若用innerHTML插入含的字符串，它又进入 HTML 上下文，必须已转义 - 后端已用
htmlspecialchars($str, ENT_QUOTES)输出了，前端 JS 再调一次 <code>escapeHtml，结果页面显示的是<字面量，而不是
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
