一个 “&” 符号引发的页面崩溃：你真的会用 HTML 转义吗？

一、为什么需要转义字符串

在 HTML 和 JavaScript 中，部分字符具有特殊功能（如 HTML 的< >用于定义标签，JavaScript 的\用于转义），无法直接作为文本显示；同时，ASCII 字符集中未定义的特殊字符（如版权符号 ©、希腊字母 α）也需通过转义形式呈现。转义字符串（也称字符实体）的核心作用就是解决这两个问题，确保特殊字符能被浏览器或脚本正确解析并显示。

二、转义字符串的组成规则

HTML 转义字符串（字符实体）统一由三部分构成：

1. 起始符号：&（英文 ampersand）

2. 核心标识：两种形式可选

• 实体名称：如lt（对应 “less than”，即小于号<）

• 实体编号：# + 字符的 ASCII/Unicode 编码，如#60（对应小于号<）

1. 结束符号：;（分号，不可省略）

示例：显示小于号<，可使用<（实体名称）或<（实体编号）。

实体名称与实体编号的对比

对比维度	实体名称	实体编号
优势	语义清晰、便于记忆（如©直观对应版权符号）	兼容性强，所有浏览器均支持
劣势	部分老旧浏览器不支持最新实体名称	编码无语义，难以记忆
注意事项	严格区分大小写（如Α对应大写希腊字母 Α，α对应小写 α）	编码需准确匹配字符的 ASCII/Unicode 值

三、HTML 特殊转义字符表

1. 最常用字符实体

显示效果	说明	实体名称	实体编号
（半角空白）	半方大的空白	 	 
（全角空白）	全方大的空白	 	 
（非换行空白）	不断行的空白格（解决 HTML 自动合并空格问题）	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	& 符号	&amp;	&#38;
"	双引号	&quot;	&#34;
©	版权符号	&copy;	&#169;
®	已注册商标符号	&reg;	&#174;
™	美国商标符号	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

2. ISO 8859-1（Latin-1）字符集

HTML 4.01 默认支持 ISO 8859-1 字符集，涵盖西欧语言字符、常用符号等，以下为完整对照表（“实体名称” 简称为 “名称”，“实体编号” 简称为 “编号”）：

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
（空白）	 	 	¡	¡	¡	¢	¢	¢	£	£	£	¤	¤	¤
¥	¥	¥	¦	¦	¦	§	§	§	¨	¨	¨	©	©	©
ª	ª	ª	«	«	«	¬	¬	¬	­	­	­	®	®	®
¯	¯	¯	°	°	°	±	±	±	²	²	²	³	³	³
´	´	´	µ	µ	µ	¶	¶	¶	·	·	·	¸	¸	¸
¹	¹	¹	º	º	º	»	»	»	¼	¼	¼	½	½	½
¾	¾	¾	¿	¿	¿	À	À	À	Á	Á	Á	Â	Â	Â
Ã	Ã	Ã	Ä	Ä	Ä	Å	Å	Å	Æ	Æ	Æ	Ç	Ç	Ç
È	È	È	É	É	É	Ê	Ê	Ê	Ë	Ë	Ë	Ì	Ì	Ì
Í	Í	Í	Î	Î	Î	Ï	Ï	Ï	Ð	Ð	Ð	Ñ	Ñ	Ñ
Ò	Ò	Ò	Ó	Ó	Ó	Ô	Ô	Ô	Õ	Õ	Õ	Ö	Ö	Ö
×	×	×	Ø	Ø	Ø	Ù	Ù	Ù	Ú	Ú	Ú	Û	Û	Û
Ü	Ü	Ü	Ý	Ý	Ý	Þ	Þ	Þ	ß	ß	ß	à	à	à
á	á	á	â	â	â	ã	ã	ã	ä	ä	ä	å	å	å
æ	æ	æ	ç	ç	ç	è	è	è	é	é	é	ê	ê	ê
ë	ë	ë	ì	ì	ì	í	í	í	î	î	î	ï	ï	ï
ð	ð	ð	ñ	ñ	ñ	ò	ò	ò	ó	ó	ó	ô	ô	ô
õ	õ	õ	ö	ö	ö	÷	÷	÷	ø	ø	ø	ù	ù	ù
ú	ú	ú	û	û	û	ü	ü	ü	ý	ý	ý	þ	þ	þ
ÿ	ÿ	ÿ	-	-	-	-	-	-	-	-	-	-	-	-

