HTML转义字符完全指南：从原理到实战，再也不用手动查表

为什么需要HTML转义字符？

假设你正在做一个博客网站。用户发了一条评论：“我最喜欢的编程语言是 <div>。”

如果你的网站直接把这段文本显示出来，浏览器会认为 <div> 是一个HTML标签，而不是文字内容。结果就是：用户的评论被当成代码执行了。

轻则页面样式错乱，重则黑客通过注入恶意脚本盗取用户信息。这就是为什么浏览器必须有一个"转义"机制——把特殊字符变成纯文本显示，而不是可执行的代码。

HTML转义字符（HTML Entity）就是干这个的。它用一种特殊的编码格式，告诉浏览器：“这段东西不是代码，是文字。”

HTML转义字符的三种写法

HTML里，转义字符有三种写法：

1. 命名实体（最常用）

用 & 开头，中间是名字，分号 ; 结尾。

这是最常见、最推荐的方式，因为一眼就能看出含义。

2. 数字实体（十进制）

用 &# 开头，中间是十进制数字，分号结尾。

数字实体的好处是：任何字符都能表示，哪怕它没有命名实体。

3. 数字实体（十六进制）

用 &#x 或 &#X 开头，中间是十六进制数字，分号结尾。

十六进制写法在 CSS 和 JavaScript 里更常见。

必须转义的5个核心字符

不是所有字符都需要转义。真正必须转义的只有这几个：

1. < → < —— 防止被当成HTML标签
2. > → > —— 防止闭合标签的语义混乱
3. & → & —— 防止被当成转义序列的开头
4. " → " —— 在属性值中必须转义
5. ' → ' 或 ' —— 在单引号属性中必须转义

其他字符（比如 ©、€、—）不转义也能正常显示，但转了兼容性更好——尤其是要兼容老旧浏览器时。

实际踩坑场景

场景一：在HTML属性里写JS代码

<!-- ❌ 错误 -->
<button onclick="alert("你好")">点击</button>

<!-- ✅ 正确 -->
<button onclick="alert(&quot;你好&quot;)">点击</button>

当属性值本身用双引号包裹时，内部的双引号必须转义，否则浏览器会以为属性提前结束了。

场景二：把代码片段嵌入文章

你在博客里展示一段HTML代码：

<div class="container">Hello</div>

如果你直接在文章里写 <div class="container">Hello</div>，浏览器会渲染成 <div class="container">Hello</div>——不是代码，是真正的 div 元素。

正确做法：

<div class="container">Hello</div>

或者更简单——用 <code> 或 <pre> 标签包裹，现代浏览器对里面的 < 和 > 有宽容处理。但如果是嵌套在属性值里的代码，转义是唯一的办法。

场景三：URL中的特殊字符

URL里包含特殊字符时也必须转义：

https://example.com/search?q=你好&lang=zh  ← ❌ 这里的&会被当成参数分隔符
https://example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh  ← ✅ URL编码

注意：URL中用的是 百分号编码（Percent-Encoding），不是HTML实体编码。这两个虽然都叫"编码"，但应用场景完全不同。

很多人在这三个编码之间混用，导致页面显示乱码或者链接失效。你在 navbox 上可以用 URL编码/解码工具 和 Base64编码/解码工具 分别处理这两种编码。

常见中文符号的HTML实体

写文章时经常用到这些中文标点，但很多人不知道它们的HTML实体：

这些叫"智能引号"或"排版引号"。直接用键盘上的 " 和 ' 虽然也能显示，但在专业排版中，智能引号的弧度和间距更好看。

用编程方式转义

手动转义太累了。几乎所有主流语言都有内置函数：

JavaScript

const escapeHTML = (str) =>
  str.replace(/[&<>"']/g, c => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  })[c]);

escapeHTML('Hello <world> & "friends"');
// 输出: Hello &lt;world&gt; &amp; &quot;friends&quot;

Python

import html
html.escape('Hello <world> & "friends"')
# 输出: Hello &lt;world&gt; &amp; &quot;friends&quot;

Go

import "html"
html.EscapeString("Hello <world> & \"friends\"")

Java

org.apache.commons.text.StringEscapeUtils.escapeHtml4("Hello <world> & \"friends\"");

相关工具推荐

navbox 上提供了多款与编码相关的工具，帮你处理各种编码转换：

总结

HTML转义字符的核心就一句话：把浏览器会当成"代码"的字符，变成浏览器当成"文字"的编码。

记住这5个必须转义的字符——<、>、&、"、'——你的页面就不会再被特殊字符搞崩了。其他字符按需转义即可。如果你经常需要处理这些编码转换，navbox 上的在线工具比手动查表快得多。

编码这件事听着枯燥，但它是Web开发的基石之一。搞懂了转义原理，你再看任何乱码页面，都能一眼看出问题出在哪。