meta charset="utf-8" 必须置于最开头、任何非ascii字符（含bom、注释、空格、换行、等）之前，且值必须严格为"utf-8"；浏览器仅扫描前1024字节且只识别ascii范围内的该标签，否则fallback至系统默认编码导致乱码。
meta charset 必须放在 开头、任何非 ASCII 字符（包括注释、<title></title>、BOM、空格、换行）之前，否则浏览器可能根本读不到它。
为什么 meta charset="UTF-8" 放错位置就失效
浏览器只扫描 HTML 文件开头 1024 字节来查找 meta charset，且只认 ASCII 范围内的字符。一旦前面出现中文、emoji、BOM（EF BB BF）、注释 <!-- -->、甚至多余空格或换行，就会跳过该标签， fallback 到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），立刻导致乱码或 JS 报 Invalid or unexpected token。
-
<meta charset="UTF-8"> <title>首页</title>→ ✅ 有效 -
<title>首页</title> <meta charset="UTF-8">→ ❌ 失效（<title></title>含中文，已超 ASCII） -
<!-- 注释 --><meta charset="UTF-8">→ ❌ 失效（注释不是 ASCII） -
\n<meta charset="UTF-8">→ ❌ 换行符也算“非空格 ASCII 前导”，部分旧引擎会跳过
charset 值必须严格写成 "UTF-8"，不能写 "utf8" 或 "utf_8"
IANA 注册的标准值只有 UTF-8（大写 U、T、F，数字 8，中间短横）。写成 utf8 在 Chrome 等现代浏览器中可能兼容，但在某些 WebView、旧版 Safari 或构建工具（如 html-webpack-plugin）里会被忽略，直接 fallback 到系统编码。
- ✅ 正确：
<meta charset="UTF-8"> - ❌ 错误：
<meta charset="utf8">、<meta charset="UTF8">、<meta charset="unicode"> - ⚠️ 不推荐：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已弃用，冗余且易出错
文件保存编码、HTTP 响应头、meta charset 三者必须一致
浏览器按优先级使用：HTTP Content-Type header > meta charset > 系统默认编码。只要其中任意一项是 GBK 或 ISO-8859-1，而其他两项是 UTF-8，就必然乱码。
- VS Code 中：用
Save with Encoding → UTF-8（**不要选 “UTF-8 with BOM”**，BOM 会干扰meta识别） - Nginx 配置：加
charset utf-8;到server或location块 - Express：用
res.set('Content-Type', 'text/html; charset=UTF-8') - 验证方式：打开 DevTools → Network → 刷新页面 → 查看响应头中的
Content-Type，再对比文件实际编码（file -i index.html或 VS Code 右下角编码显示）
最容易被忽略的点：BOM 不是 UTF-8 的必需项，反而是隐患；meta charset 的位置比内容更重要；HTTP 响应头和文件编码不一致时，meta 根本没机会起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