3. 数学符号与希腊字母

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
ƒ	ƒ	ƒ	Α	Α	Α	Β	Β	Β	Γ	Γ	Γ	Δ	Δ	Δ
Ε	Ε	Ε	Ζ	Ζ	Ζ	Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ	Ν	Ν	Ν	Ξ	Ξ	Ξ
Ο	Ο	Ο	Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ	Τ	Τ	Τ
Υ	Υ	Υ	Φ	Φ	Φ	Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ	δ	δ	δ	ε	ε	ε
ζ	ζ	ζ	η	η	η	θ	θ	θ	ι	ι	ι	κ	κ	κ
λ	λ	λ	μ	μ	μ	ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	ς	ς	ς	σ	σ	σ	τ	τ	τ
υ	υ	υ	φ	φ	φ	χ	χ	χ	ψ	ψ	ψ	ω	ω	ω
ϑ	ϑ	ϑ	Υ	ϒ	ϒ	ϖ	ϖ	ϖ	•	•	•	…	…	…
′	′	′	″	″	″	‾	‾	‾	⁄	⁄	⁄	℘	℘	℘
ℑ	ℑ	ℑ	ℜ	ℜ	ℜ	™	™	™	ℵ	ℵ	ℵ	←	←	←
↑	↑	↑	→	→	→	↓	↓	↓	↔	↔	↔	↵	↵	↵
⇐	⇐	⇐	⇑	⇑	⇑	⇒	⇒	⇒	⇓	⇓	⇓	⇔	⇔	⇔
∀	∀	∀	∂	∂	∂	∃	∃	∃	∅	∅	∅	∇	∇	∇
∈	∈	∈	∉	∉	∉	∋	∋	∋	∏	∏	∏	∑	∑	∑
−	−	−	∗	∗	∗	√	√	√	∝	∝	∝	∞	∞	∞
∠	∠	∠	∧	∧	∧	∨	∨	∨	∩	∩	∩	∪	∪	∪
∫	∫	∫	∴	∴	∴	∼	∼	∼	≅	≅	≅	≈	≈	≈
≠	≠	≠	≡	≡	≡	≤	≤	≤	≥	≥	≥	⊂	⊂	⊂
⊃	⊃	⊃	⊄	⊄	⊄	⊆	⊆	⊆	⊇	⊇	⊇	⊕	⊕	⊕
⊗	⊗	⊗	⊥	⊥	⊥	⋅	⋅	⋅	⌈	⌈	⌈	⌉	⌉	⌉
⌊	⌊	⌊	⌋	⌋	⌋	⟨	⟨	〈	⟩	⟩	〉	◊	◊	◊
♠	♠	♠	♣	♣	♣	♥	♥	♥	♦	♦	♦	-	-	-

4. 重要国际标记

显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号	显示	名称	编号
"	&quot;	&#34;	&	&amp;	&#38;	<	&lt;	&#60;	>	&gt;	&#62;	Œ	&OElig;	&#338;
œ	&oelig;	&#339;	Š	&Scaron;	&#352;	š	&scaron;	&#353;	Ÿ	&Yuml;	&#376;	ˆ	&circ;	&#710;
˜	&tilde;	&#732;	（半角空白）	&ensp;	&#8194;	（全角空白）	&emsp;	&#8195;	（窄空白）	&thinsp;	&#8201;	‌	&zwnj;	&#8204;
‍	&zwj;	&#8205;	‎	&lrm;	&#8206;	‏	&rlm;	&#8207;	–	&ndash;	&#8211;	—	&mdash;	&#8212;
‘	&lsquo;	&#8216;	’	&rsquo;	&#8217;	‚	&sbquo;	&#8218;	“	&ldquo;	&#8220;	”	&rdquo;	&#8221;
„	&bdquo;	&#8222;	†	&dagger;	&#8224;	‡	&Dagger;	&#8225;	‰	&permil;	&#8240;	‹	&lsaquo;	&#8249;
›	&rsaquo;	&#8250;	€	&euro;	&#8364;	-	-	-	-	-	-	-	-	-

四、JavaScript 转义符

JavaScript 中，转义符以\（反斜杠）开头，用于表示特殊控制字符或避免语法冲突，常见转义序列如下：

转义序列	对应字符	说明
\b	退格符	使光标向左移动一位
\f	走纸换页符	用于打印机换页
\n	换行符	光标移至下一行开头
\r	回车符	光标移至当前行开头
\t	横向跳格符（Tab）	光标向右跳格（等同于 Ctrl+I）
\'	单引号	避免与字符串外层单引号冲突（如'He said \'Hello\'!'）
\"	双引号	避免与字符串外层双引号冲突（如"She said \"Hi\"!"）
\\	反斜杠	表示一个真实的反斜杠（因\本身为转义符，需双重转义）

