<meta charset="UTF-8">必须置于<head>最开头（前1024字节内且首个ASCII标签），文件须为UTF-8无BOM编码，HTTP响应头Content-Type不得覆盖charset，三者缺一即致乱码或JS语法错误。
meta charset="UTF-8" 必须放在 head 最开头
它不是“随便放哪儿都行”的标签，浏览器只扫描 <head> 开头约 1024 字节来查找 charset 声明。一旦前面有非 ASCII 内容（比如中文注释、BOM、<script> 或空格缩进），就可能跳过或误判。
-
<head><meta charset="UTF-8"><title>...✅ 正确：ASCII 范围内最先出现 -
<head><!-- 中文注释 --><meta charset="UTF-8">❌ 失效：注释含 UTF-8 字节，破坏前 1024 字节的 ASCII 检测逻辑 -
<head><title>标题</title><meta charset="UTF-8">⚠️ 风险：若<title>里有 emoji 或中文，实际字节已超 ASCII 范围，可能导致识别失败
HTML 文件本身必须是 UTF-8 编码（无 BOM）
就算写了 <meta charset="UTF-8">，文件实际存为 GBK 或带 BOM 的 UTF-8，浏览器加载时仍会按错误编码解析——轻则中文乱码，重则 JS 报 Uncaught SyntaxError: Invalid or unexpected token。
- VS Code 默认保存为 UTF-8（带 BOM），需手动选 “Save with Encoding → UTF-8”（不勾选 BOM）
- Notepad++ / Sublime Text 默认可能是 ANSI/GBK，务必在“编码”菜单中选 “UTF-8 无 BOM”
- 验证方法：
file -i index.html（Linux/macOS）或Get-Content index.html -Encoding Byte | Select -First 3（PowerShell），结果不含239, 187, 191
charset 值大小写和拼写必须严格为 "UTF-8"
HTML5 规范只接受 UTF-8（U 大写、连字符、数字 8）。写成 utf8、UTF8、utf-8 在现代浏览器多数能 fallback 成功，但某些构建工具（如 Webpack + IE 模式）、老旧 CMS 或静态检查器会直接忽略。
- ✅ 推荐且唯一合规写法：
<meta charset="UTF-8"> - ❌ 不要写：
<meta charset="utf8">（缺连字符，非 IANA 注册值） - ❌ 不要写：
<meta charset="UTF_8">或<meta charset="utf-8">（下划线/小写不符合 HTML5 标准）
HTTP 响应头 Content-Type 优先级高于 meta 标签
当服务器返回的 HTTP 响应头里有 Content-Type: text/html; charset=GBK，浏览器会直接用 GBK 解析整个文档——此时 <meta charset="UTF-8"> 完全无效，哪怕它写得再规范、文件也是 UTF-8。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置需加：
charset utf-8;（server 或 location 块内） - Apache 配置需加：
AddDefaultCharset UTF-8或Header set Content-Type "text/html; charset=UTF-8" - PHP 输出前需调用：
header('Content-Type: text/html; charset=UTF-8'); - 验证方式：浏览器 DevTools → Network → 点开 HTML 请求 → Headers → Response Headers → 查看
Content-Type
实际生效依赖三者同时满足：文件物理编码是 UTF-8（无 BOM）、<meta charset="UTF-8"> 位于 <head> 最前端且拼写准确、HTTP 响应头未覆盖 charset。漏掉任意一环，乱码风险就真实存在。
