正在加载...

HTML 字符编码

网站图标链接告诉浏览器要在标签页上显示哪张小图。字符编码（charset） 回答一个更根本的问题：浏览器应当如何把你的 HTML 文件里的字节转成人类能阅读的字母与文字？当编码错误时，波斯文、阿拉伯文、带变音符号的拉丁字母、中文以及 emoji 常常会变成乱码（mojibake）——看起来支离破碎的字符序列，尽管其余标记其实完全正常。

charset 是什么意思

字符集（以及它的编码方式）把磁盘上的字节映射成字符。HTML 文件本质上是字节流。如果没有正确的解码规则，浏览器可能会猜错。在 head 里声明 UTF-8，是现代网页的常规做法，能让多语言文本与符号在编辑器、服务器和浏览器之间保持可靠。

直接回答

把 <meta charset="UTF-8"> 放在 head 靠近顶部的位置——最好落在文件的前 1024 字节内，好让浏览器尽早得知编码。UTF-8 是你几乎所有新页面都应当使用的编码。同时还要在编辑器里把 HTML 文件本身保存为 UTF-8。声明与文件保存必须一致；只有其中一项仍然会出现损坏的字符。

声明、保存与语言——不同的职责

📊 编码、语言与标题对照

Piece Job
meta charset 字节如何解码成字符
Editor save as UTF-8 你的工具如何把这些字节写入磁盘
html lang 页面内容使用哪种人类语言
title text 标签页上的文字标签（不是编码开关）

多语言 UTF-8 演示

一份简短文档就能展示 charset 的作用。meta 放在 head 最前面，然后是 title，再是混用多种文字的正文。

在 head 中声明 UTF-8 charset

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charset demo</title>
</head>
<body>
<p>Hello — سلام — مرحبا — 你好 — 🙂</p>
</body>
</html>

阅读示例

  • <meta charset="UTF-8"> 位于 head 靠前的位置，在大多数其他内容之前
  • lang="en" 为工具标注主要语言；它不能替代 charset
  • 段落包含拉丁文、波斯文、阿拉伯文、中文和一个 emoji——在文件正确保存为 UTF-8 时全部正常
  • 若这些字符显示异常，先检查保存编码，再去改写 HTML 结构

为什么要把 charset 放得很靠前

浏览器从文件顶部开始读取。如果 charset 出现在大段文本或脚本之后，部分字符可能已经按错误猜测被解释过了。请把 meta 靠近 head 的开头。在前面几课的入门 head 模板里，charset 之所以故意放在第一位，正是出于这个原因。

乱码（mojibake）：不匹配的症状

乱码看起来像随机标点、残留的拉丁碎片，或在本该出现真实词语的地方出现替换字符。常见原因包括：声明了 UTF-8，但文件却以旧编码保存；或者省略 charset，指望浏览器碰巧猜对。应当修正编码配对——meta 加上文件保存——而不是靠一遍遍重打字母来“修好”显示。

lang 不是 charset

html 上的 lang 属性（有时也会用在特定元素上）帮助屏幕阅读器、断字和搜索工具理解语言。charset 负责字节解码。通常两者都需要：lang 标识语言身份，charset 负责编码。不要因为已经设置了 lang="fa" 或 lang="ar" 就删掉 charset。

服务器与真实部署（初学者提示）

生产服务器也可以在 HTTP 头的 Content-Type 中发送 charset。对本课程而言，先掌握 HTML meta 以及把文件保存为 UTF-8 的习惯。当线上站点与你的 meta 不一致时，可以请导师检查响应头——但本地练习里的大多数问题，其实是编辑器保存编码不对，或缺少 meta 标签。

在编辑器中练习

  1. 创建一页，在 head 顶部放入 <meta charset="UTF-8">。
  2. 添加一句包含非英文字母和一个 emoji 的句子。
  3. 确认编辑器状态栏显示该文件为 UTF-8，然后保存。
  4. 在浏览器中打开页面，确认字符显示正确。
  5. （可选，请谨慎）把副本保存为旧编码，重新打开并观察乱码——然后恢复 UTF-8，以便认出这种失败模式。

容易犯的错误

  • 忘记写 meta charset，指望浏览器碰运气猜对
  • 声明 UTF-8，却把文件保存成旧编码
  • 把 charset meta 放在很长的 head 很靠后的位置
  • 把 charset 与可见的页面标题或 lang 混为一谈
  • 以为 emoji 问题一律是“HTML 漏洞”，其实编码才是真正原因
  • 靠删除 lang 来“修复”乱码，而不是纠正 UTF-8 保存与 meta

小结

  • Charset 声明如何把 HTML 文件的字节解码成字符
  • 几乎所有新页面都使用 UTF-8，并把 meta charset 放在 head 靠前位置
  • 将文件保存为 UTF-8，使声明与磁盘编码一致
  • lang 命名语言；charset 命名编码——职责不同
  • 乱码通常意味着编码不匹配，而不是某个标签神秘失效

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程