本质是编辑器误存编码导致字节流与meta声明不匹配；需确保文件实际为utf-8（无bom）、位于最前且唯一，vs code等须选“save with encoding→utf-8”而非带bom选项。
另存为 HTML 时中文乱码，本质是编辑器把 UTF-8 字节流误存为 GBK/ANSI（或反之），再配合 <meta charset> 声明不匹配导致的。直接改保存编码 + 确保 <meta charset="UTF-8"> 在 最前，90% 能解决。
VS Code 右下角显示 “GBK” 却点了 “Save As”
这是最常见原因：你看到页面显示正常，但右下角实际是 GBK 编码，此时“另存为”会把已解码的 GBK 内容按当前编码（GBK）重新写入文件——如果原内容是 UTF-8 来的，就等于二次损坏。
- 先点右下角编码名称（如
GBK），选Reopen with Encoding→ 试UTF-8、GBK、ISO-8859-1，哪个能正确显示中文就选哪个 - 确认显示正确后，再点右下角 →
Save with Encoding→ 严格选UTF-8（不是UTF-8 with BOM） - 保存后关闭再重开，检查右下角是否稳定显示
UTF-8，且无 BOM（可用xxd -l 3 your.html验证前 3 字节不是ef bb bf）
<meta charset> 放错位置或写法错误
浏览器只扫描 HTML 前 1024 字节找 <meta charset>，一旦被注释、空格、BOM 或其他标签挡住，就会 fallback 到系统默认编码（Windows 是 GBK），立刻乱码。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta charset="UTF-8">必须在开始后**第一行**，前面不能有任何字符（包括空格、换行、<!-- comment -->） - 禁止写成
<meta charset="utf8">或<meta charset="UTF8">；标准写法只有UTF-8（带短横） - 绝对不要混用旧式写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— HTML5 已不推荐，且可能被忽略
另存为时用了 FTP 模式或带 BOM 的 UTF-8
某些编辑器（尤其 Windows 下的旧版 Notepad++、记事本）默认保存为 UTF-8 with BOM，BOM（EF BB BF）会卡在文件开头，导致 <meta charset> 实际失效 —— 浏览器扫前 1024 字节时，BOM 占了头三位，后续标签可能被跳过或误判。
- VS Code：保存时务必选
UTF-8，而非UTF-8 with BOM；若已存错，用Reopen with Encoding→UTF-8 with BOM打开，再Save with Encoding→UTF-8 - Notepad++：菜单栏
编码→转为 UTF-8（不是“UTF-8-BOM”），然后另存为 - Linux/macOS 验证：终端运行
file -i your.html，输出应含charset=utf-8；再用head -c 4 your.html | xxd，确认无ef bb bf
BOM 和 <meta charset> 的位置冲突是静默故障点，改完编码和标签后，一定要关掉文件再重开，而不是仅靠刷新浏览器 —— 否则你看到的可能是缓存或错误解码后的残留结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
