浏览器显示乱码是因为没声明正确的字符编码
HTML 页面出现中文变方块、问号或拉丁字母混排，大概率是浏览器猜错了编码格式。现代浏览器默认按 UTF-8 解析，但如果你的文件实际保存为 GBK 或 ISO-8859-1，又没显式告诉浏览器该用什么解码，就必然乱码。
关键不是“怎么修复已乱码的页面”，而是“从源头让浏览器拿到正确提示”：
- 确保 HTML 文件本身以
UTF-8无 BOM 格式保存（编辑器里选“Save as UTF-8 without BOM”，Notepad++、VS Code 都有此选项） - 在
中靠前位置写入：<meta charset="UTF-8">
（必须是这行，http-equiv方式已过时且不可靠） - 如果用服务器（如 Nginx/Apache），还要检查 HTTP 响应头是否包含
Content-Type: text/html; charset=UTF-8—— 它会覆盖 HTML 里的meta声明
VS Code 保存后还是乱码？检查右下角编码按钮
VS Code 右下角状态栏会显示当前文件编码（如 UTF-8、GBK），点它就能切换。很多人改了 meta 却忘了文件实际编码没变，结果白调。
- 点击右下角编码名 → 选
Save with Encoding→ 选UTF-8 - 千万别选
Reopen with Encoding，这只是临时换视角，不改变文件内容 - 如果文件里已有乱码文字（比如从微信复制来的），先用原编码 reopen，再 copy 出来，重新粘贴到新 UTF-8 文件中
PHP/Node.js 输出 HTML 时 header 冲突导致乱码
服务端脚本生成 HTML 时，如果手动发了错误的 Content-Type header，<meta charset> 就会被无视。
立即学习“前端免费学习笔记（深入）”；
- PHP 中避免这样写：
header('Content-Type: text/html; charset=gbk');应统一为：header('Content-Type: text/html; charset=utf-8'); - Node.js 的 Express 默认发
utf-8，但如果用了res.send(Buffer)或拼接字符串未指定编码，可能出问题；稳妥做法是显式设置：res.set('Content-Type', 'text/html; charset=utf-8'); - 模板引擎（如 EJS、Pug）通常自带 charset 设置，但若你手动拼接 HTML 字符串并
res.send()，就得自己管 header
静态资源（CSS/JS）里的中文也乱码？单独处理文件编码
CSS 和 JS 文件不会读取 HTML 的 meta，它们各自独立解析。哪怕 HTML 正确，引入的 style.css 是 GBK 编码，里面写了 content: "按钮";，照样显示为乱码。
- CSS/JS 文件也必须保存为
UTF-8无 BOM - 在 HTML 中引入时无需额外声明，但确保服务器返回的响应头对这些资源也是
charset=utf-8（Nginx 默认对.css、.js不带 charset，需手动加） - 前端构建工具（Webpack/Vite）一般默认输出 UTF-8，但若用了老旧 loader（如
raw-loader读取文本），要确认其 encoding 配置没被误设为latin1
