HTML刷新后乱码的根本原因是文件编码、meta charset、HTTP响应头三者不一致，且浏览器刷新时优先信任响应头；本地file://协议下依赖meta和BOM，而HTTP服务中响应头Content-Type的charset优先级最高，若缺失或错误（如iso-8859-1），即使meta写对也会失效。

HTML页面刷新后乱码，根本不是“没加”这么简单——而是文件实际编码、meta charset、HTTP响应头三者不一致，且浏览器在刷新时优先信任响应头，忽略。

为什么刷新后乱码，但首次打开正常？

常见于本地开发（file:// 协议）或 HTTP 服务未设响应头的场景：首次加载可能靠 meta charset 或 BOM 推断成功；刷新时浏览器复用缓存策略或重新解析，若服务端没返回 Content-Type: text/html; charset=utf-8，就会 fallback 到系统默认（Windows 常为 GBK），导致中文变 或方块。

• 本地双击打开 HTML：完全依赖 meta charset 和 BOM，无 HTTP 头参与
• 通过 http://localhost 刷新：HTTP 响应头 Content-Type 优先级高于 meta，哪怕写了 <meta charset="UTF-8"> 也无效
• Chrome/Firefox 在 Network 面板中点“刷新”时会强制重发请求，更容易暴露响应头缺失问题

检查并统一三要素：文件编码、meta、响应头

必须三者同时为 UTF-8（无 BOM），缺一不可。任意一项错位，刷新就可能乱码。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 验证文件真实编码：
  Linux/macOS：file -i index.html 或 head -c 4 index.html | xxd → 出现 ef bb bf 表示有 BOM，需删
  PowerShell：Get-Content index.html -Encoding Byte | Select -First 3 → 若输出 239 187 191 就是 BOM
• meta 必须紧贴 开头，前面不能有任何字符（包括空格、换行、注释、BOM）：
  ✅ 正确：<meta charset="UTF-8">
  ❌ 错误：\n<!-- 注释 -->\n<meta charset="UTF-8">（换行和注释会阻断识别）
• 查响应头：
  F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 找 Content-Type
  若值为 text/html; charset=iso-8859-1 或不含 charset，说明服务端没配，meta 直接被无视

不同服务环境如何配响应头

只改 meta 不配响应头，在 HTTP 环境下等于白做。

• Nginx：
  在 server 或 location 块内加一行：charset utf-8;
  ⚠️ 不要用 add_header Content-Type "text/html; charset=utf-8"，会重复导致 header 冲突
• Apache：
  在站点根目录放 .htaccess，写：AddDefaultCharset UTF-8
  或在 httpd.conf 的 <directory></directory> 段落里加
• Node.js/Express：
  响应前加：res.set("Content-Type", "text/html; charset=utf-8")
  必须在 res.send() 或 res.end() 之前调用
• Python http.server（开发用）：
  默认是 iso-8859-1，需继承并重写 send_response，或换用 live-server 等工具

VS Code / Notepad++ 保存时最容易踩的坑

编辑器显示“UTF-8”，不代表文件就是 UTF-8 无 BOM —— 默认常带 BOM，而 BOM 会导致 meta 失效。

• VS Code：
  右下角点击编码名称（如 “UTF-8 with BOM”）→ 选 “Save with Encoding” → 选 UTF-8（注意不是 “UTF-8 with BOM”）
  保存后务必再检查一次是否还有 BOM（用上面命令）
• Notepad++：
  菜单栏：编码 → 转为 UTF-8 编码（不是“UTF-8-BOM”）→ 再“保存”
  保存后看右下角是否显示 “UTF-8” 字样，而非 “UTF-8-BOM”
• Sublime Text：
  File → Save with Encoding → UTF-8（不是 “UTF-8 with BOM”）

真正麻烦的从来不是“怎么写”，而是确认文件磁盘字节流、HTTP 协议层、HTML 解析层三者对“UTF-8”的理解完全同步。少查一个环节，刷新就打回原形。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！