PricingLoginStart free
HTML Academy · 课时

charset 与 Unicode：处理特殊字符

使用 UTF-8 和 HTML 实体正确显示任意字符

第 4 / 4 课13 个步骤

charset 与 Unicode：处理特殊字符 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

字符编码声明

每个 HTML 文档都必须声明其字符编码。标准编码是 UTF-8：将 <meta charset="utf-8"> 作为 <head> 的第一个元素。如果没有声明，浏览器会进行猜测，而对非 ASCII 文本来说，这通常会导致错误。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>

为什么使用 UTF-8？

UTF-8 可以编码每个 Unicode 字符：每种文字、每个表情符号以及每个符号。它向后兼容 ASCII（a-z、0-9 仍然使用单字节），并且是现代网络上占主导地位的编码——截至 2024 年，超过 98% 的网页使用 UTF-8。

位置至关重要

charset 元标签必须出现在文档的前 1024 个字节内，通常应位于 <head> 的第一行。浏览器会根据这些字节嗅探编码；较晚声明 charset 可能不会影响嗅探结果。

以 UTF-8 保存文件

元标签声明编码，而您的编辑器必须实际使用该编码保存文件。现代版本的 VS Code、IntelliJ 和 Sublime 默认都使用 UTF-8。即使元标签正确，以 Windows-1252 或 ISO-8859-1 保存的文件也会产生乱码（字符错乱）。

HTML 实体

特殊 HTML 字符（<、>、&、"）必须进行转义，以防止解析器产生歧义：使用 &lt; 表示 <，使用 &gt; 表示 >，使用 &amp; 表示 &，使用 &quot; 表示 ". 在属性值中，如果值使用双引号括起，则 &quot; 是必需的。

数字字符引用

任何 Unicode 字符都可以通过其代码点引用：雪人符号（☃）可以使用 &#9731; 或 &#x2603;。当直接输入字符不方便时（例如罕见符号、控制字符），可以使用这种方式；但只要编辑器支持，最好直接使用 Unicode 字符。

表情符号与代理对

表情符号是 U+FFFF 以上的 Unicode 字符，在 UTF-16 中表示为代理对（JavaScript 字符串内部使用的编码）。UTF-8 会将它们编码为 4 字节序列。设置 charset="utf-8" 后，表情符号可以原生渲染，无需使用实体。

常见编码错误

将 "Don't" 渲染为 "Don’t"，意味着文件被当作 Latin-1 解读，但实际是以 UTF-8 保存的。请将文件保存为 UTF-8，并确保存在 <meta charset="utf-8">。只有在缺少元标签且文件很可能是 UTF-8 时，现代浏览器才会默认使用 UTF-8。

HTTP Content-Type 标头

服务器也可以通过响应标头声明编码：Content-Type: text/html; charset=utf-8。标头的优先级高于元标签，因此配置错误的服务器即使面对编写完全正确的 HTML，也可能产生编码错误。

处理表单

表单默认使用页面的编码提交。UTF-8 页面会发送 UTF-8 表单数据，服务器应将其按 UTF-8 解码。页面编码与服务器解码方式不一致，是多语言网站中用户输入乱码的常见来源。

避免 BOM

UTF-8 文件开头可能包含字节顺序标记（BOM，即 0xEF 0xBB 0xBF）。大多数浏览器可以容忍它，但某些工具和 CDN 不能；而且在一些文本编辑器中，BOM 会显示为可见字符。请将文件保存为“UTF-8（无 BOM）”，以避免意外问题。

知识检查

为什么 <meta charset="utf-8"> 必须出现在 HTML 文档的前 1024 个字节内？

在交互式课程中回答

总结

将 <meta charset="utf-8"> 声明为 <head> 的第一个子元素，并以 UTF-8 保存文件。UTF-8 可以编码每个 Unicode 字符（包括表情符号和所有文字）。请将 <、>、&、" 转义为实体；对于罕见字符，可以使用数字引用。请注意 HTTP Content-Type 会覆盖元标签，而且在某些工具中 BOM 会显示为可见字符。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
40
课程
159
免费开始学习查看完整课程

常见问题解答

「charset 与 Unicode：处理特殊字符」课时是免费的吗？

是的 — 「charset 与 Unicode：处理特殊字符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「charset 与 Unicode：处理特殊字符」这节课中我会学到什么？

使用 UTF-8 和 HTML 实体正确显示任意字符 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「charset 与 Unicode：处理特殊字符」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. lang 属性与屏幕阅读器
  2. 用于从右向左文本的 dir=rtl
  3. bdi 和 bdo 元素
  4. charset 与 Unicode：处理特殊字符
← 返回 HTML Academy