<meta charset="UTF-8">必须紧贴<head>开头且前方无任何字符，否则浏览器仅扫描前1024字节失败即回退系统默认编码（Windows为GBK，Linux/macOS为ISO-8859-1），导致中文乱码；文件实际编码、<meta>声明、HTTP响应头Content-Type三者必须严格统一为UTF-8。
<meta charset="UTF-8"> 必须紧贴 <head> 开始，且前方不能有任何字符——这是解决 HTML 中文乱码最硬性的前提。其他所有操作（改保存编码、配服务器头）都建立在这个基础上；否则全是白忙。
为什么 <meta charset="UTF-8"> 放错位置就失效
浏览器只扫描 HTML 文件开头 1024 字节来找 charset 声明。一旦前面有 BOM、空格、换行、HTML 注释 <!-- --> 或 <script> 标签，它就直接跳过，退回到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1），中文立刻变方块或问号。
常见错误现象：
- VS Code 右下角显示 “UTF-8 with BOM”，但
<meta charset="UTF-8">已写好，仍乱码 - 文件用 Notepad++ 打开显示正常，用 Chrome 打开就是乱码
- F12 查看 Network → Response Headers →
Content-Type是text/html; charset=gbk，页面内声明完全被无视
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用命令行验证 BOM：
head -c 4 index.html | xxd，输出含ef bb bf就必须清除 - 在 VS Code 中点击右下角编码 → “Reopen with Encoding” → 选
GBK看是否恢复中文，确认是编码识别问题 - 确认
<head>后第一行就是<meta charset="UTF-8">，前面不能有空行、注释、<title>或任何标签
文件实际编码和 <meta> 声明必须严格一致
声明说 UTF-8，但文件其实是 GBK 编码保存的，浏览器会用 UTF-8 解码 GBK 字节流，结果必然错乱。这不是“差不多就行”的事，是字节级的硬匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- VS Code：右下角点编码 → “Save with Encoding” → 选
UTF-8（注意不是UTF-8 with BOM） - Notepad++：菜单栏“编码” → “转为 UTF-8 编码”（非“UTF-8-BOM”）
- Sublime Text：“File” → “Save with Encoding” → “UTF-8”
- Linux/macOS 下验证：执行
file -i index.html，输出应为charset=utf-8
容易踩的坑：
- Windows 上新建文本文件默认是 ANSI（即 GBK），直接粘贴中文再存为 HTML，极易埋雷
- 某些编辑器（如老版 Dreamweaver）默认保存带 BOM，且不提示
- 复制别人代码时，可能连同不可见的零宽空格（U+200B）一起粘过来，导致
<meta>实际不在第一位置
HTTP 响应头中的 Content-Type 优先级高于 <meta>
当 HTML 通过 HTTP 协议加载（即地址是 http:// 或 https://），服务器返回的响应头中 Content-Type 字段会覆盖页面内的 <meta> 声明。如果头里写的是 charset=iso-8859-1 或压根没写 charset，乱码不可避免。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- F12 → Network → 刷新 → 找到主 HTML 请求 → Headers → Response Headers → 查看
Content-Type - Nginx 配置加：
charset utf-8;（放在http、server或location块中） - Apache 的
.htaccess加：AddDefaultCharset UTF-8 - Node.js/Express：在
res.sendFile()前加res.set("Content-Type", "text/html; charset=utf-8") - PHP：在
echo或includeHTML 前加header("Content-Type: text/html; charset=utf-8")
性能影响：
- 服务器头设置是全局生效，比每个 HTML 文件手动加
<meta>更可靠，也更轻量 - 但本地双击打开
file://协议时，HTTP 头不存在，此时完全依赖<meta>和文件编码
别碰这些“看起来像对”的写法
很多看似合理的写法，浏览器根本不认，或者兼容性极差，实际等于没写。
以下全部无效或不推荐：
-
<meta charset="utf8">—— 必须是"UTF-8"，大小写敏感，且带短横线 -
<meta charset="UTF8">—— 缺少短横线，部分浏览器拒绝识别 -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已废弃，且优先级低于原生charset属性 - 在
<head>里写两个<meta charset>—— 浏览器只取第一个，第二个被忽略，但容易引发维护混乱 - 把
<meta charset="UTF-8">放在<title>后面 —— 超出前 1024 字节扫描范围的风险陡增
真正关键的细节，往往藏在字节边界和解析顺序里——比如 BOM 是三个字节，<head> 后第一个换行符算一个字节，空格也算。调试时别只看“人眼觉得对”，得用工具看真实字节流。
