浏览器打开HTML文件乱码，主因是meta声明与文件实际编码不一致；应确保文件为UTF-8无BOM、meta charset="UTF-8"且位于title前，并用本地服务器而非双击测试。
浏览器打开 HTML 文件显示乱码，大概率是 meta 声明和文件实际编码不一致
HTML 文件本身没有“内置编码”，浏览器靠两处信息判断怎么解码：一是文件开头的 <meta charset="...">，二是 HTTP 响应头里的 Content-Type（本地双击打开时无效），三是文件 BOM 或字节特征（不可靠）。三者冲突时，浏览器优先信 meta。如果你写的是 <meta charset="UTF-8">，但文件实际保存为 GBK，中文必然乱码。
- 用编辑器（如 VS Code、Notepad++）打开文件，右下角看当前编码显示，确认是不是 UTF-8（无 BOM 最稳妥）
- 检查
<head>中是否只有一条<meta charset="UTF-8">，且位置在<title>之前 - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=GBK">这类过时写法，它已被charset属性取代
VS Code 里保存 HTML 文件为 UTF-8（无 BOM）的操作路径
VS Code 默认可能用系统区域编码（比如 Windows 简体中文版默认 GBK），直接“另存为”容易选错。必须手动触发编码转换：
- 打开 HTML 文件后，点击右下角编码名称（如显示
GBK或UTF-8 with BOM） - 选择
Save with Encoding→UTF-8（注意不是UTF-8 with BOM） - 保存后重新用浏览器双击打开，乱码通常消失
- 如果右下角原本就显示
UTF-8，但仍有乱码，说明文件里混入了非 UTF-8 字节（比如从 Word 复制粘贴过），需清空重写关键中文段落
用 file 命令或 Python 快速验证文件真实编码（Linux/macOS/WSL）
别全信编辑器界面显示，终端命令能看真实字节特征：
file -i index.html
输出类似 index.html: text/html; charset=iso-8859-1 就说明根本不是 UTF-8。也可用 Python 辅助检测：
立即学习“前端免费学习笔记（深入）”；
python3 -c "import chardet; print(chardet.detect(open('index.html', 'rb').read()))"
返回 {'encoding': 'GB2312', 'confidence': 0.99} 就得按 GB2312 重新保存，再同步改 <meta charset="GB2312">（但强烈建议统一转 UTF-8）。
本地双击打开 vs 用本地服务器打开，编码处理逻辑完全不同
这是最容易被忽略的关键点：双击打开走的是 file:// 协议，浏览器跳过所有 HTTP 头，只依赖 meta 和 BOM；而用 python3 -m http.server 启服务后访问 http://localhost:8000，响应头会带 Content-Type: text/html; charset=utf-8，此时即使 HTML 里没写 meta，也可能正常显示——但这只是掩盖问题，部署到真实服务器时很可能崩。
- 开发阶段务必用本地服务器测试（
python3 -m http.server或 VS Code Live Server 插件） - 上线前确保：文件物理编码 =
meta charset值 = 服务器响应头 charset（Nginx/Apache 需配置） - 如果必须双击打开（如发给客户看单页报告），唯一可靠方案是：UTF-8 无 BOM + 正确
<meta charset="UTF-8">+ 不含任何非 ASCII 特殊字符（如全角空格、智能引号）
