【HTML-5】HTML 实体：完整指南与最佳实践

1. 什么是 HTML 实体？

HTML 实体是一种在 HTML 文档中表示特殊字符的方法，这些字符如果直接使用可能会与 HTML 标记混淆，或者无法通过键盘直接输入。实体由 & 符号开始，以 ; 分号结束。

<p>这是一个小于符号的实体：&lt;</p>

2. 为什么需要使用 HTML 实体？

1. 避免与 HTML 标签冲突 ：某些字符如 < 和 > 是 HTML 标签的一部分，直接使用可能导致解析错误。

2. 显示键盘上没有的字符：如版权符号 (©)、商标符号 (™) 等。

3. 确保字符在不同编码下正确显示：特别是当文档编码与服务器设置不一致时。

3. HTML 实体的三种表示方式

3.1 命名实体

最易读的形式，使用容易记忆的名称：

&实体名称;

常见命名实体：

• < - 小于号 (<)
• > - 大于号 (>)
• & - 和号 (&)
• " - 双引号 (")
• ' - 单引号 (')
•   - 不换行空格
• © - 版权符号 (©)
• ® - 注册商标符号 (®)

3.2 数字实体（十进制）

使用字符的十进制 Unicode 码点：

&#数字;

示例：

• < - <
• © - ©

3.3 数字实体（十六进制）

使用字符的十六进制 Unicode 码点：

&#x十六进制数字;

示例：

• < - <
• © - ©

4. 常用的 HTML 实体分类

4.1 保留字符（必须转义）

字符	实体名称	实体编号
<	&lt;	&#60;
>	&gt;	&#62;
&	&amp;	&#38;
"	&quot;	&#34;
'	'	&#39;

4.2 常用符号

符号	实体名称	实体编号
©	©	©
®	®	®
™	™	™
€	€	€
£	£	£
¥	¥	¥
§	§	§
¶	¶	¶

4.3 空格相关

描述	实体名称	实体编号
不换行空格	 	 
半角空格	 	 
全角空格	 	 
窄空格	 	 

4.4 数学符号

符号	实体名称	实体编号
×	×	×
÷	÷	÷
±	±	±
∞	∞	∞
∑	∑	∑
√	√	√
≠	≠	≠

4.5 箭头

符号	实体名称	实体编号
←	←	←
→	→	→
↑	↑	↑
↓	↓	↓
↔	↔	↔

5. 实际应用示例

5.1 在 HTML 中显示代码

<pre>
&lt;div class="container"&gt;
  &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/div&gt;
</pre>

5.2 特殊符号的使用

<p>版权所有 &copy; 2023 我的公司&trade;。价格：&euro;99.99</p>

5.3 数学表达式

<p>勾股定理：a&sup2; + b&sup2; = c&sup2;</p>
<p>积分符号：&int; f(x)dx</p>

6. HTML5 中的变化

HTML5 引入了许多新的实体，特别是数学符号和图形符号。同时，HTML5 对实体解析更加宽松：

1. 某些情况下可以省略分号（但不推荐）
2. 支持更多的数学和符号实体
3. 对未知实体更宽容（会作为文本显示）

7. 最佳实践

1. 始终使用命名实体（当可用时），因为它们更易读和维护
2. 不要过度使用   进行布局控制 - 应该使用 CSS
3. 对于常用符号，考虑直接使用 Unicode 字符（如果编码支持）
4. 在属性值中，必须对引号进行转义
5. 在 JavaScript 中生成 HTML 时，确保正确转义

8. 常见问题解答

Q: 什么时候必须使用 HTML 实体？

A: 必须使用实体的情况包括：

• 当字符是 HTML 语法的一部分（如 <, >, &）
• 当字符在属性值中且与属性引号冲突时
• 当字符可能因编码问题无法正确显示时

Q: 如何输入 Emoji？需要使用实体吗？

A: 现代浏览器通常支持直接输入 Emoji（如 😊），但也可以使用数字实体（如 😊 表示 😊）。

Q:   和普通空格有什么区别？

A:   是"不换行空格"，浏览器不会在此处换行，而普通空格在换行时会被当作空格处理。

9. 工具与资源

1. W3C 官方实体列表
2. 实体转换工具
3. Unicode 字符查找

10. 总结

HTML 实体是网页开发中不可或缺的一部分，正确处理特殊字符可以避免许多显示问题和语法错误。掌握常用的 HTML 实体不仅能提高代码质量，还能让你的网页内容更加丰富和专业。随着 HTML5 的发展，实体支持越来越完善，开发者可以更自由地表达各种符号和特殊字符。

记住关键原则：当字符可能引起歧义或无法保证正确显示时，使用实体是最安全的选择。