注意：若需在 JavaScript 中直接使用反斜杠（如文件路径），必须书写为\\（双重反斜杠），否则会被解析为转义符。

五、编码转换工具（转 Unicode/HTML 实体）

以下为不同编程语言中，实现 “普通字符→Unicode/HTML 实体” 或 “反向转换” 的代码示例（代码来源于网络）：

1. JavaScript 版（字符转 Unicode）

\<script>

&#x20;   var test = "你好abc"; // 待转换的字符串

&#x20;   var str = "";

&#x20;   for (var i = 0; i < test.length; i++) {

&#x20;       var temp = test.charCodeAt(i).toString(16); // 将字符转为16进制Unicode编码

&#x20;       // 补零至4位，拼接为\uXXXX格式

&#x20;       str += "\\\u" + new Array(5 - String(temp).length).join("0") + temp;

&#x20;   }

&#x20;   document.write(str); // 输出：\u4f60\u597d\u0061\u0062\u0063

\</script>

2. VBScript 版（字符转 Unicode/HTML 实体）

（1）字符转 Unicode

Function Unicode(str1)

    Dim str, temp

    str = ""

    For i = 1 To Len(str1)

        temp = Hex(AscW(Mid(str1, i, 1))) // 转为16进制Unicode编码

&#x20;       If Len(temp) < 5 Then temp = Right("0000" & temp, 4) // 补零至4位

&#x20;       str = str & "\u" & temp

&#x20;   Next

&#x20;   Unicode = str

End Function

（2）字符转 HTML 实体

Function htmlentities(str)

    For i = 1 To Len(str)

        char = Mid(str, i, 1)

        If AscW(char) > 128 Then

            // 非ASCII字符转为\&#XXX;格式

            htmlentities = htmlentities & "\&#" & AscW(char) & ";"

        Else

            // ASCII字符直接保留

            htmlentities = htmlentities & char

        End If

    Next

End Function

3. ColdFusion 版（字符转 HTML 实体）

function nochaoscode(str)

{

    var new\_str = "";

    for(i=1; i lte len(str); i=i+1){

        if(asc(mid(str,i,1)) lt 128){

            // ASCII字符直接保留

            new\_str = new\_str & mid(str,i,1);

        }else{

            // 非ASCII字符转为\&#XXX;格式

            new\_str = new\_str & "\&#" & asc(mid(str,i,1)) & ";";

        }

    }

    return new\_str;

}

4. PHP 版（字符与 HTML 实体互转）

PHP 可通过mbstring扩展的mb_convert_encoding函数实现双向转换，无需手动循环。

（1）普通字符→HTML 实体

// 将“你好”从GB2312编码转为HTML实体

echo mb\_convert\_encoding("你好", "HTML-ENTITIES", "gb2312"); 

// 输出：\你\好

（2）HTML 实体→普通字符

// 将HTML实体“\你\好”转回GB2312编码的“你好”

echo mb\_convert\_encoding("\你\好", "gb2312", "HTML-ENTITIES"); 

// 输出：你好

（3）整页 HTML 实体转换

若需将整个 PHP 页面的输出转为 HTML 实体，在文件头部添加以下代码：

// 1. 设置页面原始编码（根据网站实际编码调整，如UTF-8）

mb\_internal\_encoding("gb2312"); 

// 2. 设置HTTP输出编码为HTML-ENTITIES

mb\_http\_output("HTML-ENTITIES"); 

// 3. 启用输出缓冲，自动转换编码

ob\_start('mb\_output\_handler');

六、注意事项

1. HTML 空格处理：HTML 会自动合并多个连续空格为 1 个，若需显示多个空格，需使用 （非换行空格）、 （半角空格）或 （全角空格）。

2. 实体名称大小写：HTML 实体名称严格区分大小写，如&Copy;（首字母大写）无法识别，必须写为©（全小写）。

3. JavaScript 反斜杠：永远不要直接使用单个\，需用\\表示真实反斜杠，避免被解析为转义符导致错误。

4. 编码兼容性：若网站使用 UTF-8 编码，部分非 ASCII 字符（如中文）可直接显示，但为兼容老旧浏览器，建议转为 HTML 实体（&#XXX;）。

---

来源：本文整理自 HTML 转义字符 | 西西软件资讯