最常见原因是文件实际为GBK/GB2312编码而VSCode默认用UTF-8解码，导致字节错读；应先右下角选“通过编码重新打开”确认GBK/GB2312，再“通过编码保存”为UTF-8，并在<head>内添加<meta charset="UTF-8">。
HTML文件本身保存为非UTF-8编码
VSCode打开HTML文件时中文显示乱码，最常见原因是该文件实际以GBK或GB2312保存，但VSCode默认用UTF-8解码——字节流被错读，直接表现为方块、问号或乱码符号。
不要直接Ctrl+S保存，否则会把乱码固化进文件。正确做法是：
- 点击VSCode窗口右下角显示的编码（如
GBK或UTF-8） - 选择“通过编码重新打开” → 搜索并选中
Simplified Chinese (GB2312)或GBK - 确认中文正常显示后，再点击右下角编码 → 选择“通过编码保存” → 选
UTF-8 - 保存后，手动在HTML文件头部补上声明：
<meta charset="UTF-8">（放在<head>内）
VSCode未启用自动编码探测
即使你改过一次文件编码，新打开的旧GBK文件仍可能再次乱码——因为VSCode默认不主动猜编码，files.autoGuessEncoding默认是false。
必须显式开启，否则每次都要手动点右下角。操作如下：
立即学习“前端免费学习笔记（深入）”；
- 按
Ctrl+Shift+P打开命令面板 - 输入
Preferences: Open Settings (JSON)回车 - 在
settings.json中添加或确认存在："files.autoGuessEncoding": true - 保存后关闭再重开HTML文件（不是刷新浏览器，是关掉VSCode标签页再打开）
注意：autoGuessEncoding只影响“打开时”的解码行为，不影响保存；它会在UTF-8失败时 fallback 尝试GBK/GB2312等，但不保证100%准确，对混合编码文件仍可能误判。
浏览器预览插件或Live Server输出乱码
用Live Server插件右键“Open with Live Server”时中文仍乱码，问题往往不在VSCode，而在HTTP响应头缺失或插件未读取<meta>。
关键检查点：
- 确保HTML文件开头有且仅有一个有效的
<meta charset="UTF-8">（位置要在<title>之前，且不能写成charset=utf8） - 禁用其他干扰插件（如某些“HTML格式化”或“编码转换”插件，它们可能偷偷重写文件）
- 如果用的是老版本
Live Server（v5.7.9之前），升级到最新版——旧版对charset声明解析有bug - 临时测试：用系统默认浏览器直接双击打开HTML文件，若正常 → 说明是Live Server配置问题；若同样乱码 → 回头检查文件保存编码和
<meta>是否生效
终端里用http-server或python -m http.server启动时乱码
这类命令行HTTP服务默认不设Content-Type的charset参数，浏览器只能靠<meta>或BOM推断。但部分浏览器（尤其旧Edge）在无BOM时会忽略<meta>，导致乱码。
稳妥做法是加BOM或强制响应头：
- 用VSCode保存HTML时，选择“通过编码保存” →
UTF-8 with BOM（注意不是纯UTF-8） - 若用
python -m http.server 8000，它不支持自定义header；换用http-server -c-1（-c-1禁用缓存，配合<meta>更可靠） - 终极保险：在Live Server插件设置中添加自定义header（需v5.8.0+），在
settings.json加："liveServer.settings.CustomBrowserUrl": "http://127.0.0.1:5500", "liveServer.settings.AdvanceCustomBrowserUrl": true，再配合响应头中间件（较重，一般不需要）
BOM是隐藏字节EF BB BF，虽被现代标准视为冗余，但在Windows环境下的HTML静态服务场景中，它仍是绕过浏览器解析歧义最轻量的兜底手段。
