HTML实体与字符引用

HTML实体用于显示特殊字符，避免与HTML语法冲突或显示不可见字符。

什么是HTML实体

实体编码以&开头、;结尾，表示特殊字符。

&lt;     <!-- 小于号 < -->
&gt;     <!-- 大于号 > -->
&amp;    <!-- &符号 -->
&nbsp;   <!-- 空格 -->

必须转义的字符

HTML语法字符

<!-- 显示：小于号 < -->
<p>小于号：&lt;</p>

<!-- 显示：大于号 > -->
<p>大于号：&gt;</p>

<!-- 显示：&符号 -->
<p>符号：&amp;</p>

<!-- 显示：双引号 -->
<p>引号：&quot;</p>

<!-- 显示：单引号 -->
<p>单引：&apos;</p>

使用场景

<!-- 显示代码示例 -->
<pre>
if (a &lt; b) {
  console.log("a小于b");
}
</pre>

<!-- 属性值包含引号 -->
<div title="他说&quot;你好&quot;">提示</div>

常用字符实体

空格与空白

&nbsp;    <!-- 不换行空格 -->
&ensp;    <!-- 半角空格（en空格） -->
&emsp;    <!-- 全角空格（em空格） -->
&thinsp;  <!-- 窄空格 -->

数学符号

&plus;     <!-- + 加号 -->
&minus;    <!-- - 减号 -->
&times;    <!-- × 乘号 -->
&divide;   <!-- ÷ 除号 -->
&equals;   <!-- = 等号 -->
&ne;       <!-- ≠ 不等号 -->
&lt;       <!-- < 小于 -->
&gt;       <!-- > 大于 -->
&le;       <!-- ≤ 小于等于 -->
&ge;       <!-- ≥ 大于等于 -->

箭头符号

&larr;     <!-- ← 左箭头 -->
&rarr;     <!-- → 右箭头 -->
&uarr;     <!-- ↑ 上箭头 -->
&darr;     <!-- ↓ 下箭头 -->
&harr;     <!-- ↔ 双向箭头 -->
&crarr;    <!-- ↵ 回车箭头 -->

特殊符号

&copy;     <!-- © 版权 -->
&reg;      <!-- ® 注册商标 -->
&trade;    <!-- ™ 商标 -->
&deg;      <!-- ° 度 -->
&plusmn;   <!-- ± 正负号 -->
&para;     <!-- ¶ 段落符号 -->
&sect;     <!-- § 章节符号 -->
&bull;     <!-- • 项目符号 -->

货币符号

&cent;     <!-- ¢ 分 -->
&pound;    <!-- £ 英镑 -->
&euro;     <!-- € 欧元 -->
&yen;      <!-- ¥ 日元/人民币 -->
&dollar;   <!-- $ 美元 -->

引号符号

&quot;     <!-- " 双引号 -->
&ldquo;    <!-- " 左双引号 -->
&rdquo;    <!-- " 右双引号 -->
&lsquo;    <!-- ' 左单引号 -->
&rsquo;    <!-- ' 右单引号 -->
&apos;     <!-- ' 单引号 -->

数字引用

十进制引用

&#60;      <!-- < 小于号 -->
&#62;      <!-- > 大于号 -->
&#38;      <!-- & 符号 -->
&#169;     <!-- © 版权 -->
&#8364;    <!-- € 欧元 -->

十六进制引用

&#x3C;     <!-- < 小于号 -->
&#x3E;     <!-- > 大于号 -->
&#x26;     <!-- & 符号 -->
&#xA9;     <!-- © 版权 -->
&#x20AC;   <!-- € 欧元 -->

数字引用支持任意Unicode字符，十六进制以x开头。

特殊Unicode字符

&#x1F600;  <!-- 笑脸emoji -->
&#x1F389;  <!-- 庆祝emoji -->
&#x2713;   <!-- ✓ 对勾 -->
&#x2717;   <!-- ✗ 错勾 -->
&#x2665;   <!-- ♥ 心形 -->
&#x266B;   <!-- ♫ 音符 -->

常用实体速查表

基础字符

常用符号

实体vs直接字符

使用实体场景

<!-- HTML语法字符必须转义 -->
<p>if (x &lt; 10) ...</p>

<!-- 属性值内引号 -->
<a title="说&quot;你好&quot;">链接</a>

<!-- 连续空格 -->
<p>前&nbsp;&nbsp;&nbsp;后</p>

直接使用字符场景

<!-- UTF-8编码可直接显示 -->
<p>版权：© 2024</p>
<p>价格：¥99.00</p>
<p>温度：25°C</p>

UTF-8编码页面可直接显示大多Unicode字符，仅语法冲突字符需转义。

JavaScript处理

编码解码

// 编码
const encoded = encodeURIComponent('<>&');
// 结果：%3C%3E%26

// 解码实体
function decodeEntities(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

decodeEntities('&lt;&gt;&amp;'); // "<>&"

使用建议

要点总结

• < > & 必须转义为实体
•  实现连续空格
• © ® €等符号可用实体或直接显示
• 数字引用支持任意Unicode字符
• 十进制用&#数字，十六进制用&#x数字
• UTF-8编码页面可直接显示大多字符