必须确保HTML文件为UTF-8无BOM编码且<meta charset="UTF-8">紧贴<head>开头零空格，三者缺一不可；验证方法：VS Code右下角查编码、xxd或PowerShell检测BOM（EF BB BF/239 187 191）、Elements面板确认meta为head首子节点。
必须确保 HTML 文件是 UTF-8 无 BOM 编码，且 <meta charset="UTF-8"> 是 <head> 内第一个子节点，前面不能有任何字符（包括空格、注释、BOM）——缺一不可，否则中文必然乱码。
如何验证并清除 BOM 头
浏览器只扫描前 1024 字节找 <meta charset>，一旦开头有 BOM（EF BB BF），它就直接被跳过，回退到 Windows 默认的 GBK 编码，中文立刻变“”。
- VS Code 右下角看编码标识：若显示 “UTF-8 with BOM”，点击后选 “Reopen with Encoding” → UTF-8，再点 “Save with Encoding” → UTF-8（**务必不勾选 “with BOM”**）
- Linux/macOS 终端执行：
xxd -l 4 index.html，若首行含ef bb bf，说明有 BOM；可用sed -i '1s/^\xEF\xBB\xBF//' index.html清除 - PowerShell 执行：
Get-Content index.html -Encoding Byte | Select -First 3，输出239 187 191即为 BOM - Notepad++：菜单栏 “编码” → “转为 UTF-8 无 BOM 编码”
为什么 <meta charset="UTF-8"> 必须紧贴 <head> 开头
HTML 解析器不“读完整个 <head>”，而是硬性截断前 1024 字节扫描。哪怕只在 <head> 后加一个空格、换行或注释，<meta charset> 就可能失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ❌ 错误写法：
<head>\n <!-- 页面描述 -->\n <meta charset="UTF-8"> - ✅ 正确写法：
<head><meta charset="UTF-8">（中间**零空格、零换行、零注释**） - AI 生成模板、Thymeleaf/Jinja 模板引擎常在
<head>前注入注释或空白，需手动检查并删掉 - F12 打开 Elements 面板，展开
<head>，确认<meta charset="UTF-8">是它的第一个子节点
HTTP 响应头与 <meta charset> 的优先级关系
通过 http:// 或 https:// 访问时，HTTP 响应头中的 Content-Type: text/html; charset=utf-8 优先级高于 <meta charset>；但用 file:// 双击打开时，HTTP 头完全无效，全靠 <meta charset> —— 这也是本地预览乱码最常见原因。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置必须写：
charset utf-8;（小写，结尾分号不能少），放在http/server/location块内 - Express.js 中，在
res.send()前调用：res.set('Content-Type', 'text/html; charset=utf-8') - Apache 的
.htaccess中加：AddDefaultCharset UTF-8 - F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers，检查是否有
Content-Type: ... charset=...，若值是gbk或缺失 charset，说明服务端配置未生效
最容易被忽略的是：**三者必须同时成立才真正安全**——文件本身是 UTF-8 无 BOM + <meta charset="UTF-8"> 紧贴 <head> 开头 + HTTP 响应头（或 file:// 场景下的纯 meta）明确指定 UTF-8。任一环节断裂，中文就大概率变成方块或问号。
