Base64、URL编码与HTML实体：每位开发者都应该掌握的编码知识
做过一段时间Web开发，你一定遇到过编码问题。URL因为一个多余的 & 符号而断裂，HTML页面把 < 直接显示出来而不是解析为标签，API返回一串看不懂的 SGVsbG8gV29ybGQ=。这些都是编码问题，而最常见的三种编码方案分别是：Base64、URL编码和HTML实体。
本文解释每种方案的工作原理，提供具体示例，并推荐可以在线免费使用的工具，无需安装任何软件。
什么是Base64？
Base64是一种用可打印ASCII字符表示二进制数据的编码方式。它将任意字节序列映射到64个字符组成的字母表：A–Z、a–z、0–9、+ 和 /。输出结果始终是文本，因此可以安全地嵌入到不支持原始二进制数据的场景中——电子邮件附件、JSON数据体、CSS中的 data: URL以及JWT令牌都依赖Base64。
示例——对"你好世界"进行编码：
- 输入：
Hello World - Base64输出：
SGVsbG8gV29ybGQ=
末尾的 = 是填充字符。Base64的输出长度始终是4的倍数。
适用场景：
- 将图片或字体直接嵌入CSS或HTML（
data:image/png;base64,...） - 为只接受文本的JSON API编码二进制数据
- 读取或生成JWT令牌（Header和Payload部分采用Base64url编码）
Base64不是加密。任何人看到这串字符都可以在几秒内解码。请用它来编码，而非隐藏信息。
使用 FileCrank Base64 在线编解码工具 立即体验。
什么是URL编码（百分号编码）？
URL只能安全地包含有限的字符集。空格、&、=、/ 以及非ASCII字符在URL中具有结构性含义，或者根本不合法。URL编码（正式名称为百分号编码）将不安全的字符替换为 % 加上该字符UTF-8字节值对应的两位十六进制数字。
示例——对"Hello World"进行URL编码：
- 输入：
Hello World - 编码输出：
Hello%20World
空格变为 %20，& 变为 %26，/ 变为 %2F。
适用场景：
- 构建查询字符串：
?q=hello%20world&lang=zh - 在表单数据中传递特殊字符
- 构建包含用户输入的API请求
现代JavaScript提供了 encodeURIComponent() 方法，但当你需要检查或调试一个已编码的URL时，在线工具比打开控制台更快捷。
使用 FileCrank URL 编解码在线工具 进行编码和解码。
什么是HTML实体？
HTML将某些字符用作语法符号。尖括号 < 和 > 用于界定标签，& 用于开始实体引用，双引号 " 用于界定属性值。如果你的内容中包含这些字符的字面形式——比如想在页面上展示源代码——就必须对它们进行转义，否则浏览器会将其解析为标记。
HTML实体用命名引用或数字引用替换这些字符：
示例——将HTML标签显示为纯文本：
若要在页面上将 <h1>Hello World</h1> 显示为文字，需要写成：
<h1>Hello World</h1>
适用场景：
- 在文档或博客中展示代码示例
- 在将用户输入插入HTML之前进行转义，防止XSS漏洞
- 插入排版符号（
—、©、 ）
使用 FileCrank HTML实体编解码在线工具 快速完成转义和反转义。
三种编码方案对比
同一段输入经过三种方案处理后的结果：
三者解决的问题不同，不可互换：
- Base64 将二进制数据转为文本。适用于需要在纯文本上下文中嵌入二进制数据的场景。
- URL编码 处理URL中非法或有歧义的字符。适用于构建URL或查询字符串。
- HTML实体 处理HTML语法保留字符。适用于在HTML文档中输出文本内容。
常见错误
错误一：将Base64用于安全目的。 Base64的输出看起来像乱码，但可以被立即还原。不要用它"隐藏"密码或令牌，应使用正规的加密或哈希算法。
错误二：对URL进行二次编码。
对已经编码的字符串再次调用 encodeURIComponent()，会得到 %2520 而非 %20。应先解码，再编码。
错误三：在模板中忘记转义HTML。 将用户数据直接插入HTML而不转义，是XSS漏洞的首要成因。渲染前务必进行转义。
立即使用工具
三款工具全部免费，完全在浏览器中运行，无需注册账号：
建议收藏。你每周至少会用到其中一款。