HTML实体字符详解

HTML实体字符详解

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

一、为什么需要转义字符

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

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

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

三、常用HTML转义字符表

1. 必须转义的字符

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