理解 HTML 实体 的作用与必要性
掌握 保留字符（如 <, >, &）的转义方法
熟悉常用 命名实体 与 数字实体 的使用场景
学会处理 不可见空格、货币符号、数学符号 等特殊内容
遵循 最佳实践，提升代码可读性与兼容性
HTML 实体（HTML Entities） 是用于在网页中安全显示特殊字符的编码方式。这些字符要么：
在 HTML 中有保留含义（如 < 表示标签开始）
无法直接输入（如 ©、€、∞）
浏览器会自动合并或忽略（如多个连续空格）
基本语法
&实体名称; <!-- 命名实体 -->
&#数字; <!-- 十进制数字实体 -->
&#x十六进制; <!-- 十六进制数字实体 -->所有实体必须以 & 开头，以 ; 结尾
核心原则：任何可能被 HTML 解析器误解的字符，都应使用实体表示。
必须转义
示例：安全显示代码片段
<p>在 HTML 中，if 条件写作：if (a < b) { ... }</p>
<!-- 渲染为：if (a < b) { ... } -->⚠️ 严重错误：若在属性值中未转义引号：
<!-- 错误！ --> <img src="image.jpg" alt="He said "Hello""> <!-- 正确 --> <img src="image.jpg" alt="He said "Hello"">
示例：专业排版
<p>温度：25°C</p>
<p>误差范围：±2%</p>
<p>版权所有 © 2025 MySite</p>注意：美元符号
$通常无需转义，但为统一风格可用$
作用：防止浏览器合并空格或在单词间换行
典型场景：
人名：张 三
单位：100 km/h
编号：第 1 章
<!-- 防止 "12:00 PM" 被拆到两行 -->
<p>会议时间：12:00 PM</p>适用于学术、技术类网站
通过组合字符生成带重音的字母：
注意：现代网页更推荐直接使用 UTF-8 编码输入这些字符（如
á），而非组合实体。
最佳实践
<!-- 推荐：可读性高 -->
<p>版权 © 2025</p>
<p>a < b && b > c</p>
<!-- 避免：除非必要 -->
<p>© 2025</p>
<p><script></p>危险示例（XSS 漏洞）：
<!-- 用户输入：<script>alert('hack')</script> -->
<div>评论：{{ user_input }}</div>
<!-- 若未转义，将执行恶意脚本！ -->
<!-- 安全做法：转义所有 < > & " ' -->
<div>评论：<script>alert('hack')</script></div>安全提示：用户生成内容（UGC）必须进行 HTML 转义！
UTF-8 是默认编码
在 <head> 中声明：<meta charset="UTF-8">
大多数符号（如 ©、€、→）可直接输入，无需实体
仅对保留字符强制使用实体
<, >, &, ", ' 必须转义
其他符号按团队规范决定
框架自动转义
React、Vue、Angular 等框架在渲染时自动转义文本内容
仅在 dangerouslySetInnerHTML 等特殊场景需手动处理
为什么在 HTML 属性值中使用双引号时，内部的双引号必须转义？单引号是否也需要？
如何用 HTML 实体实现“10⁵”这样的上标效果？是否有更好的替代方案？
在支持 UTF-8 的现代网页中，哪些场景仍必须使用 HTML 实体？哪些可以避免？