必须转义的五个字符是&、<、>、"、'：漏转会导致标签截断、内容错乱或XSS漏洞，其中&最危险，因兼作实体起始符且高频出现于URL和符号中。
哪些字符必须转义，不转就出错
只有五个字符在 HTML 文本中不转义就会破坏结构或引入安全风险：&、、<code>>、"、'。漏掉任意一个，都可能让浏览器提前切开标签、截断内容，甚至执行恶意脚本。
常见错误现象包括：Unclosed entity 报错、<tr><td>5 </td></tr> 渲染后只剩 5、用户输入的 <script></script> 真的执行了。
其中 & 最危险：它既是实体起始符，又常出现在 URL 参数、版权符号（©）里。如果没转成 &，后面紧跟着的 lt; 就会被当成 ，整个解析链崩掉。
命名实体 vs 数字实体，怎么选不翻车
命名实体（如 <、©）易读，但只覆盖常用符号；数字实体（如 、<code>©）支持全部 Unicode，兼容性更稳。
立即学习“前端免费学习笔记（深入）”；
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础符号优先用命名实体：
<、>、&、"、'、©、®、€——编辑器高亮友好，团队一眼能懂 - 中文、emoji、数学符号（→、∑、α）、破折号（—）必须用数字实体：
→、∑、α、—，它们没有命名别名 - 十六进制写法（如
→）合法，但部分 XML 解析器或旧 RSS 工具不认，生产环境统一用十进制 - 别混写：
<>没问题，但<>或容易漏分号、拼错名，维护时极易出错
JavaScript 动态插入时，textContent 和 innerHTML 怎么用
往 element.innerHTML 写任何用户数据前不转义，等于主动引入 XSS。而 textContent 是纯文本通道，天然免疫 HTML 解析风险。
但不能无脑换用 textContent：
- 想保留链接、加粗、换行？
textContent会把<b>加粗</b>当纯字符串渲染，显示为字面量 - 必须用
innerHTML时，先转义再拼接：el.innerHTML = escapeHtml(userInput)，其中escapeHtml必须按顺序处理：.replace(/&/g, '&')→.replace(/, '<')→.replace(/>/g, '>')→.replace(/"/g, '"')→.replace(/'/g, ''') - 借浏览器原生逻辑（
const temp = document.createElement('div'); temp.textContent = str; temp.innerHTML）虽稳妥，但别在循环里高频调用——创建 DOM 节点开销大
服务端模板和前后端协作时最容易踩的坑
Django、Jinja、EJS 这类模板引擎默认会对变量做 HTML 转义，但如果你传入的已经是转义后的字符串（比如 <p>hello</p>），再转一次就变成 <p>hello</p>，页面上显示的就是源码而非渲染效果。
关键陷阱在于前后端协作：
- API 响应里返回的是已转义的 HTML 字符串，前端又调一次
he.encode()，结果层层嵌套 - React 的
dangerouslySetInnerHTML和 Vue 的v-html都要求传入未转义的原始 HTML；若后端已转义，前端再塞进去，就双层编码 - 建议约定「传输层不转义，展示层按需转义」——API 返回原始字符串，由前端在插入
innerHTML前统一处理
最常被忽略的是：写了 © 却显示成方块或问号，大概率不是实体写错了，而是 <meta charset="utf-8"> 缺失，或者服务器响应头没声明 Content-Type: text/html; charset=utf-8。
