必须转义的五个字符是、&、"、'，不转义会触发浏览器html解析器语法解析或截断，导致dom结构错乱、xss或内容丢失，而非单纯显示异常。

哪些字符不转义就会破坏HTML结构

直接写 、<code>>、&、"、' 这5个字符，浏览器会立刻开始解析或截断内容——不是显示问题，是语法错误。比如用户输入的 AT&T 不转义成 AT&T，后面所有内容可能被当成实体名吃掉；1 写成原样，<code> 部分会被当作未闭合标签处理。

• 和 <code>>：必须用 和 <code>>，否则触发标签解析
• &：必须用 &，它是所有实体的起始符，漏转义会导致后续实体识别错乱
• "：在文本内容中可用 "；若出现在双引号属性值里（如 title="He said "Hi""），必须转义为 "
• '：HTML5 支持 '，但 IE8 及更早版本不认，稳妥做法是统一用 ' 或改用双引号包裹属性值

空格类实体怎么选才不白费力气

浏览器默认合并连续空白符（空格、Tab、换行），所以敲10个空格只显示1个。想控制间距，得用实体，但不同实体行为差异很大。

•  ：不换行空格，多个并列不会合并，适合防断行（如“Mr. Smith”）或固定占位
•  ：en空格，宽度≈字母“n”，可换行，适合单词间微调
•  ：em空格，宽度≈字母“m”或一个中文字符，排版舒展时用
•  ：窄空格，宽度仅1/6em，精细标点对齐（如数学公式）才需要
• 别用多个   做布局——它本质是字符，影响屏幕阅读器朗读、无法响应式缩放、CSS margin 更可控

版权、货币、箭头这些符号该用命名还是编号

命名实体（如 ©）好记，但冷门符号支持不稳定；数字编号（如 © 或 ©）兼容性更好，尤其要支持旧IE或XML场景时。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 高频符号优先用命名：©、®、™、€、¥ 在 HTML4/5 全系支持
• 箭头、破折号、省略号等建议用十进制编号：—（—）、…（…），比记 — 或 … 更少出错
• 十六进制编号必须带 x 前缀：→ 是 →，写成 ࢐ 就变成十进制 2192（对应另一个符号）
• 音标、带重音字母（如 à）建议直接用 UTF-8 编码保存文档 + 声明 <meta charset="UTF-8">，比拼接 à 更可靠

动态插入内容时最容易栽跟头的地方

后端模板拼接或前端 JS 直接写 innerHTML = '<div>' + userInput + '</div>'，等于把 XSS 门打开。实体转义不是“锦上添花”，是输入落地前的必经安检。

• 框架内（React/Vue/Svelte）靠 {} 插值自动转义，但显式用 v-html 或 dangerouslySetInnerHTML 时，必须自己处理
• 纯 JS 操作 DOM，别手写 el.innerHTML = '<p>' + text.replace(/&/g, '&').replace(/, ''</p> —— 正则漏掉 > 或 " 就留洞；用 textContent 最安全，真要 HTML 就走 DOMParser 或专用库（如 DOMPurify）
• 服务端模板（Jinja2、Twig、Thymeleaf）开启自动转义是默认行为，但显式关闭（|safe）后，所有变量都得人工过滤
• JSON API 返回的字符串，前端渲染前别假设“它已经转义好了”——验证来源，必要时二次清洗

真正麻烦的从来不是记不住 怎么写，而是忘了某处用了 <code>innerHTML、某条数据来自第三方接口、某个模板开关关掉了转义。这些地方不盯紧，一个 & 就能串起整条攻击链。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！