HTML中需转义的五个关键字符是&、、"、'，分别写作&、、"、'；命名编码可读性强，数字编码支持任意Unicode字符；UTF-8下中文等可直接书写。

HTML 里想显示 &、、>、"、' 这些字符，直接写会破坏标签结构或被浏览器忽略——必须用 HTML 实体编码。

哪些字符必须转义才能正常显示

不是所有符号都要转，只有会被浏览器解析为标记语法的才危险。最常踩坑的是这五个：

• & → 写成 &（漏掉会触发其他实体解析，比如 © 变成 ©）
• → 写成 （否则浏览器以为是新标签开始）
• > → 写成 >（虽然多数情况不强制，但 XML/Strict 模式下必须）
• " → 在属性值中用双引号包裹时，内部的 " 要写成 "
• ' → 同理，单引号属性值里的 ' 得写成 '（注意：IE8 及更早不支持 '，得用 '）

数字编码 vs 命名编码，怎么选

两种写法都合法： 和 效果一样，但选择逻辑不同：

• 命名编码（如 、©）可读性强，适合常用符号，但只覆盖约 250 个字符
• 数字编码（如 € 表示 €）能表示任意 Unicode 字符，适合冷门符号或非拉丁文字
• 中文、日文等直接写 UTF-8 字符通常更简单（前提是文件声明了 ），不用硬套 中 这类
• 避免混用：同一页面里别一半用  ，一半用  ，维护时容易漏改

JS 动态插入内容时，实体编码容易失效

用 innerHTML 插入含 的字符串，浏览器会自动解析；但用 textContent 或 innerText 就原样显示。常见错误：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 拼接 HTML 字符串时写 el.innerHTML = "x ✅ 正确
• 却误写成 el.innerHTML = "x ❌ 浏览器以为 是未闭合标签，后续渲染全乱
• 从 API 拿回的数据含原始 &，没做二次转义就塞进 innerHTML，可能触发 XSS（比如返回 user<script>alert(1)</script>）
• React/Vue 等框架默认转义插值内容，但显式用 v-html 或 dangerouslySetInnerHTML 时，就得自己确保输入已安全处理

空格、换行、不间断空格这些“看不见”的坑

HTML 会合并连续空白符，所以普通空格、Tab、换行都只算一个空格。需要控制排版时得用特殊实体：

•  ：不间断空格，防止单词在行尾被拆开（如 “100 km”）
•   /  ：固定宽度空格，前者约半个汉字宽，后者约一个汉字宽（比   更可控）
• ­：软连字符，只在换行处显示 -，平时不可见（如 re­source）
• 直接敲多个空格？浏览器全当一个，除非用   或 （但后者还是会被合并）

实体编码不是越多越好，关键在「该转的时候转，不该转的时候别画蛇添足」。尤其注意 JS 注入和属性值边界——那里最容易漏掉 " 或 '，导致 HTML 结构断裂。

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