必须用无bom的utf-8保存html文件，否则可能完全失效；因浏览器仅扫描前1024字节查找该标签，bom（ef bb bf）占前3字节致其偏移超限，触发系统默认编码（如windows的gbk）fallback，引发中文乱码。
必须用无BOM的UTF-8保存HTML文件，否则 <meta charset="UTF-8"> 可能完全失效。
为什么BOM会导致失效
浏览器解析HTML时只扫描前1024字节找 <meta charset>；如果文件开头是BOM（EF BB BF），它就占了前3字节，把 <meta> 往后挤，一旦超出1024字节范围，浏览器直接 fallback 到系统默认编码（Windows通常是GBK），中文立刻变乱码。
常见现象：
- VS Code右下角显示“UTF-8”，但打开GBK编码的文件后仍乱码——说明实际是UTF-8 with BOM
- Chrome DevTools里Elements面板能看到
<meta charset="UTF-8">，但Network里Response Headers显示Content-Type: text/html; charset=gbk——BOM干扰了识别 - 本地双击打开
file://页面正常，但部署到Nginx后乱码——HTTP响应头没覆盖BOM导致的fallback
怎么确认文件是否含BOM
别信编辑器右下角的显示，实测为准：
- Linux/macOS：
head -c 4 index.html | xxd，输出含ef bb bf就有BOM - PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3，结果是239 187 191就有BOM - VS Code：Ctrl+Shift+P → “Reopen with Encoding” → 选
GBK，如果中文还能看清，说明原文件不是纯UTF-8（很可能是BOM干扰）
正确保存为无BOM UTF-8的操作步骤
关键：所有操作必须避开“UTF-8 with BOM”选项。
- 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”
- 如果已有BOM：Linux/macOS用
sed -i '1s/^\xef\xbb\xbf//' index.html删除；PowerShell用(Get-Content index.html -Raw) -replace "\xEF\xBB\xBF", "" | Set-Content index.html -NoNewline
配套检查点：光改文件编码不够
即使文件是无BOM UTF-8，以下三点任一缺失，乱码仍会发生：
-
<meta charset="UTF-8">必须是的第一个子节点，前面不能有任何空白、注释或<script></script> - Web服务器响应头要匹配：Nginx配
charset utf-8;，Apache配AddDefaultCharset UTF-8，Express用res.set('Content-Type', 'text/html; charset=utf-8') - 避免从Word、微信、QQ直接复制内容粘贴进HTML——这些来源常带隐藏格式或全角空格，可能引入不可见字符干扰解析
最易被忽略的是：文件编码、meta标签、HTTP响应头三者必须严格一致。少一个，浏览器就可能按自己的逻辑猜，而猜错就是乱码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
