在 Web 开发中，HTML 实体编码是处理特殊字符的基础技能。无论是防止 XSS 攻击、在页面中显示代码片段，还是处理邮件模板中的特殊符号，都需要用到 HTML 转义。本文介绍 HTML 实体编码工具 的使用方法和实用技巧。
📋 什么是 HTML 实体编码
HTML 实体编码是将特殊字符转换为 HTML 实体引用的过程。例如将 < 转换为 <，将 > 转换为 >。这样浏览器就不会把这些字符当作 HTML 标签解析，而是原样显示出来。
HTML 实体有三种格式：
| 格式 | 示例 | 说明 |
|---|---|---|
| 命名实体 | < |
使用有意义的名称，可读性好 |
| 数字实体 | < |
使用 Unicode 码点的十进制 |
| 十六进制实体 | < |
使用 Unicode 码点的十六进制 |
三种格式效果相同，区别在于可读性和字符覆盖范围。命名实体只支持有限的常用字符，而数字实体可以表示任何 Unicode 字符。
使用场景
防止 XSS 攻击：将用户输入显示到页面前进行 HTML 转义，是防御跨站脚本攻击的基本手段。例如用户评论中包含 <script>alert('xss')</script>，转义后变为 <script>alert('xss')</script>，浏览器不会执行。
显示代码片段：在技术博客或文档中展示 HTML 代码时，必须将尖括号等字符转义，否则浏览器会将其当作标签解析。
邮件模板开发：邮件客户端对 HTML 的解析差异很大，使用 HTML 实体可以确保特殊字符在各客户端正确显示。
🔧 如何使用 jsjson.com 的 HTML 实体编码工具
打开 HTML 实体编码工具，界面分为输入区和输出区，操作非常直观：
第一步：在左侧输入区粘贴需要编码或解码的文本
第二步：选择编码格式
- 命名实体（
<）— 推荐用于常见特殊字符 - 数字实体（
<）— 可表示任意 Unicode 字符 - 十六进制（
<）— 与数字实体等价，部分开发者更习惯
第三步：点击「编码 →」按钮进行编码，或点击「← 解码」按钮进行解码
第四步：在右侧输出区查看结果，点击「复制」按钮一键复制
工具还内置了常用 HTML 实体参考表，包含 <、>、&、"、'、空格、版权符号、商标符号等常用字符的实体表示。
💡 HTML 实体编码实用技巧
1. 批量转义用户输入内容
在处理表单提交数据时，通常需要对所有用户输入进行 HTML 转义后再存储或显示。将整段文本粘贴到工具中，选择「数字实体」模式点击编码，即可一次性完成转义。
// 前端手动转义示例
function escapeHtml(str) {
const map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }
return str.replace(/[&<>"']/g, c => map[c])
}
2. 选择合适的编码格式
- 命名实体适合转义
<、>、&、"等常见字符，代码可读性最好 - 数字实体适合处理中文、日文等非 ASCII 字符，或 emoji 表情
- 十六进制实体与数字实体等价，在某些规范中更常用
一般建议：优先使用命名实体，命名实体不支持时使用数字实体。
3. 反向解码抓取的 HTML 内容
从网页抓取的文本经常包含 HTML 实体，例如 & 显示为乱码。使用工具的解码功能可以快速还原为正常字符。将包含实体的文本粘贴到输入区，点击「← 解码」即可。
4. 邮件模板中的特殊字符处理
邮件模板开发中，版权符号 ©、商标符号 ®、欧元符号 € 等容易出现编码问题。使用 HTML 实体可以保证兼容性：
<!-- 版权声明 -->
<p>© 2026 Company Name™. All rights reserved.</p>
<!-- 价格显示 -->
<p>Price: €99.00</p>
5. 在 HTML 中安全显示代码片段
技术文档中展示 HTML 代码示例时，必须对所有尖括号进行转义：
<!-- 错误：浏览器会解析为真正的 div 元素 -->
<p>使用 <div> 标签创建容器</p>
<!-- 正确：使用实体引用 -->
<p>使用 &lt;div&gt; 标签创建容器</p>
使用 jsjson.com 的 HTML 实体编码工具，只需粘贴代码片段，一键编码即可得到安全的转义结果。
❓ 常见问题 FAQ
HTML 编码和 URL 编码有什么区别？
HTML 编码用于 HTML 文档中，将特殊字符转为 &xx; 格式，防止 HTML 注入。URL 编码用于 URL 中，将特殊字符转为 %XX 格式，保证 URL 合法。两者用途不同，不能混用。需要 URL 编码可以使用 URL 编码解码工具。
命名实体和数字实体哪个更好？
命名实体可读性更好，但只支持约 250 个常用字符。数字实体可以表示任何 Unicode 字符。建议在可用时使用命名实体（如 < 而非 <），不支持时再用数字实体。
什么时候需要 HTML 编码？
在以下场景必须进行 HTML 编码：将用户输入显示到 HTML 页面时（防 XSS）、在 HTML 属性值中嵌入数据时、在邮件模板中显示特殊字符时、以及需要在 HTML 中展示代码片段时。
HTML 编码会影响 SEO 吗？
不会。搜索引擎完全理解 HTML 实体，< 和 < 对搜索引擎来说是等价的。正确使用 HTML 实体反而有助于搜索引擎正确理解页面内容。
如何在 JavaScript 中进行 HTML 编码？
除了使用在线工具，也可以用 JavaScript 代码实现。创建一个临时 DOM 元素，设置 textContent 后读取 innerHTML 即可获得编码结果。或者直接使用正则替换方法。对于少量字符的转义，代码方式更快；对于大量文本，使用 jsjson.com 的在线工具 更方便。
🔗 相关工具推荐
- URL 编码解码工具 — 处理 URL 中的特殊字符编码
- Unicode 编码解码工具 — Unicode 与中文之间的转换
- Hex 十六进制编解码工具 — 十六进制与文本之间的转换