必须先确认文件真实编码为ANSI（如GBK），再用VS Code或Notepad++转存为UTF-8无BOM，并确保<meta charset="UTF-8">紧贴<head>开头无前置内容，三者缺一不可。
HTML 文件从 ANSI 转 UTF-8，光改 <meta charset="UTF-8"> 没用，必须同步确保文件实际保存为 UTF-8 且无 BOM，否则浏览器仍按 ANSI（通常是 GBK）解析，中文照旧乱码。
确认当前文件真实编码是 ANSI（GBK/GB2312）
别信编辑器右下角显示的“UTF-8”——那是它猜的。真实编码要看字节：
- Linux/macOS 执行：
file -i yourfile.html，若输出charset=gbk或charset=us-ascii（实为 ANSI 编码失败 fallback），基本就是 GBK - Windows PowerShell 执行：
Get-Content yourfile.html -Encoding Byte | Select -First 3，若结果不是239 187 191（即EF BB BF），且中文显示为方块或问号，大概率是 ANSI - VS Code 中：按
Ctrl+Shift+P→ 输入Reopen with Encoding→ 依次试选GBK、GB2312，若中文立刻可读，就坐实了
用编辑器正确保存为 UTF-8（无 BOM）
转码不是“另存为 UTF-8”就完事，BOM 是隐形坑：
- VS Code：按
Ctrl+Shift+P→Save with Encoding→ 选UTF-8（注意不是UTF-8 with BOM） - Notepad++：菜单栏
编码 → 转为 UTF-8 无 BOM 格式→ 再保存 - Sublime Text：菜单
File → Save with Encoding → UTF-8 - 验证是否成功：用
head -c 3 yourfile.html | xxd（Linux/macOS）或xxd -l 3 yourfile.html，输出不应含ef bb bf
修正 HTML 中的 <meta charset> 声明位置与写法
这个标签必须出现在 <head> 最开头、任何其他标签（包括 <title>）之前，且不能带多余空格或注释干扰：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法（紧贴
<head>开始）：<meta charset="UTF-8"> - ❌ 错误示例：
<!-- 注释 --><meta charset="UTF-8">（注释会挤占前 1024 字节扫描范围） - ❌ 错误示例：
<title>页面</title><meta charset="UTF-8">（<title>已占位，meta 失效） - 不要混用：
<meta http-equiv="content-type" content="text/html; charset=utf-8">已过时，优先用简写<meta charset="UTF-8">
检查服务器 HTTP 响应头是否覆盖了 meta 声明
即使文件和 meta 都对了，如果服务器返回的 Content-Type 带 charset=GBK，浏览器会无视 <meta>：
- 浏览器打开 DevTools →
Network→ 刷新页面 → 点击 HTML 请求 → 查看Response Headers→ 找Content-Type - 理想值是：
text/html; charset=UTF-8或干脆不带charset（此时才 fallback 到 meta） - Apache 用户：在
.htaccess或配置中加AddDefaultCharset UTF-8 - Nginx 用户：在 server 块中加
charset utf-8; - 静态托管（如 GitHub Pages、Vercel）通常默认不发 charset，靠 meta 生效；但部分 CDN 可能注入 header，需实测
最容易被忽略的是：文件保存编码、meta 位置、HTTP header 三者必须全部对齐。少一个，乱码就回来——尤其是 Windows 下用记事本“另存为 UTF-8”，默认带 BOM，而 BOM 会干扰 meta 解析，这种组合坑最多。
