html中文乱码主因是未被浏览器识别，因位置错误、bom干扰、http响应头覆盖或文件实际编码不匹配；必须确保其紧贴开头、无bom/空格/注释，且文件真实编码为utf-8（无bom）、服务端响应头charset一致。
<meta charset="UTF-8"> 写了但中文还是乱码，八成不是没写，而是它压根没被浏览器读到——位置、BOM、HTTP 响应头、文件实际编码，四者只要一个不一致，就失效。
为什么 <meta charset="UTF-8"> 没生效？
浏览器只在解析 HTML 前 1024 字节内找这个标签，且必须是纯 ASCII 范围。一旦前面有 BOM、空格、注释、<title></title> 或其他非 ASCII 字符，它就会跳过或识别失败。
-
<meta charset="UTF-8">必须紧贴开始，前面不能有任何字符（包括不可见的 BOM、空行、<!-- 注释 -->） - 写成
<meta charset="utf8">或<meta charset="UTF8">无效，只有"UTF-8"是标准值 - VS Code 显示“UTF-8”不代表文件真存为 UTF-8；Notepad++ 显示“UTF-8-BOM”才表示含 BOM —— 后者会让
<meta>失效 - 用
file -i index.html（Linux/macOS）或Get-Content index.html -Encoding Byte | Select -First 3（PowerShell）验证是否含 BOM（ef bb bf或239 187 191）
HTTP 响应头覆盖了 <meta> 声明
服务端返回的 Content-Type: text/html; charset=GBK 会直接无视 HTML 里的 <meta charset>，强制按 GBK 解析——这时页面显示方块字，但控制台不报错。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Chrome DevTools → Network → 点开 HTML 请求 → Headers → Response Headers → 查
content-type - Nginx 配置中加
charset utf-8;（在 http/server/location 块里） - Apache 的
.htaccess加AddDefaultCharset UTF-8，确认没有AddDefaultCharset GBK冲突 - Express 中，
res.sendFile()不带 charset，必须手动res.set('Content-Type', 'text/html; charset=utf-8')
文件实际编码 ≠ 编辑器显示编码
VS Code 左下角写着“UTF-8”，只是当前打开方式；保存时若没选对编码，文件仍可能是 GBK 或 ISO-8859-1。浏览器按 <meta> 去解一个 GBK 文件，必然乱码。
- VS Code：先 右下角点击编码名 → “Reopen with Encoding” → 选 UTF-8，再 “Save with Encoding” → 选 “UTF-8”（不要选 “UTF-8 with BOM”）
- Notepad++：菜单栏“编码 → 转为 UTF-8 无 BOM 格式”
- Linux/macOS：用
iconv -f GBK -t UTF-8 input.html > output.html转码（先确认原编码） - 别信“自动检测”——
file -i和xxd -l 3才是真相
静态文件（file:// 协议）下完全依赖 <meta>
双击打开 HTML 文件时，没有 HTTP 响应头，浏览器只能靠 <meta charset> 推断编码。此时任何位置偏差、BOM、大小写错误都会导致 fallback 到 ISO-8859-1 或 Windows-1252，中文直接变问号或乱码。
- 确保
<meta charset="UTF-8">是中第一个标签，前面无空格、无换行、无注释 - 禁用所有可能插入 BOM 的编辑器插件（比如某些“自动添加版权注释”的插件）
- 用
head -c 100 index.html | cat -A查看前 100 字节是否有隐藏字符（^@、M-oM-M-等） - 开发阶段优先用本地服务器（
npx serve、python3 -m http.server），避免file://下的不可控 fallback
真正麻烦的从来不是“要不要加 <meta charset>”，而是它被谁覆盖、在哪失效、文件到底存成啥样——三者缺一不可对齐，否则就是白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
