HTML实体速查表 - 特殊字符编码Ref

HTML 实体（HTML Entities）是一段以 & 开头、以 ; 结尾的特殊文本序列，用于在 HTML 文档中表示那些具有特殊含义的字符或无法直接从键盘输入的字符。

使用实体的主要原因：

• 避免解析冲突：如 < 和 > 会被浏览器识别为标签边界，必须用 < 和 > 替代。
• 显示保留字符：& 本身是实体起始符，显示时需写成 &。
• 跨平台兼容：部分特殊符号（如版权符号 ©、商标符号 ®）使用实体可确保在不同编码环境下正确显示。
• 安全性：在用户输入中正确转义 HTML 实体是防止 XSS 攻击的重要手段之一。

实体名称（如 &）使用助记英文单词，易于记忆和阅读；实体编号使用 Unicode 码点，分为十进制（&）和十六进制（&）两种形式。

推荐做法：优先使用实体名称，因为代码可读性更好，便于团队协作和维护。但需注意：

• 并非所有 Unicode 字符都有对应的实体名称（HTML5 定义了约 2200 个命名实体，实际常用的约 200 个）。
• 对于没有实体名称的字符，使用十进制或十六进制编号均可，十六进制更简洁（与 Unicode 码点表示一致）。
• 所有浏览器对两种形式的支持相同，不存在兼容性差异。

每个前端开发者都应该熟记以下最基础的 6 个 HTML 实体：

此外，©（©）、®（®）、™（™）、—（—）、–（–）在网页内容中也非常常用。

两者目的完全不同：

• HTML 实体：用于 HTML 文档内容中，转义浏览器会误解的字符或嵌入特殊符号。例如在段落中显示 <div> 文本。
• URL 编码（百分号编码）：用于 URL 中，将非 ASCII 字符或保留字符转换为 %XX 格式。例如空格编码为 %20。

简单记忆：HTML 实体用 &...;，URL 编码用 %...。两者不可混用。

常见的处理方式：

• 解码实体：使用浏览器的 textarea 或 DOMParser 来安全解码 HTML 实体字符串。
• 编码实体：使用 textContent 设置文本后读取 innerHTML，或使用专门的库如 he（HTML Entities）。
• 模板引擎：如 React 的 JSX 会自动转义，Vue 的 {{ }} 插值也会自动转义 HTML 实体，防止 XSS。
• 手动转义：对于用户输入显示，至少转义 &、<、>、"、' 这 5 个字符。

非断空格（Non-Breaking Space，实体名  ，编号  ）是一种特殊的空格字符，它阻止浏览器在该位置自动换行。

常见使用场景：

• 数值与单位之间（如 10 km），避免数字和单位分在两行。
• 人名中（如 Van Gogh），保持姓名完整。
• 电话号码、日期等不希望被断开的数据。
• 在需要多个连续空格时（普通空格在 HTML 中会合并为一个），可用多个   保持间距，但更推荐使用 CSS 控制间距。

零宽非连接符（‌，Zero Width Non-Joiner）和零宽连接符（‍，Zero Width Joiner）是不可见的控制字符，用于影响文字的连字和渲染行为：

• ‌：阻止相邻字符连接。例如在波斯语、阿拉伯语中，阻止字母的连写形式；在emoji中可阻止emoji组合。
• ‍：促使相邻字符连接。最著名的应用是组合emoji，如家庭表情 👨‍👩‍👧 就是通过 ZWJ 将多个emoji连接而成。

这些实体在网页国际化（i18n）和复杂文字排版中非常有用。

HTML5 大幅扩展了命名实体的数量（从 HTML4 的约 250 个增加到约 2200 个），主要新增包括：

• 数学符号：如 ∀（∀）、∂（∂）、∃（∃）、∅（∅）等。
• 箭头扩展：如 ←（←）、↑（↑）、→（→）、↓（↓）、↔（↔）等大量箭头。
• 技术符号：如 ∠（∠）、∧（∧）、∨（∨）、∩（∩）、∪（∪）等。
• 扑克牌花色：♠（♠）、♣（♣）、♥（♥）、♦（♦）。

这些新增实体让开发者无需记忆 Unicode 码点即可使用大量特殊符号。