必须转义的只有五个字符：&、、"、'；漏掉任意一个，轻则页面错位，重则触发xss。浏览器靠这五个字符切分标签、解析属性、识别实体：&触发实体解析，界定标签，"和'界定属性值边界。
必须转义的只有五个字符：&、、<code>>、"、'；漏掉任意一个，轻则页面错位，重则触发 XSS。
哪些字符不转就会崩页面
浏览器靠这五个字符切分标签、解析属性、识别实体。漏转 & 最危险：比如写 © 却没转 &，结果 © 被当成未闭合实体，后续所有内容都可能被吞掉；写 5 不转 <code>，浏览器会认为这是 <code> 开头的标签，后面内容直接截断。
常见现象包括：
-
Unclosed entity报错 - 按钮文字突然消失
- 表格某列内容只剩一半
- 用户输入的
<script>alert(1)</script>真的执行了
命名实体和数字实体怎么选
命名实体（如 、<code>©）易读但范围有限；数字实体（如 、<code>©）覆盖全部 Unicode，兼容性更强。
实用建议：
- 常用符号优先用命名实体：
、<code>>、&、"、©、®、€——编辑器高亮友好，团队一眼看懂 - 中文、emoji、数学符号（→、∑、α）、破折号（—）必须用数字实体：
→、∑、α、—，因为它们没有命名别名 - 十六进制写法（如
→）合法，但部分 XML 解析器或旧 RSS 工具不认，生产环境优先用十进制 - 别混写：
没问题，但或容易漏分号、拼错名，维护时极易出错
JavaScript 动态插入时怎么防 XSS
往 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是唯一需警惕的出口
表格、属性值、代码片段里的坑
表格单元格（td、th）里含 、<code>& 不转义，浏览器会误解析为标签或实体，导致错位、截断或样式丢失。
特别注意属性值场景：
-
title="User's input: <script>alert(1)</script>"中单引号和尖括号都得转，否则属性提前闭合，脚本真会执行 -
data-filter="price > 100"同理，漏转>就会导致属性值被截断 - 用 JS 动态设置时，别拼字符串，优先用
element.setAttribute('title', str)（它自动处理引号，但不会转、<code>&） - 显示代码片段（如
<div class="btn"></div>）时，&也得跟上——URL 参数里常见src="img.png?w=100&h=80"，漏转就崩参数
真正容易被忽略的不是“怎么写实体”，而是上下文错位：写了 © 却显示方块，大概率是 <meta charset="UTF-8"> 缺失，或文件没存成 UTF-8 无 BOM 格式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
