HTML实体字符详解

HTML实体字符详解

HTML 转义字符（也称为字符实体）用于在 HTML 中表示保留字符或无法直接输入的字符，以防止与 HTML 标签混淆或确保特殊字符正确显示。

---

一、为什么需要转义字符

1. 避免与HTML标签冲突：如 < 和 > 是HTML标签的界定符
2. 显示特殊符号：如版权符号、货币符号等
3. 输入键盘上没有的字符：如数学符号、希腊字母等
4. 确保编码一致性：防止不同编码导致的显示问题

---

二、转义字符的三种表示形式

1. 实体名称：&entity_name; （如  ）
2. 实体编号：&#entity_number; （如  ）
3. 十六进制表示：&#xhex_number; （如  ）

---

三、常用HTML转义字符表

1. 必须转义的字符

字符	实体名称	实体编号	说明
<	&lt;	&#60;	小于号
>	&gt;	&#62;	大于号
&	&amp;	&#38;	和号
"	&quot;	&#34;	双引号
’	&apos;	&#39;	单引号（HTML5新增）

2. 常用特殊字符

字符	实体名称	实体编号	说明
	 	 	不间断空格
©	©	©	版权符号
®	®	®	注册商标
™	™	™	商标符号
€	€	€	欧元符号
£	£	£	英镑符号
¥	¥	¥	日元/人民币符号
§	§	§	章节符号
¶	¶	¶	段落符号

3. 数学符号

字符	实体名称	实体编号	说明
×	×	×	乘号
÷	÷	÷	除号
±	±	±	正负号
≠	≠	≠	不等于
≤	≤	≤	小于等于
≥	≥	≥	大于等于
°	°	°	度符号

4. 箭头符号

字符	实体名称	实体编号	说明
←	←	←	左箭头
→	→	→	右箭头
↑	↑	↑	上箭头
↓	↓	↓	下箭头
↔	↔	↔	左右箭头

---

四、使用示例

<p>HTML标签示例：&lt;p&gt;这是一个段落&lt;/p&gt;</p>
<p>版权信息：&copy; 2023 公司名称</p>
<p>数学公式：2 &times; 3 = 6</p>
<p>温度：25&deg;C</p>
<p>空格对比："Hello&nbsp;&nbsp;&nbsp;World" vs "Hello   World"</p>
<p>货币：&yen;100 &euro;10 &pound;8</p>

---

五、注意事项

1. XHTML要求：在XHTML中，所有特殊字符都必须转义
2. 属性值中的引号：属性值中的引号应该转义，特别是当属性值本身包含引号时

   <img alt="这是&quot;特殊&quot;图片">
   

3. JavaScript中的使用：在JS字符串中使用HTML转义字符时需要双重转义
4. CSS内容属性：在CSS的content属性中使用时需要不同的语法

   .class:after { content: "\00A9"; } /* CSS中使用十六进制 */
   

5. 编码一致性：确保HTML文档的字符编码声明与实际编码一致（推荐UTF-8）

---

六、高级用法

1. 组合字符：可以组合多个转义字符

   <p>&#x2665; &hearts; &lt;3 都表示心形</p>
   

2. 罕见字符：可以通过Unicode码点引用几乎任何字符

   <p>数学积分符号：&int; (&#8747;)</p>
   <p>希腊字母：&alpha; &beta; &gamma;</p>
   

3. 防止XSS攻击：在动态生成HTML时，必须对用户输入进行转义

   // JavaScript示例
   function escapeHtml(text) {
     return text.replace(/[&<>"']/g, function(match) {
       return {
         '&': '&amp;',
         '<': '&lt;',
         '>': '&gt;',
         '"': '&quot;',
         "'": '&apos;'
       }[match];
     });
   }
   

完整的实体名称表见以下链接：
https://www.w3school.com.cn/charsets/ref_html_entities_4.asp