HTML 教程之 HTML 字符集和颜色

HTML 文档是一种纯文本文件，因此会涉及到文件字符编码格式的问题。也就是说，Web 浏览器必须知道要使用哪种字符编码来进行正常显示 HTML 页面。

HTML 字符集

为了能够正确显示 HTML 页面内容，需要为其指定某种字符编码，让 Web 浏览器知道要使用哪个字符集来解析显示页面。

从 ASCII 到 UTF-8

ASCII 是第一个出现的字符编码标准，是美国人给自己设计的，并没有考虑其它国家/地区的扩展字符。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（a~z && A~Z）、一些计算机常用特殊字符（# % ^ & ! $ + - ( ) @ < >），以及一些具有控制功能的字符（换行符、制表符）等。

ISO-8859-1 是 HTML 4 的默认字符集，是大多数浏览器默认的字符集。。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252） 是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

UTF-8 是基于 Unicode 字符集的一套字符编码，用于统一所有国家的字符集。简言之支持世界上所有国家和地区几乎所有的字符和符号。

如果你对字符集和字符编码等还不了解的话，请猛击链接学习 >>> 编程基础之编码详解。

HTML charset 属性（HTML 5 新增）设置字符编码 >>>

为了浏览器能够正确显示包含了各国字符的 HTML 页面，你必须为 HTML 页面指定一个字符编码：

<meta charset="UTF-8">

---

字符集字符支持

[1] >>> ASCII

ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

ASCII 使用 32 到 126 的值表示字母（a[97]~z[122] && A[65]~Z[90]）、数字（0[48]~9[57]）和符号。

ASCII 不使用 128 到 255 之间的值。

[2] >>> ANSI 字符集 (Windows-1252)

对于 0 到 127 的值，ANSI 与 ASCII 相同（兼容 ASCII 码）。

ANSI 有一组专有的字符，其值从 128 到 159。

对于 160 到 255 的值，ANSI 与 UTF-8 相同。

[3] >>> ISO-8859-1 字符集

对于 0 到 127 的值，8859-1 与 ASCII 相同（兼容 ASCII 码）。

8859-1 不使用 128 到 159 之间的值。

对于从 160 到 255 的值，8859-1 与 UTF-8 相同。

[4] >>> UTF-8 字符集

对于 0 到 127 的值，UTF-8 与 ASCII 相同（兼容 ASCII 码）。

UTF-8 不使用 128 到 159 之间的值。

对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

UTF-8 从值 256 继续，包含超过 10000 个不同字符。

关于更多字符集差异，你可以参考 >>> HTML 字符集。

---

HTML 符号和字符实体

上面，我们了解了不同字符集下的字符支持，这一小节来看如何在 HTML 中插入常用的符号或者特殊字符。

有时候，我们的 HTML 页面中需要添加一些：普通键盘上不存在的众多数学、技术和货币符号（符号） Or 一些在键盘上找不到的特殊字符（字符）。甚至，在 HTML 中，某些字符是预留字符，例如：大于 < && 小于 >，浏览器会将其解析为标签，怎么办？？？

此时，你可以通过 HTML 实体 的形式插入这些字符（符号实体 && 字符实体）。

HTML 中的每个字符都可以看作是一个个实体，一些实体有专门的实体名称，你可以通过 HTML 实体名称（Entity Name） 来表示某个字符。如果某个字符没有实体名称，则可使用 实体编号（Entity Number） 来表示，它是一个十进制或十六进制的引用。语法格式如下：

&entity_name;

或

&#entity_number;

示例如下（文本中插入三个连续空格）：

<!-- 不间断空格 -->
&nbsp;&nbsp;&nbsp;

<!-- 小于号 -->
&lt; 或 &#60; 或 &#060;

更多字符实体选择参考手册 >>> HTML 符号实体参考手册 && HTML ISO-8859-1 参考手册。

---

HTML Emoji

可以想到的是，表情符号（Emoji）是来自 UTF-8 字符集中的字符定义，例如：😄😍💗。

你可以在网络上查找 HTML 特殊字符使用手册来查找你想插入的所有表情符号。

---

前面，你已经设置过一些 HTML 元素的颜色了，这一小节我们具体来看一下 HTML 中的颜色表示：

HTML 颜色

HTML 颜色采用的是 RGB 颜色，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

Color Value

关于颜色值 >>>

也就是说，一个基本的 HTML 颜色由三部分组成：R（Red） & G（Green） & B（Blue），其中每个颜色值（R/G/B）范围从 0（十六进制为 00） ~ 255（十六进制为 FF）。

HTML 颜色值的表示方法有三种：3 位十六进制颜色值 && 6 位十六进制颜色值 && RGB，示例如下：

<!-- Black -->

<!-- 3 位十六进制颜色值表示黑色 -->
#000
<!-- 6 位十六进制颜色值表示黑色 -->
#000000
<!-- RGB 颜色值表示黑色 -->
rgb(0,0,0)

关于更多的颜色值使用，你可以浏览器搜索 HTML 颜色手册即可。

---

Color Name

关于颜色名 >>>

除了上述的通过颜色值映入颜色的方法外，HTML 还支持通过一些标准定义好的颜色名插入颜色。

目前所有浏览器都支持 141 个颜色名称（ HTML 和 CSS 颜色规范定义）：

17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。再加 124 个其它颜色。

关于HTML 和 CSS 颜色名称支持，你可以参考 >>> HTML 颜色手册。

---

网页配色方案和取色器

一个优秀的、用户友好的网页，一定有一个良好的网页配色方案，它涉及网站整体的颜色显示，以及各个板块的颜色搭配。

关于配色方案，这里不多讲（毕竟不是专业的），网络上你可以查询到很多由优秀设计师设计出的配色方案，编写网页时可以借鉴。

关于上面的 HTML 颜色使用，更多时候我们是使用取色器工具直接获取某个颜色的颜色值，然后应用到网页。故，你应该准备一个适合自己的颜色取色器工具，它可以帮助你从计算机上的任何地方获取你想要的颜色值。

---