必须转义的只有五个字符：&、、"、'；其余如中文、©、€、emoji 等，只要页面声明了 ，就无需转义——强行转反而容易出错。
必须转义的只有五个字符：&、、<code>>、"、'；其余如中文、©、€、emoji 等，只要页面声明了 <meta charset="utf-8">，就无需转义——强行转反而容易出错。
哪些字符真的需要 HTML 实体转义？
浏览器只对这五个字符有“语法期待”：它们一出现，解析器就会启动特定逻辑。& 是所有实体的开头，不转义会导致后续内容被误判为未闭合实体（比如 © 变成 © 前半截）； 和 <code>> 在文本节点中不转义，会被当成标签起止符，直接切开 DOM；" 和 ' 主要在属性值里生效，漏掉一个，属性就提前闭合。
常见错误现象包括：
- 段落文字在某个符号后突然消失（其实是
被当成了新标签开始） - 控制台报
Unclosed entity（&后面跟了无效字符，如&xyz） - 按钮 title 显示不全（用户输入
He said "Hi"，没转"，结果解析成title="He said "）
空格、破折号、引号这些“看不见的字符”怎么处理？
普通空格和换行在 HTML 中会被合并或忽略，所以排版敏感场景必须用实体控制。
-
-
-
–（–）和—（—）：短破折号用于范围（1–10），长破折号用于插入语（他说——然后停顿——继续） -
“/”、‘/’：弯引号，比直引号"更符合出版规范
注意： 不等于两个普通空格，它不会被 CSS 的 white-space: normal 合并；而 宽度固定为半个汉字，比用 margin 控制更语义化。
命名实体 vs 数字实体：选哪个？
命名实体（如 、<code>©）可读性强，但支持有限（约 250 个），且部分老浏览器不认 '；数字实体（如 、<code>©）覆盖全部 Unicode，兼容性更好。
- 日常高频符号（
、<code>&、"）优先用命名实体——编辑器高亮友好，团队协作易懂 - 中文、emoji、数学符号（→、∑、❤️）只能用数字实体；例如 ❤️ 是两个码点：
❤️ - 十六进制写法（如
❤）虽合法，但某些 XML 解析器不支持，生产环境统一用十进制
别用 ：空字符在旧 IE 中会崩溃，现代标准也禁止。
JavaScript 中插入动态内容时最容易踩的坑
用 innerHTML 拼接未转义字符串等于主动引入 XSS。哪怕只是回显昵称：el.innerHTML = user.name，值是 <script>alert(1)</script> 就会执行。
- 纯文本展示一律用
textContent，它自动规避所有 HTML 解析逻辑 - 必须插 HTML 片段时，先转义再拼接：
el.innerHTML = `<div>${escapeHtml(data)}</div>` - 手写
escapeHtml函数时，顺序不能错：必须先.replace(/&/g, "&")，再.replace(/, "，最后 <code>.replace(/>/g, ">")；否则会被转成 <code>< - 更稳妥的做法是借浏览器原生逻辑：
const temp = document.createElement('div'); temp.textContent = str; return temp.innerHTML;，但别在高频循环里调用——性能差
最容易被忽略的是前后端转义对齐：后端已用 htmlspecialchars() 输出了 ，前端又用 JS 再转一次，结果页面显示的是字面量 <code><，而不是 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
