全栈之前端 | 11.HTML常用编码集及其Entity实体符号编码介绍篇

2023-10-31 17:33:43 浏览数 (1)

0x00 HTML 字符集介绍

描述: 为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集, 此处作为开发者必回接触到的常见字符集编码有如下：ASCII、ANSI、ISO-8859-1以及Unicode（UTF-8/16）等。

基础知识: 计算机，不能直接存储文字，存储的是编码。 计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来 表示。

假如：A用110表示，B用111表示等。

ASCII

什么是ASCII?

全称: 美国标准信息交换码 (Aerican Standard Code for Information Interchange), 是一种最早的字符编码标准并等于国际标准ISO/IEC646,用于表示英语和西欧语言中常见的字符。 ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ - ( ) @ < >。

ASCII 字符集范围：

  • ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。
  • ASCII 使用 32 到 126 的值表示字母、数字和符号。
  • ASCII 不使用 128 到 255 之间的值。

ANSI (ASCII 正式标准)

什么是ANSI?

全称：美国国家标准学会（American National Standards Institute）(是一个标准化组织，负责制定和推广各种标准), ASCII编码是ANSI制定的标准之一，ANSI在1986年将ASCII编码正式标准化,将其发展为ANSI字符集编码。 ANSI字符集编码使用8位二进制数（0-255）来表示256个字符，包括ASCII编码中的字符以及一些扩展字符。

每个国家为了显示本国的语言，都对ASCII码进行了扩展，通常使用2个字节（16位二进制）来表示一个汉字，共可以表示2^16＝65536个汉字，例如

  • 中国的ANSI编码是GB2312编码（简体），对6763汉字进行编码，含600多特殊字符，另外还有GBK（简体）。
  • 中国台湾的ANSI编码是BIG5编码（繁体）。
  • 日本的ANSI编码是JIS编码。

ANSI 字符集范围 ANSI（Windows-1252）是原始的 Windows 字符集, 对于0 到 127的值，ANSI 与 ASCII 相同, ANSI 有一组专有的字符，其值从 128 到 159, 对于 160 到 255的值，ANSI 与 UTF-8 相同, 而 ANSI 与 ISO-8859-1 不同之处在于 ANSI 具有 32 个额外的字符。

总的来说，ASCII编码是ANSI字符集编码的一个子集, ANSI字符集编码扩展了ASCII编码，使其能够表示更多的字符，包括一些特殊符号和扩展字符。然而，ANSI字符集编码有一个局限性，它只能表示英语和西欧语言中的字符，无法满足其他语言的需求。随着全球化的发展，Unicode编码逐渐取代了ANSI字符集编码，成为了更为通用和全面的字符编码标准。

ISO-8859-1

什么是ISO-8859-1?

ISO-8859-1（也称为Latin-1）是一种字符编码标准，由国际标准化组织（ISO）制定。它是ANSI字符集编码的一部分，最初被设计用于表示拉丁字母字符，包括英语、法语、德语、西班牙语等西欧语言的字符。 ISO-8859-1字符集可以表示256个字符，其中包括基本拉丁字母、标点符号、数字以及一些特殊符号。

ISO-8859-1 字符集范围

  • 对于 0 到 127 的值，ISO-8859-1 与 ASCII 相同。
  • ISO-8859-1 不使用 128 到 159 之间的值。
  • 对于从 160 到 255 的值，ISO-8859-1 与 UTF-8 相

Unicode

什么是Unicode?

别称:万国码/国际码/统一码/单一码, 它是一种字符编码标准，用于表示全球范围内的所有文字和符号。它采用了一个统一的编码方案，为每个字符分配了一个唯一的数字代码，以便计算机系统可以正确地表示和处理不同语言的文本。 Unicode编码可以支持超过130,000个字符，包括了各种语言的字母、数字、标点符号、符号图形等。这使得不同语言之间的文本可以在计算机系统中无缝地交流和显示。 除此之外，其针对Unicode的可变长度的字符编码来表示各国的语言文字，例如UTF-8、UTF-16

温馨提示: 在 HTML5 中规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

