<meta charset="UTF-8">必须紧贴<head>开头，前面不能有任何字符（包括BOM、空格、注释或<script>），因浏览器仅扫描前1024字节识别该标签，否则回退至系统默认编码（如Windows的GBK）导致乱码；文件编码、meta声明与HTTP响应头Content-Type三者必须一致且均为UTF-8。
meta charset 必须放在 head 开头，且前面不能有任何字符
浏览器只扫描 HTML 前 1024 字节来识别 <meta charset>，一旦开头有 BOM、空格、注释或 <script>，就可能跳过它，回退到系统默认编码（比如 Windows 的 GBK 或 Linux 的 ISO-8859-1）。
常见错误现象：
-
<head>前有<!-- 注释 -->或换行+空格 →<meta charset="UTF-8">失效 - VS Code 默认保存为
UTF-8 with BOM→ 文件开头多出EF BB BF三个字节 → 浏览器无法识别 meta - 在
<title>后写<meta charset>→ 已错过解析窗口，无效
实操建议：
- 用
file -i index.html（macOS/Linux）或 PowerShell 中Get-Content index.html -Encoding Byte | Select -First 3检查开头三字节，确认无ef bb bf - VS Code 保存时选
Save with Encoding→UTF-8（**不带 BOM**） - Sublime/Notepad++ 同样要选
UTF-8，而非UTF-8 with BOM或UTF-8-BOM - 确保代码结构是：
<head><meta charset="UTF-8"><title>，中间零空格、零注释、零换行
文件实际编码、meta 声明、HTTP 响应头三者必须一致
三者只要有一个不匹配，中文、emoji 或 JS 字符串（如 console.log("你好")）就可能报错或乱码。浏览器优先采用 HTTP 响应头中的 Content-Type: text/html; charset=UTF-8，其次 fallback 到 <meta charset>。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 文件用 GBK 保存，但写了
<meta charset="UTF-8">→ 页面显示方块或问号 - Nginx 配置了
charset utf-8;，但 HTML 文件本身是 GBK 编码 → 响应头强制 UTF-8 解析，字节错位 - Express 中调用
res.set('Content-Type', 'text/html; charset=utf-8')，但文件里<meta>写成charset=utf8→ 某些旧环境 fallback 失败
实操建议：
- 统一使用
UTF-8（全大写、带短横、无下划线），避免utf8、utf_8、Unicode等非标准写法 - Nginx：server 或 location 块中加
charset utf-8;（小写，无引号） - Apache：.htaccess 中加
AddDefaultCharset UTF-8（大写） - Node.js/Express：响应前明确设
res.set('Content-Type', 'text/html; charset=UTF-8')
不要混用 meta http-equiv 和 meta charset
<meta charset="UTF-8"> 是 HTML5 标准语法，简洁且被所有现代浏览器支持；<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 是 HTML4 兼容写法，已过时，且易因拼写错误（如 content-type 小写、http-equiv 拼错）失效。
常见错误现象：
- 两个 meta 同时存在 → 浏览器可能忽略后者，或触发兼容模式解析异常
- 写成
<meta http-equiv="content-type" content="text/html; charset=UTF-8">→ IE 或某些 WebView 不识别小写content-type - 删掉
<meta charset>只留http-equiv版 → 在 HTML5 文档中属于冗余且不可靠 fallback
实操建议：
- 只保留一个：
<meta charset="UTF-8"> - 确保它在
<head>内最靠前位置，且是第一个可解析的标签 - 如果必须兼容极老环境（如 IE6–8），用
http-equiv版，但需严格按大小写和空格书写：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
验证是否真正生效，别只看页面显示
页面看着正常 ≠ 字符集设置正确。JS 报 Uncaught SyntaxError: Invalid or unexpected token、CSS 中文注释乱码、AJAX 返回中文变问号，都可能是底层编码链断裂导致。
实操建议：
- Chrome DevTools → Network → 点开 HTML 请求 → Headers → 查 Response Headers 中
Content-Type是否含charset=UTF-8 - 控制台执行
document.characterSet或document.inputEncoding，确认返回"UTF-8" - 用命令行检查文件真实编码：
file -i index.html（Linux/macOS）或chcp+ 文件二进制分析（Windows） - 特别注意构建工具（如 Webpack/Vite）可能自动注入 meta 或重写 HTML —— 检查输出后的 dist 文件，而非源文件
BOM 是最容易被忽略的隐形破坏者：它不显示、不报错，却让 <meta charset> 彻底失效；而编辑器默认保存选项又常常悄悄带上它。改完 meta、配好服务器、清完缓存，最后卡在“文件开头那三个看不见的字节”上，很常见。
