content-type 响应头优先级最高，必须为 text/html; charset=utf-8；meta charset 必须位于 head 最前面且无 bom/空格/注释干扰；文件实际编码需与声明一致。

直接看 Content-Type 响应头——它比 <meta charset="UTF-8"> 优先级高，且多数乱码问题根源在此，不是文件编码或标签写错。

查 Network 面板的 HTML 请求响应头

浏览器只认 HTTP 响应头里的 Content-Type，不猜编码。哪怕 <meta charset="UTF-8"> 写得再标准，只要响应头是 text/html（没带 charset）或 charset=gbk，中文必乱。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 打开 DevTools → Network → 刷新页面 → 找到主 HTML 请求（type 是 document）
• 点开 → Headers → Response Headers → 查 Content-Type 字段值
• 常见错误值：text/html（缺 charset）、text/html; charset=gbk、text/html; charset=ISO-8859-1
• 正确值必须是：text/html; charset=UTF-8（注意大小写不敏感，但 UTF-8 是推荐写法）

确认 <meta charset> 在 最前面

这个标签失效往往不是写错了，而是被看不见的东西挡住了。浏览器只扫描 开头约 1024 字节找它，BOM、空格、注释、甚至 emoji 都能让它“隐身”。

• 用 VS Code 打开 index.html，右下角确认编码显示为 UTF-8（不是 UTF-8 with BOM）
• 把光标移到 后面，按方向键向后移动——第一个字符必须是 <meta>，前面不能有任何空行、空格、<code>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！