HTML Entity 简介

╰半橙微兮° 2024-04-18 15:15 15阅读 0赞

#### HTML Entity 是什么 ####

HTML Entity 是一段以 “＆” 符号开头，以 “;” 符号结尾，能够表示 Unicode 符号的字符串文本。

### 诞生原因 ###

一些字符在 HTML 中是预留的，拥有特殊的含义，比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

### 用途 ###

1.  显示 HTML 保留字符，如 <、>、&、 " 等（联想到防御 XSS 攻击）；
2.  表示难以用常规输入设备输入的字符，如 ©、®、± 等；
3.  表示给定的字符编码可能无法表达文档字符集的其他字符，如 ASCII 编码想想显示中文，使用 `水` 表示 “水”;

### 表示形式 ###

#### 数字字符引用 ####

数字字符引用指定文档字符集中字符的代码位置。数字字符引用又可以采用两种形式：

1.  语法`&#d`，其中，d 是十进制数，表示字符在 `ISO 10646` 以十进制表示的位置中 d 处的字符。
2.  语法`&#xH`，其中，x 表示后续内容为十进制数，H 表示字符在 `ISO 10646` 以十六进制表示的位置中 H 处的字符，数字字符引用中的十六进制数字不区分大小写。

#### 字符实体引用 ####

由于使用数字字符引用还需要记住字符在字符集中位置，使用较为不便，因此 HTML 还提供了“字符实体引用”的方式表示字符，如用 `<`(less than) 表示 < ，此形式更易读易记，但 HTML 显然没有为`ISO 10646` 中的数十万个字符都定义了字符实体，完整列表见[Named character references][]，字符实体引用对大小写敏感。

### 扩展 ###

#### &nbsp; ####

**定义：** 不换行空格（no-break space）是空格字符，用途是禁止自动换行。HTML页面显示时会自动合并多个连续的空白字符（whitespace character），但该字符是禁止合并的，因此该字符也称作“硬空格”。  
**宽度：** 单个宽度与 space 的空格一致，受字体影响，不同浏览器下表现也不一致，在 chrome 的 `PingFang SC` 字体下占 `1.3em`。

#### 在 html 中输入多个空格 ####

除使用 ` ` 外，还可通过设置内容 css 的 `white-space` 属性值为 `pre`，如此浏览器会保留文本中的空格和换行，就可以在文本中直接使用键盘的 space 输入多个空格了。

#### 其他空格 ####

*  **&ensp;** 全称为半角空格（En Space），宽度为`1/2em`。
 *  **&emsp;** 全称为全角空格（Em Space），宽度为`1em`。
 *  **&thinsp;** 全称为窄空格（Thin Space），宽度为`1/5em`，此三者宽度几乎不受字体影响。
 *  **&zwnj;** 全称为零宽不连字符（Zero Width Non Joiner），顾名思义没有宽度，用于抑制本来会发生的连字。
 *  **&zwj;** 全称为零宽连字符（Zero Width Joiner），没有宽度，用于在两个本不会发生连字的字符产生连字效果。

#### 参考文献 ####

1.  [charset-w3][]
2.  [Entity-MDN][]
3.  [charref-w3][]
4.  [字符编码笔记：ASCII，Unicode 和 UTF-8][ASCII_Unicode _ UTF-8]
5.  [零宽度字符：和谐？屏蔽？不存在的][Link 1]
6.  [HTML 几种空格的区别][HTML]

[Named character references]: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references
[charset-w3]: https://www.w3.org/TR/html4/charset.html#h-5.3.2
[Entity-MDN]: https://developer.mozilla.org/en-US/docs/Glossary/Entity
[charref-w3]: https://dev.w3.org/html5/html-author/charref
[ASCII_Unicode _ UTF-8]: http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
[Link 1]: https://juejin.im/post/5b87a6e26fb9a019b953ee8b
[HTML]: http://www.oicqzone.com/pc/2015083122336.html