网页HTML源码保存乱码怎么办？正确编码保存教程-html教程-PHP中文网

html乱码95%是编辑器保存编码与不一致或含bom所致；vs code中右下角显示“gbk”或“utf-8 with bom”时，应点击该编码名→选“save with encoding”→严格选择“utf-8”（不含bom）并验证xxd输出无ef bb bf。

网页html源码保存乱码怎么办？正确编码保存教程

直接说结论：HTML 源码保存后打开是乱码，95% 是编辑器保存编码和 <meta charset> 声明不一致，或文件实际含 BOM 却被当无 BOM 解析。不是浏览器问题，也不是服务器配置优先级太高——先改本地文件再查别的。

VS Code 保存 HTML 时右下角显示 “GBK” 或 “UTF-8 with BOM” 怎么办

VS Code 右下角显示的编码名就是当前文件的**真实保存格式**，不是“看起来像”。它不骗人，但容易被忽略。

如果显示 GBK，说明你正用 GBK 编码存中文，哪怕写了 <meta charset="UTF-8">，浏览器也会按 UTF-8 去解 GBK 字节，必然乱码（比如显示 æç±）
如果显示 UTF-8 with BOM，也危险：BOM（EF BB BF）会卡在前面，导致 <meta charset> 失效（尤其 PHP/Node.js 动态输出时）
正确操作：点击右下角编码名 → 选 Save with Encoding → 严格选 UTF-8（不含 with BOM）→ 保存后重新打开
验证是否成功：用终端执行 xxd -l 3 yourfile.html，输出里**不能有 ef bb bf**；同时右下角应稳定显示 UTF-8

`<meta charset="UTF-8">` 写了还是乱码？检查这三点位置和拼写

这个标签不是“写了就生效”，它必须满足三个硬性条件，缺一不可：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

必须写成 <meta charset="UTF-8"> —— charset 全小写，引号内 UTF-8 必须带短横，大小写敏感（utf8、UTF8、utf_8 都无效）
必须放在标签内部，且**必须是里的第一个非空、非注释节点**（前面不能有空格、换行、、BOM）
不能和 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 并存——后者已过时，两者冲突时行为不可控，只留前者

Linux/macOS 和 Windows 下怎么确认文件真实编码

别信编辑器右下角或文件名后缀，用命令看字节最准：

Linux/macOS：file -i yourfile.html —— 看输出里的 charset= 值；再用 xxd -l 4 yourfile.html 查前 4 字节，ef bb bf 就是 BOM
Windows PowerShell：Get-Content yourfile.html -Encoding Byte | Select -First 4 —— 输出若为 239 187 191（即 ef bb bf 十进制），就是 BOM
Windows CMD 不推荐，type yourfile.html 会自动转码，结果不可信
注意：Notepad++ 状态栏显示“UTF-8” ≠ 实际是 UTF-8 —— 它可能把 GBK 文件“假装”识别成 UTF-8 显示，得靠命令验证

为什么用 file:// 直接双击打开正常，但 localhost 就乱码

这是 HTTP 响应头覆盖了 <meta> 的典型表现。浏览器对本地文件（file://）完全依赖 <meta>，但通过服务器访问时，Content-Type 响应头优先级更高。

Chrome 开 F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 找 Content-Type
如果值是 text/html; charset=iso-8859-1 或 gbk，哪怕 <meta> 写对了也没用
Nginx 配置要加 charset utf-8;（在 server 或 location 块里）；Express 用 res.set('Content-Type', 'text/html; charset=utf-8')；PHP 用 header('Content-Type: text/html; charset=utf-8');（必须在任何输出前）
重点：这些服务器设置只影响 HTTP 场景，对 file:// 无效 —— 所以本地双击能看，不代表线上没问题

真正麻烦的点不在“怎么设”，而在“谁在偷偷改”。比如 PHP 文件开头有 BOM，header() 就失效；比如 Webpack/Vite 构建时把模板 HTML 当二进制处理，悄悄加了 BOM；比如 Git 在 Windows 上自动转换换行符，顺带污染编码。这些问题不会报错，只会让 <meta charset> 形同虚设。