HTML 字符集

HTML 字符编码 (Charset)

为了正确显示 HTML 页面，Web 浏览器必须知道保存文件时使用了哪种字符编码（character encoding），也称为字符集（character set）。这确保了文本，特别是基本英文字母之外的字符，能够按预期显示。

什么是字符编码？

计算机将文本存储为数字（字节）。字符编码是一种将字符（如字母、数字、符号）映射到特定数值的系统。

历史上的编码：

ASCII: 一种早期标准，定义了主要用于英文文本、数字和基本符号的 127 个字符。它使用 7 位。
ANSI (Windows-1252): Microsoft 对 ASCII 的扩展（使用 8 位），增加了西欧语言中常见的字符。在 Windows 系统上变得普遍。
ISO-8859-1 (Latin-1): 一种标准 8 位编码，也涵盖了许多西欧语言。与 Windows-1252 非常相似。
这些旧编码存在局限性：它们无法在同一文档中表示来自多种语言的字符（例如，英语和中文），并且经常导致兼容性问题。

现代标准：UTF-8

UTF-8 (Unicode Transformation Format - 8-bit): Web 上主要的字符编码。它是 Unicode 标准的一部分。
UTF-8 可以表示全世界所有语言中几乎所有的字符和符号，包括表情符号（emojis）。
它与 ASCII 向后兼容（前 127 个字符具有相同的数值）。
它使用可变宽度的编码（每个字符 1 到 4 个字节），这使得它对于主要使用 ASCII 字符的文档来说是高效的，同时仍然支持完整的 Unicode 范围。

推荐：始终为你的 Web 文档使用 UTF-8。 它可以避免编码问题并确保全球兼容性。

在 HTML 中声明字符编码

你必须声明你的 HTML 文档所使用的字符编码，以便浏览器能够正确地解释它。这通常通过在 <head> 部分中使用 <meta> 标签来完成。

HTML5 方法（推荐）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My UTF-8 Page</title>
  <!-- ... other head elements ... -->
</head>
<body>
  <p>This page uses UTF-8, allowing characters like é, ö, ñ, ©, and 😊.</p>
</body>
</html>

关键点：

<meta charset="UTF-8"> 标签应尽早放置在 <head> 元素内，理想情况下紧随 <head> 开启标签之后。这确保浏览器在开始解析可能存在问题的字符之前就知道编码。
确保你的文本编辑器也使用相同的编码（UTF-8）保存 HTML 文件。大多数现代编辑器默认为 UTF-8。
配置你的 Web 服务器发送正确的 Content-Type HTTP 头部，包括字符集（例如，Content-Type: text/html; charset=utf-8）。这通常是现代服务器上的默认设置。

旧的 HTML4 语法（<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">）仍然有效，但没有必要这么冗长。使用更简洁的 HTML5 <meta charset="UTF-8">。

为什么 UTF-8 至关重要

通用性： 支持所有语言和符号。
标准化： 它是 W3C 和 WHATWG 为 HTML5 推荐的编码。
兼容性： 防止不同地区的用户查看你的网站时出现乱码文本（例如 �� 或 Â£）。
表单： 确保表单中的用户输入得到正确处理，无论输入的字符是什么。
API 和数据库： 简化与现代 API 和数据库的集成，它们通常期望或处理 UTF-8。

如果你省略字符集声明或使用错误的字符集，浏览器可能会猜测编码，这通常会导致字符渲染不正确。

简要比较总结 (ASCII / ISO-8859-1 / UTF-8)

字符范围	关系
ASCII (0-127)	在 ASCII、ISO-8859-1、UTF-8 中相同。
ISO-8859-1 (128-255)	涵盖许多西欧字符。UTF-8 对其中许多字符使用不同的字节序列，但都能表示它们。
UTF-8 (超过 255)	涵盖来自世界所有脚本的数千个其他字符，以及符号和表情符号。使用多字节序列（multi-byte sequences）。

重点理解 UTF-8 包含了现代 Web 开发所需的一切。

有关详细的字符列表，请查阅 Unicode 字符代码图表等资源。