核心答案:HTML 实体是把特殊字符写成 &名字; 或 数字; 的形式——< 写成 <,> 写成 >,& 写成 &。用户输入的内容输出到页面前必须转义,这是防 XSS 的第一道防线。
常用实体速查表
| 字符 | 命名实体 | 数字实体 | 说明 |
|---|---|---|---|
| < | < | < | 小于号,必须转义 |
| > | > | > | 大于号,必须转义 |
| & | & | & | 和号,必须转义 |
| " | " | " | 双引号,属性内必须 |
| ' | ' | ' | 单引号(无官方命名实体用数字) |
| 空格 | 不换行空格 | ||
| © | © | © | 版权 |
| ® | ® | ® | 注册商标 |
| ™ | ™ | ™ | 商标 |
| × | × | × | 乘号 |
| ÷ | ÷ | ÷ | 除号 |
| ± | ± | ± | 正负号 |
| ° | ° | ° | 度数 |
| ¥ | ¥ | ¥ | 人民币 |
| € | € | € | 欧元 |
| → | → | → | 右箭头 |
| — | — | — | 破折号 |
为什么需要转义
浏览器把 < > 解析为标签边界、& 解析为实体开头。想显示"a < b"必须写 a < b,否则 < b 会被当成未知标签吞掉。
三个必须转义的场景:
- 正文显示代码片段:所有 < > & 转义
- 属性值中的引号: 或改用单引号包裹属性
- URL 参数中的 &:©=1&type=2 应写 © 会被误解析 → 用 &
数字实体
任何 Unicode 字符都能用 十进制; 或 十六进制; 表示:
- 你 = 你(十进制)
- 你 = 你(十六进制)
- 早期页面转码的应急方案;现代网站统一 UTF-8 后基本不需要
XSS 与转义
危险输入:
- 未转义输出 → 脚本执行,cookie 被盗
- 转义后 <script>... → 纯文本显示,无害
现代框架默认转义:React JSX 的 {value}、Vue 的 {{value}} 自动转义;dangerouslySetInnerHTML / v-html 跳过转义——只对可信内容使用。
常见误区
- 手动 replace 转义不全:只转义 < > 忘了 & 和引号 → 用成熟的转义函数/库。
- URL 编码与 HTML 实体混淆:%3C 是 URL 编码,< 是 HTML 实体,场景不同。
- 双重转义:已经转义的 < 再转一次变成 <,页面显示"<"原文——后端转义后前端框架又转一次最常见。
- 当普通空格用:连续 强制不换行,长串会破坏响应式布局。
用[HTML 实体编码工具](/c/dev/html-entities)批量转义/反转义文本。