必须置于最开头（在等任何标签前），因浏览器流式解析时若未及时识别编码，会以iso-8859-1等fallback解码非ascii字符，导致开头乱码且不可逆；其有效性依赖文件真实编码为utf-8无bom、服务器响应头一致及全链路统一。
meta charset="utf-8" 必须加，且必须放在 最开头——在 <title></title>、<link>、<script></script> 任何标签之前。否则浏览器可能已按默认编码（如 ISO-8859-1）开始解析，后续声明无效。
为什么 meta charset 要放
浏览器解析 HTML 是流式进行的。一旦遇到非 ASCII 字符（比如中文、 emoji），而此时还没读到 meta charset，就会用 fallback 编码（通常是 Latin-1）解码，导致开头几个字就乱码，且不可逆。
- 常见错误：把
<meta charset="utf-8">放在<title></title>后面，或夹在两个<script></script>之间 - 更隐蔽的问题：某些构建工具（如 Vite、Webpack 插件）会自动注入
<script></script>或<link>到开头，覆盖你的 meta 位置 - 验证方式：打开 DevTools → Network → 刷新 → 点开
index.html→ 查看 Response Headers 中的Content-Type，再对比 Preview 标签页是否正常显示中文
charset=utf-8 的三种写法，哪一种真正有效？
只有 <meta charset="utf-8"> 是 HTML5 原生、无歧义、广泛兼容的写法。其他两种容易出问题：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<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 或某款国产浏览器访问，才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
