无需登录 数据私有 本地保存

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

19
0
0
0

HTML 实体速查表

快速查找和复制 HTML 特殊字符编码。支持实体名称、十进制编号、十六进制编号,覆盖常用符号、货币、数学、箭头等分类。

0 个实体 点击字符或代码可复制
字符 实体名称 十进制 十六进制 描述 复制

没有找到匹配的实体,请尝试其他关键词或分类。

提示:点击字符列复制字符本身,点击复制按钮复制实体名称,点击十进制/十六进制代码可复制对应编码。

常见问题与知识点

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

使用实体的主要原因:

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

实体名称(如 &amp;)使用助记英文单词,易于记忆和阅读;实体编号使用 Unicode 码点,分为十进制&#38;)和十六进制&#x26;)两种形式。

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

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

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

字符实体名称用途
&&amp;与符号(实体起始符)
<&lt;小于号(标签开始)
>&gt;大于号(标签结束)
"&quot;双引号
'&apos;单引号(HTML5)
&nbsp;非断空格

此外,&copy;(©)、&reg;(®)、&trade;(™)、&mdash;(—)、&ndash;(–)在网页内容中也非常常用。

两者目的完全不同:

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

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

常见的处理方式:

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

非断空格(Non-Breaking Space,实体名 &nbsp;,编号 &#160;)是一种特殊的空格字符,它阻止浏览器在该位置自动换行

常见使用场景

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

零宽非连接符&zwnj;,Zero Width Non-Joiner)和零宽连接符&zwj;,Zero Width Joiner)是不可见的控制字符,用于影响文字的连字和渲染行为:

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

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

HTML5 大幅扩展了命名实体的数量(从 HTML4 的约 250 个增加到约 2200 个),主要新增包括:

  • 数学符号:如 &forall;(∀)、&part;(∂)、&exist;(∃)、&empty;(∅)等。
  • 箭头扩展:如 &larr;(←)、&uarr;(↑)、&rarr;(→)、&darr;(↓)、&harr;(↔)等大量箭头。
  • 技术符号:如 &ang;(∠)、&and;(∧)、&or;(∨)、&cap;(∩)、&cup;(∪)等。
  • 扑克牌花色&spades;(♠)、&clubs;(♣)、&hearts;(♥)、&diams;(♦)。

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