知识库

Appearance

Return to top
On this page

HTML实体字符

HTML实体字符（HTML Entities）是用于在HTML文档中表示特殊字符的编码方式，主要用于显示那些在HTML中有特殊含义或键盘上难以输入的字符。

为什么需要HTML实体

在HTML中，某些字符具有特殊含义：

  • < 和 > 用于包围HTML标签
  • & 用于开始HTML实体
  • " 和 ' 用于包围属性值

如果需要在网页中显示这些字符，必须使用HTML实体。

常用HTML实体

特殊字符

显示字符HTML实体十进制十六进制描述
"&quot;&#34;&#x22;双引号
&&amp;&#38;&#x26;和号
'&apos;&#39;&#x27;单引号
<&lt;&#60;&#x3C;小于号
>&gt;&#62;&#x3E;大于号
¡&iexcl;&#161;&#xA1;倒置感叹号
¢&cent;&#162;&#xA2;分币符号
£&pound;&#163;&#xA3;英镑符号
¥&yen;&#165;&#xA5;日元符号
€&euro;&#8364;&#x20AC;欧元符号
©&copy;&#169;&#xA9;版权符号
®&reg;&#174;&#xAE;注册商标符号
™&trade;&#8482;&#x2122;商标符号
§&sect;&#167;&#xA7;章节符号
°&deg;&#176;&#xB0;度数符号

数学符号

显示字符HTML实体十进制十六进制描述
∀&forall;&#8704;&#x2200;对所有
∂&part;&#8706;&#x2202;偏微分
∃&exist;&#8707;&#x2203;存在
∅&empty;&#8709;&#x2205;空集
∇&nabla;&#8711;&#x2207;哈密顿算子
∈&isin;&#8712;&#x2208;属于
∉&notin;&#8713;&#x2209;不属于
∋&ni;&#8715;&#x220B;包含
∏&prod;&#8719;&#x220F;乘积
∑&sum;&#8721;&#x2211;求和

希腊字母

显示字符HTML实体十进制十六进制描述
Α&Alpha;&#913;&#x391;希腊字母阿尔法
Β&Beta;&#914;&#x392;希腊字母贝塔
Γ&Gamma;&#915;&#x393;希腊字母伽马
Δ&Delta;&#916;&#x394;希腊字母德尔塔
Ε&Epsilon;&#917;&#x395;希腊字母伊普西隆
Θ&Theta;&#920;&#x398;希腊字母西塔
Λ&Lambda;&#923;&#x39B;希腊字母拉姆达
Ξ&Xi;&#926;&#x39E;希腊字母克西
Π&Pi;&#928;&#x3A0;希腊字母派
Σ&Sigma;&#931;&#x3A3;希腊字母西格玛
Φ&Phi;&#934;&#x3A6;希腊字母斐
Ψ&Psi;&#936;&#x3A8;希腊字母普西
Ω&Omega;&#937;&#x3A9;希腊字母欧米伽
α&alpha;&#945;&#x3B1;希腊字母阿尔法（小写）
β&beta;&#946;&#x3B2;希腊字母贝塔（小写）
γ&gamma;&#947;&#x3B3;希腊字母伽马（小写）

箭头符号

显示字符HTML实体十进制十六进制描述
←&larr;&#8592;&#x2190;左箭头
↑&uarr;&#8593;&#x2191;上箭头
→&rarr;&#8594;&#x2192;右箭头
↓&darr;&#8595;&#x2193;下箭头
↔&harr;&#8596;&#x2194;左右箭头
↵&crarr;&#8629;&#x21B5;回车箭头

符号和标点

显示字符HTML实体十进制十六进制描述
♠&spades;&#9824;&#x2660;黑桃
♣&clubs;&#9827;&#x2663;梅花
♥&hearts;&#9829;&#x2665;红心
♦&diams;&#9830;&#x2666;方块
•&bull;&#8226;&#x2022;项目符号
…&hellip;&#8230;&#x2026;省略号
‰&permil;&#8240;&#x2030;千分比符号
′&prime;&#8242;&#x2032;分钟/英尺符号
″&Prime;&#8243;&#x2033;秒/英寸符号

实际应用示例

在文本中使用实体

html
<p>HTML中的小于号是 &lt;，大于号是 &gt;。</p>
<p>价格：&yen;100 或 &euro;1.50</p>
<p>版权 &copy; 2023 公司名称</p>
<p>温度：25&deg;C</p>
<p>商标：&trade; 服务 &reg;</p>

在属性中使用实体

html
<a href="page.html?name=John&amp;age=25">链接</a>
<input type="text" value="He said &quot;Hello&quot;">
<p title="Price: &gt; $100">&lt;span&gt;Content&lt;/span&gt;</p>

显示代码片段

html
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;示例页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;内容&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

数字实体表示法

除了命名实体，还可以使用数字实体：

十进制实体

html
<p>版权符号：&#169;</p>
<p>欧元符号：&#8364;</p>

十六进制实体

html
<p>版权符号：&#xA9;</p>
<p>欧元符号：&#x20AC;</p>

实体的JavaScript处理

编码和解码实体

javascript
// 解码HTML实体
function decodeHtml(html) {
  const txt = document.createElement('textarea');
  txt.innerHTML = html;
  return txt.value;
}

// 编码特殊字符为实体
function encodeHtml(html) {
  const txt = document.createElement('textarea');
  txt.textContent = html;
  return txt.innerHTML;
}

// 示例
const encoded = encodeHtml('<div>Hello & "World"</div>');
console.log(encoded); // &lt;div&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;

const decoded = decodeHtml('&lt;div&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;');
console.log(decoded); // <div>Hello & "World"</div>

最佳实践

1. 何时使用实体

  • 在HTML内容中显示特殊字符时
  • 需要显示HTML标签字符时
  • 显示版权、商标等符号时
  • 在属性值中包含特殊字符时

2. 命名实体 vs 数字实体

  • 优先使用命名实体，因为更具可读性
  • 当没有命名实体时，使用数字实体
  • 十六进制通常比十进制更常用

3. 常见错误

html
<!-- 错误 -->
<p>使用 < 和 > 来包围标签</p>

<!-- 正确 -->
<p>使用 &lt; 和 &gt; 来包围标签</p>

<!-- 错误 -->
<a href="page.html?name=John&age=25">链接</a>

<!-- 正确 -->
<a href="page.html?name=John&amp;age=25">链接</a>

特殊情况

非中断空格

html
<!-- 普通空格 -->
<p>普通空格</p>

<!-- 非中断空格（不会被折叠） -->
<p>非中断空格&nbsp;不会被折叠</p>

软连字符

html
<!-- 软连字符，仅在需要换行时显示 -->
<p>长单词：super&shy;cali&shy;fragilistic&shy;expialidocious</p>

HTML实体字符是编写正确HTML文档的重要部分，掌握这些实体有助于避免HTML解析错误，并能正确显示各种特殊字符。