UTF-8 字符集字符集范围

  • 对于 0 到 127 的值，UTF-8 与 ASCII 相同。
  • UTF-8 不使用 128 到 159 之间的值。
  • 对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。
  • UTF-8 从值 256 开始包含超过 10000 个不同字符, 所以通常会用于可变长度的字符编码，例如最常见的UTF-8。

ASCII/ANSI/ISO-8859-1/Unicode字符集之间的区别:

Numb

ASCII

ANSI

8859

UTF-8

Description

32

space

33

!

!

!

!

exclamation mark

34

"

"

"

"

quotation mark

35

#

#

#

#

number sign

36

$

$

$

$

dollar sign

37

%

%

%

%

percent sign

38

&

&

&

&

ampersand

39

'

'

'

'

apostrophe

40

(

(

(

(

left parenthesis

41

)

)

)

)

right parenthesis

42

*

*

*

*

asterisk

43

plus sign

44

,

,

,

,

comma

45

-

-

-

-

hyphen-minus

46

.

.

.

.

full stop

47

/

/

/

/

solidus

48

0

0

0

0

digit zero

49

1

1

1

1

digit one

参考地址: [https://www.w3school.com.cn/html/html_charset.asp]

0x01 HTML URL 字符编码

描述： URL 编码会将字符转换为可通过因特网传输的格式。

什么是URL?

全称: URL - 统一资源定位器, Web 浏览器通过 URL 从 web 服务器请求页面。 URL 是网页的地址，比如 http://blog.weiyigeek.top

什么是 URL 编码?

URL 只能使用 ASCII 字符集来通过因特网进行发送，但是由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符，特别的URL是不能包含空格，所以通使用 来替换空格（32）,并且在浏览器的URL中会转换为 。

温馨提示: 使用JS针对URL的三种编码方法的区别：

  • encodeURI方法不会对下列字符编码ASCII字母、数字、~!@#$&*()=:/,;? '
  • encodeURIComponent方法不会对 ASCII字母、数字、~!*()' 编码, 它会将http://X中的//也编码，一般我们使用encodeURIComponent要比encodeURI()更多,因为研发经常要对查询参数而不是对基础URL进行编码
  • escape采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)

温馨提示: 浏览器将根据页面中使用的字符集对输入进行编码。

参考地址：https://www.w3school.com.cn/tags/html_ref_urlencode.asp

0x02 HTML Entity 实体编码

描述: 在 HTML 中的预留字符必须被替换为字符实体，并且键盘上不存在的字符也可以由实体代替。 例如，在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签，如果希望正确地显示预留字符则必须在 HTML 源代码中使用字符实体（character entities）。

HTML 中字符实体类似这样&entity_name;(实体名)或者&#entity_number;(实体数字)等两种格式，使用实体名而不是数字的好处是名称易于记忆，不过坏处是浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

实体格式: 必须以 &#开头并以 ;（分号）结束实体编号。 实体方案: 实体名称，十进制实体编号和十六进制实体编号。 例如，如需显示小于号，我们可以这样写 &lt; 或 &#60;或 &#x3C;或 u003c。

除此，之外普通键盘上不存在众多数学、技术和货币符号也可使用 HTML 实体名称表示，若不存在实体名称，则可使用实体编号，十进制或十六进制的引用。

代码语言：javascript复制
<p>我将显示 €</p>
<p>我将显示 &#8364;</p>
<p>我将显示 &#x20AC;</p>

<!-- 
显示结果:
我将显示 €
我将显示 €
我将显示 €
 -->

不间断空格（non-breaking space） 描述：HTML 中的常用字符实体是不间断空格&nbsp;,由于浏览器在渲染时总是会截短 HTML 页面中的空格。 如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。 例如，在页面中增加空格的数量，您需要使用 &nbsp;字符实体*10,极客。

简单示例：

  • 0.HTML 中常用实体编码
代码语言：javascript复制
空格  &nbsp;            &#160;    &#x20;
<    &lt;              &#60;      &#x3c;
>    &gt;              &#62;      &#x3e;
&    &amp;             &#38;      &#x26;
"    &quot;            &#34;      &#x22;
'    &apos; (IE不支持)  &#39;      &#x27;
  • 1.在网页中使用实体符号来字符 A、B、C 由数字 65、66 以及 67 来显示。
代码语言：javascript复制
<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>