<meta charset="UTF-8">必须置于<head>最前面，因浏览器流式解析HTML时会立即用默认编码（如ISO-8859-1）解码前1024字节，若此时未声明UTF-8，中文、emoji等非ASCII字符已乱码且不可回退。
meta charset 必须放在 <head> 最前面，不是浏览器“较真”，而是它根本没机会往后看——解析器在读到这个标签前，已经用错误编码把页面开头几十甚至上百字节解码完了。
浏览器解析 HTML 时根本不等 meta 出现
浏览器拿到 HTML 字节流后，会立即开始解析，不暂停、不等待。它按固定优先级尝试确定编码：
- 先查 HTTP 响应头的
Content-Type: text/html; charset=utf-8（最高优先级） - 没找到？就预扫描前 1024 字节，找 BOM 或
<meta charset="..."> - 但注意：这个“预扫描”不是完整解析，只是线性读取字节；如果
<meta charset>出现在第 200 字节之后，而前 199 字节里有中文、emoji 或非 ASCII 字符，它们大概率已被按默认编码（如 ISO-8859-1 或 GBK）错误解码，乱码已发生
常见干扰位置导致 meta charset 失效
即使写了 <meta charset="UTF-8">，以下情况也会让它被忽略：
- 前面有空格、换行或注释：
<!-- 注释 --><meta charset="UTF-8">→ 不算“第一个可执行标记” - 前面有
<script>标签（哪怕空的）：<script></script><meta charset="UTF-8">→ 脚本执行会中断解析流程，meta 被跳过 - 文件实际保存为 UTF-8 with BOM，但 BOM 被编辑器或构建工具意外删掉 → 浏览器失去最快速识别依据，更依赖 meta，此时 meta 若不在前 1024 字节内，风险陡增
为什么不是所有浏览器都报错，但乱码仍会发生
Chrome、Firefox 等现代浏览器对 meta charset 的容错较强，可能在稍后位置也识别到它并重新解析部分 DOM，但：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<title>中的中文、<style>里的 CSS 注释、内联<script>中的字符串，都已在首次解析中损坏 - IE（尤其 IE9 及更早）严格要求
<meta charset>在前 1024 字节且无前置内容，否则直接 fallback 到系统 locale 编码 - 服务端渲染（SSR）或静态站点生成器若模板拼接顺序出错，比如把全局脚本注入到
<meta>前，问题会批量出现
验证和调试 meta charset 是否生效的实操方式
别只靠肉眼观察页面是否“看起来正常”，真实问题是静默发生的：
- 用开发者工具 → Network → 点开 HTML 请求 → 查看 **Response Headers** 中是否有
Content-Type且含charset；若有，<meta charset>实际不会被用到 - 用
curl -sI your-page.html | grep charset快速确认响应头 - 在控制台运行
document.charset，返回值是浏览器最终采用的编码，不是你写的那个字符串 - 打开 DevTools → Elements → 右键
<html>→ “Edit as HTML”，手动删掉开头所有内容只留<meta charset="UTF-8">，刷新看是否还乱码 —— 这能排除其他干扰
真正容易被忽略的是：文件保存编码、HTTP 响应头、BOM、meta 标签这四者之间的优先级不是并列协商，而是“一锤定音”。只要其中某一步走错，后续所有努力都在补救一个已经发生的解码错误。
