必须紧贴开头，因浏览器仅扫描前1024字节查找该标签，若前方存在bom、注释、空格或等，即失效并fallback至系统默认编码（如windows的gbk），导致中文、emoji乱码。
meta charset 必须放在 开头，且前面不能有任何字符（包括空格、BOM、注释、<script></script> 或 <title></title>），否则在多数浏览器中直接失效。
为什么 meta charset="UTF-8" 一定要紧贴
浏览器解析 HTML 时，只扫描前 1024 字节来查找 meta charset。一旦开头存在 BOM（EF BB BF）、注释、<script></script> 或甚至一个空格，就会跳过该标签——然后 fallback 到系统默认编码（Windows 是 GBK，Linux/macOS 是 ISO-8859-1），导致中文、emoji、繁体字全部乱码。
常见错误现象：
-
<title>首页</title> <meta charset="UTF-8">→<title></title>在前，meta失效 -
<!-- 注释 --><meta charset="UTF-8">→ 注释挡路，不生效 -
<script>...</script><meta charset="UTF-8">→ JS 提前触发解析，meta被忽略 - VS Code 显示 “UTF-8 with BOM”，保存后文件开头是
EF BB BF→ 浏览器把 BOM 当作内容，meta检测失败
如何验证 meta charset 真的生效了？
不能只看源码里有没有那行标签。要三处一致：
- DevTools → Network → HTML 请求 → Response Headers 中
Content-Type的charset值（如text/html; charset=UTF-8） - 同个请求的 Preview 或 Response 标签页中，中文/emoji 是否正常渲染（不是方块或问号）
- 控制台执行
document.characterSet和document.inputEncoding，返回值必须都是"UTF-8"
注意：用 file:// 直接打开本地文件时，HTTP 响应头为空，此时完全依赖 meta charset —— 它若失效，就彻底乱码，无 fallback。
服务器响应头和 meta charset 冲突了怎么办？
RFC 7231 明确规定：HTTP 响应头中的 Content-Type 的 charset 参数优先级高于 meta charset。比如服务器返回 Content-Type: text/html; charset=GBK，哪怕 HTML 里写了 <meta charset="UTF-8">，Chrome/Firefox 也会按 GBK 解码，结果还是乱码。
解决方法：
- Apache：在站点根目录加
.htaccess，写AddDefaultCharset UTF-8 - Nginx：在
server或location块中加charset utf-8;（注意不是add_header Content-Type，那会覆盖整个 header） - Node.js（Express）：
res.set('Content-Type', 'text/html; charset=UTF-8') - Python
http.server：它默认不发 charset，此时meta是唯一指望，务必保证它位置正确且文件真实为 UTF-8
国际化页面还要注意哪些编码连带问题？
单靠 <meta charset="UTF-8"> 不够。整个技术链路都得对齐：
-
<form></form>提交时，如果没设accept-charset="UTF-8"，某些旧版 Safari 或 IE 可能用 ASCII 或 ISO-8859-1 编码 POST 数据，后端收到的就是乱码字节 - CSS 文件里有中文 content（如
content: "编辑";），必须确保 .css 文件本身也是 UTF-8 无 BOM，否则样式失效或报错 - JS 文件含中文字符串或注释，同样要存为 UTF-8；若用
eval()动态执行字符串，字符串编码还得和 JS 文件一致 -
lang属性要配 IANA 标准值，如lang="zh-CN"、lang="zh-TW"，不能写lang="cn"或lang="ch"，否则部分语音朗读、字体回退逻辑出错
最易被忽略的点：编辑器保存时是否真用了 UTF-8 无 BOM —— VS Code 默认是，但打开一个旧 GBK 文件再“另存为 UTF-8”，若没手动选“UTF-8”而是点“保存”，它可能仍存为 GBK。务必用 xxd -l 3 index.html 确认开头没有 EF BB BF。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
