HTML页面乱码主因是编码声明与文件实际保存编码不一致，需确保编辑器保存格式、<meta charset>标签、HTTP响应头三者统一为UTF-8且无BOM。
HTML 页面出现乱码，绝大多数情况是编码声明与实际文件保存编码不一致，直接改 <meta charset> 标签或编辑器保存格式就能解决，不用查半天服务器配置。
为什么浏览器显示“”或一堆问号
本质是浏览器用一种编码去解码用了另一种编码保存的文件。比如文件实际是 UTF-8 编码（含中文），但 HTML 里写的是 <meta charset="gbk">，或者编辑器误存为 ANSI/GBK，浏览器就会把 UTF-8 字节流按 GBK 解，结果就是乱码。
- 常见错误现象：
æç±ç¼ç¨（UTF-8 字节被当 GBK 显示）、???、方块、问号、空格错位 - 优先检查点：编辑器右下角显示的编码格式（如 VS Code 右下角 “UTF-8” 或 “GBK”）是否和
<meta charset>一致 - 注意：
<meta charset>必须放在<head>最前面，且不能有 BOM 干扰；如果页面开头有空格或 BOM（尤其是 Windows 记事本保存的 UTF-8-BOM），<meta>可能失效
VS Code / Sublime / Notepad++ 怎么确认并改对编码
编辑器保存编码必须和 <meta charset> 声明严格匹配，否则白配。
- VS Code：右下角点击编码名称（如 “UTF-8” 或 “GBK”）→ 选 “Save with Encoding” → 选
UTF-8（推荐）；切勿选UTF-8 with BOM - Notepad++：菜单栏“编码”→ 选“UTF-8”（不是“UTF-8-BOM”）→ 然后“另存为”，确认底部状态栏显示“UTF-8”
- Sublime Text：File → Save with Encoding → UTF-8
- 验证方式：用命令行
file -i your.html（Linux/macOS）或 PowerShellGet-Content your.html -Encoding Byte | Select -First 3查前几个字节，UTF-8 无 BOM 应以ef bb bf开头（有则为 BOM）
服务器响应头 charset 和 meta 标签冲突怎么办
HTTP 响应头中的 Content-Type: text/html; charset=xxx 优先级高于 <meta charset>。如果服务器强制返回 charset=gbk，即使你写了 <meta charset="utf-8">，浏览器也会按 GBK 解。
立即学习“前端免费学习笔记（深入）”；
- 本地开发（file:// 协议）：只看
<meta charset>和文件实际编码 - 本地服务器（如 Python
http.server、Live Server 插件）：默认不设 charset 响应头，<meta>生效 - 真实 Web 服务器（Nginx/Apache）：检查是否在配置中硬编码了 charset，例如 Nginx 的
charset gbk;指令会覆盖 HTML 内声明 - 快速验证：浏览器开发者工具 → Network → 刷新页面 → 点开 HTML 请求 → 查看 Response Headers 中的
content-type字段
PHP / Node.js 动态输出 HTML 时怎么避免乱码
动态生成 HTML 时，乱码往往出在数据源（数据库、文件读取）或输出环节，而非模板本身。
- PHP：确保数据库连接用 UTF-8，如 MySQLi 连接后执行
$mysqli->set_charset("utf8mb4")；输出前加header('Content-Type: text/html; charset=utf-8'); - Node.js（原生 HTTP）：响应时必须手动设置 header，
res.setHeader('Content-Type', 'text/html; charset=utf-8');；用fs.readFile读 HTML 模板时，指定encoding: 'utf8' - 关键原则：从数据读取 → 内存字符串 → 输出响应，整个链路所有环节都必须统一为 UTF-8，任一环掉队就会乱码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正确示例</title> </head> <body> <p>你好，世界</p> </body> </html>
BOM、编辑器保存格式、HTTP 响应头这三处最容易被忽略，尤其 BOM —— 它看不见，却能让整个 <meta charset> 失效。改完记得清浏览器缓存再试，别让旧缓存误导判断。
