<meta charset="utf-8">必须置于<head>最开头（在<title>等任何标签前），因浏览器流式解析时若未及时识别编码，会以ISO-8859-1等fallback解码非ASCII字符，导致开头乱码且不可逆；其有效性依赖文件真实编码为UTF-8无BOM、服务器响应头一致及全链路统一。
meta charset="utf-8" 必须加，且必须放在 <head> 最开头——在 <title>、<link>、<script> 任何标签之前。否则浏览器可能已按默认编码（如 ISO-8859-1）开始解析，后续声明无效。
为什么 meta charset 要放 <head> 最前面？
浏览器解析 HTML 是流式进行的。一旦遇到非 ASCII 字符（比如中文、 emoji），而此时还没读到 meta charset，就会用 fallback 编码（通常是 Latin-1）解码，导致开头几个字就乱码，且不可逆。
- 常见错误：把
<meta charset="utf-8">放在<title>后面，或夹在两个<script>之间 - 更隐蔽的问题：某些构建工具（如 Vite、Webpack 插件）会自动注入
<script>或<link>到<head>开头，覆盖你的 meta 位置 - 验证方式：打开 DevTools → Network → 刷新 → 点开
index.html→ 查看 Response Headers 中的Content-Type，再对比 Preview 标签页是否正常显示中文
charset=utf-8 的三种写法，哪一种真正有效？
只有 <meta charset="utf-8"> 是 HTML5 原生、无歧义、广泛兼容的写法。其他两种容易出问题：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">：XHTML 风格，需严格闭合（/>），且引号、空格、大小写都敏感；漏掉引号或写成charset= UTF-8（前面多空格）会导致整个声明被忽略 -
<meta charset="UTF8">或<meta charset="utf_8">：拼写错误，浏览器不识别，等同于没写 - 注意：
charset值不区分大小写（UTF-8、utf-8、Utf-8都行），但连字符-不可省略
文件实际保存编码和 meta 声明不一致怎么办？
声明是“说”，文件是“做”。两者不一致，浏览器优先信“做”——即 HTTP 响应头 > 文件字节流 > meta 标签。所以即使写了 meta charset，文件存成了 GBK 或 UTF-8 with BOM，照样乱码。
立即学习“前端免费学习笔记（深入）”；
- VS Code 右下角显示 “UTF-8” 时，点它 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM） - Linux/macOS 下用命令确认：
file -i index.html应输出charset=utf-8；xxd index.html | head -n1不应看到ef bb bf - Node.js（Express）服务端要同步设置：
res.set('Content-Type', 'text/html; charset=utf-8')，否则响应头可能是charset=iso-8859-1，直接覆盖 meta
最易被忽略的一点：静态托管平台（如 GitHub Pages、Vercel）默认返回 Content-Type: text/html; charset=utf-8，此时 meta charset 看似多余，但一旦你本地开发时文件用了 BOM 或编辑器误存为 GBK，上线前根本看不出问题——直到用户用旧版 IE 或某款国产浏览器访问，才暴露出来。
