页面出现中文乱码，90%是meta charset缺失、错位或与文件实际编码不一致所致；需确认文件真实编码（非编辑器显示）、确保位于前1024字节内且无BOM/注释干扰，并统一HTTP响应头Content-Type为charset=utf-8。
页面出现中文乱码，90% 是 meta charset 声明缺失、错位或与实际文件编码不一致导致的，不是字体或 CSS 的问题。
确认文件真实编码格式
编辑器显示“UTF-8”不代表文件就是 UTF-8。很多编辑器（如 VS Code、Sublime）会自动猜测编码，但猜错时不会提醒。乱码常发生在从他人处复制 HTML、用记事本保存、或从旧系统导出的文件上。
- 用 VS Code 打开文件 → 右下角查看当前编码（如显示
GBK或ISO-8859-1），点击它 → 选择Save with Encoding→ 改为UTF-8 - 不要选
UTF-8 with BOM，BOM 会导致部分服务器或 JS 解析异常 - 改完后务必重新保存文件，再刷新页面验证
检查 meta charset 是否在 head 前 1024 字节内
浏览器解析 HTML 时，会在读取前 1024 字节就决定用什么编码解码后续内容。如果 meta charset 写得太靠后，或前面有大段注释/空格/UTF-8 BOM，就会错过时机，触发“编码嗅探”，结果往往 fallback 到 GBK 或 Windows-1252，中文立刻变乱码。
-
必须是内第一个或前几个标签之一 - 删掉
顶部所有空行、长注释、无用 script 标签 - 避免在
前插入任何非 ASCII 字符（比如中文注释、emoji）
核对 HTTP 响应头是否覆盖了 meta 声明
本地双击打开 index.html 时走的是 file:// 协议，此时只看 meta charset；但一旦起本地服务（如 python3 -m http.server）或部署到 Nginx/Apache，服务器返回的 Content-Type 响应头（如 text/html; charset=gbk）会直接覆盖 HTML 里的 meta 设置。
- 按 F12 打开开发者工具 → Network → 刷新页面 → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type - 若值含
charset=gbk或不含charset，说明服务器配置有问题 - Nginx 需确保
charset utf-8;在 server 或 location 块中启用；Apache 需确认AddDefaultCharset UTF-8已开启
真正容易被忽略的是三者必须严格一致：文件磁盘编码 = meta charset 值 = HTTP 响应头 charset。少一个环节，乱码就可能出现，且错误表现不固定——有时只在商品标题乱，有时只在价格数字后多出方块，这些都不是样式问题，而是编码链断裂的明确信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
