html乱码主因是编码声明、文件实际编码、http响应头三者不一致；需依次检查meta charset是否正确且位于head内、文件是否utf-8无bom、在线平台是否覆盖响应头，以及css/js外部资源编码是否统一。
HTML在线运行出现乱码，**基本就是编码声明、文件实际编码、HTTP响应头三者不一致**，其中任意一环错位都会触发浏览器 fallback 到系统默认编码（如 Windows 上是 GBK），直接显示为“”或方块字。别试“刷新几次看会不会好”，先定位哪一环崩了。
检查 <meta charset> 是否写对且位置正确
这个标签不是可有可无的装饰，它是浏览器解析 HTML 的第一道指令。常见错误包括：
-
</meta charset="utf8">—— 缺少斜杠、拼写错误，正确是<meta charset="UTF-8">（注意大小写和连字符） - 写在
外面，或在<title></title>之后、甚至里 —— 浏览器只扫描开头约 1024 字节，晚了就忽略 - 前面有 BOM 或空格/注释 —— 比如 VS Code 保存时选了
UTF-8 with BOM，开头三个字节EF BB BF会卡住解析，导致<meta>被跳过
确认文件实际保存编码是否为 UTF-8（不含 BOM）
编辑器里看到“UTF-8”不等于文件真是 UTF-8。Windows 系统下尤其危险：Notepad 默认存为 ANSI（即 GBK），VS Code 新建文件默认显示“UTF-8”，但若你之前用 GBK 打开过，它可能沿用旧编码保存。
- VS Code：右下角状态栏点击编码名（如
GBK或UTF-8），选Reopen with Encoding→ 尝试GBK/UTF-8看哪一种能正常显示中文；确认后点Save with Encoding→ 选UTF-8（**不要选 “UTF-8 with BOM”**） - Linux/macOS：终端执行
file -i your.html，输出含charset=utf-8才算对；若显示charset=gbk，就得转码 - PowerShell（Windows）：运行
Get-Content your.html -Encoding Byte | Select -First 3，若结果是239 187 191（即EF BB BF），说明带 BOM，需清除
排查在线运行环境是否覆盖了你的 <meta>
很多在线运行平台（如 JSBin、CodePen、某些教学网站）会剥离原始 HTML 结构，或强制注入自己的 HTTP 响应头。这时 <meta charset> 完全失效。
- 打开浏览器 DevTools（F12）→ Network → 刷新 → 点击 HTML 请求 → 查看
Response Headers中的Content-Type - 如果值是
text/html; charset=iso-8859-1或charset=gbk，说明平台服务器没发 UTF-8 声明，你的<meta>白写了 - 对策：换平台（推荐使用支持自定义响应头的 Vercel、GitHub Pages 或本地
file://协议测试），或确认该平台是否提供“设置编码”选项（极少数支持）
外部资源（CSS/JS）引入也必须统一 UTF-8
一个页面乱码，不一定出在 HTML 本身。如果 <link rel="stylesheet"> 或 <script src></script> 加载的文件是 GBK 编码，浏览器会按其 HTTP 响应头或 BOM 解析，污染整个页面渲染上下文。
- 检查所有外部
.css、.js文件是否也保存为UTF-8（no BOM），并确保它们的 HTTP 响应头含charset=utf-8 - 避免在
<script></script>标签里硬写中文字符串，除非确认该 JS 文件编码无误；更稳妥的是用 Unicode 转义，如\u4f60\u597d - 动态插入的 HTML 片段（如 innerHTML 赋值）若含中文，也要确保 JS 文件本身编码正确 —— 否则字符串字面量就会是乱码
最易被忽略的是：**BOM 和响应头的优先级高于 <meta>，而在线平台往往控制不了响应头**。所以当你在 CodePen 里反复改 <meta> 没用时，别纠结，立刻切到本地 file:// 路径验证 —— 那里只认 <meta> 和文件编码，逻辑最干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
