HTML 实体编码完全指南：所有特殊字符对照 + XSS 防御

想在网页上显示 < 这个符号，直接写 < 浏览器会以为你在开标签——必须写成 < 才能原样显示。这就是 HTML 实体编码。

HTML 实体编码是前端开发必学的基础，也是防止 XSS 攻击的第一道防线。本文讲清命名实体 vs 数字实体的区别、常用字符对照表、以及 3 个真实 XSS 漏洞场景。文末推荐 DevToolbox HTML 实体参考表——支持搜索 + 复制。

一、HTML 实体的 3 种写法

HTML 实体都以 & 开头、以 ; 结尾，中间有 3 种形式：

• 命名实体（Named）：< → 小于号（less than）
• 十进制数字（Decimal）：< → 同样是小于号
• 十六进制数字（Hex）：< → 同样是小于号

三种写法浏览器都识别。命名实体好记，数字实体覆盖全（任何 Unicode 字符都能编码）。

二、必背的 15 个常用实体

前 4 个是 HTML 语法保留字符，必须转义。其余是排版符号：

三、3 个真实 XSS 漏洞场景

场景 1：用户输入直接插入 HTML

// ❌ 危险：用户输入直接拼接
element.innerHTML = userInput;

// ✅ 安全：textContent 自动转义
element.textContent = userInput;

场景 2：URL 参数未过滤

// ❌ 危险：URL 参数直接拼 HTML
const name = new URLSearchParams(location.search).get('name');
document.write(`<h1>Welcome ${name}</h1>`);

// ✅ 安全：用 DOMPurify 或服务端转义
const safe = DOMPurify.sanitize(name);
document.write(`<h1>Welcome ${safe}</h1>`);

场景 3：模板引擎自动转义失效

Vue/React 默认自动转义用户输入，但 v-html / dangerouslySetInnerHTML 会跳过转义。只在 100% 信任内容时使用，外部输入必须先过 DOMPurify。

四、为什么用   而不是空格

HTML 默认会合并连续空白——3 个空格显示成 1 个。想保留原始间距或对齐，用  （non-breaking space）。常用于：

• 段首缩进（2 个  ）
• 价格数字对齐（¥99 元）
• 防止标点被换行拆分

五、结语

HTML 实体是前端"基本功中的基本功"。背下前 4 个保留字符（< > & "）就能解决 90% 的场景；遇到 XSS 记住铁律——任何用户输入都要转义或过滤。

查表或复制实体？DevToolbox HTML 实体参考 收录 200+ 常用字符，支持搜索和点击复制。

相关工具：HTML 实体参考 · URL 编解码 · 正则表达式测试