html中文乱码根本原因是编码链路未统一为utf-8；必须确保html文件实际为utf-8无bom保存、置于最前、http响应头content-type: text/html; charset=utf-8生效，三者缺一不可。
HTML 在线运行本身完全支持中文，但“支持”不等于“自动正确显示”——乱码出现的核心原因从来不是 HTML 不认识中文，而是编码链路中某一个环节没对齐 UTF-8。
为什么 <meta charset="UTF-8"> 写了还是乱码
浏览器只在 HTTP 响应头缺失 Content-Type 或其中没带 charset 时，才 fallback 到解析 HTML 前 1024 字节里的 <meta charset>。一旦服务端返回了 Content-Type: text/html; charset=gbk，哪怕你写了十遍 <meta charset="UTF-8">，它也直接按 GBK 解。
- 用 Chrome F12 → Network → 点开 HTML 请求 → 查看 Response Headers 里的
Content-Type值 - 如果是
text/html; charset=iso-8859-1、gbk或压根没charset，问题就出在服务端配置，不是 HTML 文件本身 -
<meta charset>必须放在开始后、任何其他标签（包括注释、空格、BOM）之前；否则可能被跳过
VS Code 里保存 HTML 文件却仍是乱码
VS Code 显示“UTF-8”，不代表文件实际是 UTF-8。它常把 GBK 编码的文件强行当 UTF-8 渲染，导致一堆 符号。关键要确认“实存编码”而非“显示编码”。
- 右下角状态栏点击编码名称（如
UTF-8或GBK），选Reopen with Encoding，依次试GBK、UTF-8、ISO-8859-1，直到中文正常显示 - 确认后，立刻点
Save with Encoding→ 选UTF-8（注意：不要选UTF-8 with BOM，BOM 会插在前，破坏 <code><meta charset>的位置有效性） - Linux/macOS 下用
file -i filename.html或head -c 4 filename.html | xxd验证：输出含ef bb bf表示有 BOM，需删
本地双击打开 file:// 协议时乱码
这个场景没有 HTTP 响应头，浏览器唯一依赖就是 <meta charset>，但它只扫描前 1024 字节。如果开头有 BOM、注释、空行或非 ASCII 字符（比如中文注释），就可能错过。
-
<meta charset="UTF-8">必须是内第一个子节点，前面不能有任何字符（包括空格、换行、<!-- comment -->） - 删掉所有头部注释，确保结构是：
<meta charset="UTF-8">... - 避免用 Windows 记事本保存 —— 它默认存为 ANSI（即 GBK），且无法显式选编码
- 如果必须双击运行，优先用 VS Code / Sublime Text 保存为纯
UTF-8，并验证开头无 BOM
最易被忽略的一点：CSS 和 JS 文件如果自身不是 UTF-8 编码，即使 HTML 正确，alert("你好") 或中文 CSS 注释仍会变 。它们和 HTML 共享同一套编码识别逻辑，必须同步校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
