meta charset="UTF-8"必须置于<head>最开头且前面不能有任何字符（包括BOM、空格、注释、<script>），否则浏览器仅扫描前1024字节并中断，导致回退系统默认编码引发乱码。
meta charset="UTF-8" 必须出现在 <head> 的最开头，且前面不能有任何字符（包括 BOM、空格、注释、<script> 标签），否则浏览器会跳过它， fallback 到系统默认编码（如 Windows 上的 GBK）——这是绝大多数乱码问题的根源。
为什么 meta charset 放错位置就失效
浏览器解析 HTML 时，只扫描前 1024 字节来查找 meta charset；一旦遇到 BOM（ef bb bf）、HTML 注释（<!-- -->）、<script> 或任意不可见字符，就会中断扫描，直接采用系统 locale 编码（Windows 默认 GBK，Linux/macOS 默认 ISO-8859-1）。结果就是：源文件明明是 UTF-8，页面却显示为“”。
常见触发场景：
- VS Code 默认保存为
UTF-8 with BOM，BOM 写在文件最开头，<meta>实际排第二，直接被忽略 - AI 生成的 HTML 模板在
<head>前插入了注释或空行 - 用 Notepad++ 或老旧编辑器保存时误选了
ANSI或GBK - 后端模板引擎（如 Thymeleaf、Jinja）在
<head>前注入了动态内容
如何验证并修复文件编码与 BOM
先确认文件真实编码和 BOM 状态，再针对性修正：
立即学习“前端免费学习笔记（深入）”；
- Linux/macOS 下执行：
xxd -l 4 index.html，若输出含ef bb bf，说明有 BOM；用sed -i '1s/^\xEF\xBB\xBF//' index.html删除 - PowerShell 下执行：
Get-Content index.html -Encoding Byte | Select -First 3，同样检查是否为239 187 191 - VS Code 中右下角查看当前编码标识，点击后选 “Reopen with Encoding” →
UTF-8，再点 “Save with Encoding” →UTF-8（注意不勾选 “with BOM”） - Notepad++：菜单栏 “编码” → “转为 UTF-8 无 BOM 编码”
HTTP 响应头与 meta 的优先级关系
当页面通过 http:// 或 https:// 访问时，HTTP 响应头中的 Content-Type: text/html; charset=utf-8 优先级高于 meta charset；但若响应头缺失 charset（如 Nginx 默认不设、Apache 未配 AddDefaultCharset），浏览器就会回退到 meta；而 file:// 协议下完全不走 HTTP 头，全靠 meta。
关键实操点：
- Nginx 配置必须写
charset utf-8;（小写，结尾分号不能少），放在http、server或location块内 - Express.js 中需在
res.send()前调用：res.set('Content-Type', 'text/html; charset=utf-8') - F12 打开 Network 面板，刷新页面，点 HTML 请求 → Headers → Response Headers，确认
Content-Type值为text/html; charset=utf-8 - 避免同时写
meta http-equiv="Content-Type"，HTML5 已不推荐，且可能干扰解析
外部资源（JS/CSS）也必须统一 UTF-8
即使 HTML 本身没问题，引入的 <script src="app.js"> 或 <link href="style.css"> 若是 GBK 编码，浏览器仍会报 Uncaught SyntaxError: Invalid or unexpected token 或 CSS 注释乱码。
验证方式：
- 终端执行：
file -i app.js，输出应含charset=utf-8 - 在 VS Code 中打开 JS/CSS 文件，右下角确认编码为
UTF-8，不是GBK或ISO-8859-1 - Webpack/Vite 等构建工具默认输出 UTF-8，但若源文件是 GBK，需在 loader 中显式指定
encoding: 'utf8'
真正卡住人的从来不是“要不要加 meta charset”，而是它前面有没有一个看不见的 BOM、一行多余的空格、或一段被忽略的注释——这些细节在本地开发时可能侥幸正常，一上服务器或换台机器就崩。动手前先看一眼文件头 4 字节，比反复改 meta 标签管用十倍。
