必须使用 UTF-8，因其能无损表示所有 Unicode 字符且兼容 ASCII；meta charset="UTF-8" 必须置于 head 最前；HTTP 响应头 Content-Type 与 meta 必须一致；文件须保存为 UTF-8 no BOM。
UTF-8 是当前唯一应选的字符集，其他选项（如 GBK、ISO-8859-1、utf8）在现代 HTML 开发中都不再合理。
为什么必须用 UTF-8 而不是其他编码
浏览器对未声明字符集的 HTML 会启用启发式检测，结果高度不可控：中文页面可能被误判为 ISO-8859-1 或 Windows-1252，直接导致 你好 显示成 ä½ å¥½。UTF-8 的优势不是“支持中文”，而是它能无损表示所有 Unicode 字符，且与 ASCII 完全兼容——英文字符仍占 1 字节，不会额外开销。而 GBK 或 GB2312 无法表示 emoji、日文平假名、阿拉伯数字变体等，一旦混入就会截断或乱码。
meta charset="UTF-8" 必须放在 <head> 最前面
这个标签必须是 <head> 中第一个子节点，不能在 <script>、<style> 或 <title> 之前插入。原因很实际：浏览器解析 HTML 是流式的，一旦遇到非 ASCII 字符（比如中文标题里的字），而此时还没读到 meta charset，就会按默认编码（通常是 ISO-8859-1）解码，后续即使看到 meta 也来不及修正已错的 DOM 文本节点。
- ✅ 正确写法：
<head><meta charset="UTF-8"><title>测试页</title></head> - ❌ 错误写法：
<head><script>...</script><meta charset="UTF-8"></head>（<script>中若含中文注释，可能提前触发乱码） - ⚠️ 注意：
charset="utf-8"小写形式虽多数浏览器容忍，但规范要求大写UTF-8，PHP、某些代理或老旧移动 UA 可能严格校验
HTTP 响应头 Content-Type 和 meta 必须一致
仅靠 meta charset 不够。如果服务器返回的 HTTP 响应头是 Content-Type: text/html; charset=GBK，浏览器会优先信任响应头，直接忽略 meta 标签——这时页面照样乱码。Nginx/Apache 默认不带 charset，需显式配置；Node.js/Express 的 res.setHeader('Content-Type', 'text/html; charset=UTF-8') 也不能漏。
立即学习“前端免费学习笔记（深入）”；
- 检查方式：浏览器开发者工具 → Network → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type - 常见陷阱：静态文件托管（如 GitHub Pages、Vercel）通常默认设对了，但自建 Nginx 若没加
charset utf-8;，就会覆盖 HTML 内的meta - 特别注意：PHP 输出前若有
header('Content-Type: text/html');未带 charset，就等于主动放弃控制权
真正容易被忽略的点是编辑器保存格式：即使写了 meta charset="UTF-8"，若 HTML 文件本身以 GBK 或 UTF-8 with BOM 保存，浏览器读取时仍可能出错。务必确认编辑器（VS Code/Sublime/Notepad++）保存时选的是 “UTF-8 no BOM”。
