HTML乱码和怪异模式主因是编码与DOCTYPE设置错误：必须顶格写<!DOCTYPE html>（无BOM、空格、注释），<meta charset="utf-8">紧贴<head>开头，且文件物理编码、meta声明、HTTP Header三者必须一致。
HTML 文件编码设置出错，90% 的乱码和怪异模式问题就出在这里——不是浏览器不行，是文件本身没“说清楚自己是谁”。
为什么 <!DOCTYPE html> 必须顶格且无 BOM
它不是装饰，是浏览器进入标准模式的开关。只要前面有空格、注释、U+FEFF（BOM）、甚至服务器注入的换行，IE 和旧 Edge 就直接进怪异模式（Quirks Mode）。
- 后果很实在：
flex、grid、box-sizing: border-box全部失效，document.body.scrollTop读出来是0却不是真实滚动值 - VS Code 右下角显示 “UTF-8” 不代表就是 “UTF-8 without BOM”；必须点开编码菜单选 “Save with Encoding → UTF-8”（不是 “UTF-8 with BOM”）
- Node.js 模板（如 EJS、Pug）里，
<% if (cond) { %>后如果换行再写<!DOCTYPE html>，那个换行就是致命空格
<meta charset="utf-8"> 必须紧贴 <head> 开头
它得在浏览器解析到任何内容前就“亮明身份”。晚于 <title> 还算安全，但一旦被 <script> 或 <link> 挡在后面，Chrome 早期版本会按 ISO-8859-1 解析已加载的 HTML 片段，中文立刻变 。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 别写
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">—— 这是 HTML4 写法，HTML5 只认charset属性 - 即使后端通过 HTTP Header 发了
Content-Type: text/html; charset=utf-8，也必须保留该<meta>标签：本地打开file://时 Header 失效，全靠它兜底 - Vue/React SSR 模板要检查服务端输出的 HTML 是否被框架自动删掉了这行 —— 有些 SSR 中间件会“优化”掉它
编辑器保存编码与文件声明必须一致
VS Code 声称用 UTF-8 保存，但若你手动改过编码设置或从别处复制粘贴过内容，实际文件可能混入 GBK 字节。乱码往往不是“没设”，而是“设了但没存对”。
立即学习“前端免费学习笔记（深入）”；
- 用十六进制编辑器（如 VS Code 安装 Hex Editor 插件）打开文件，看开头是不是
EF BB BF—— 是则带 BOM，不是才真正干净 - Sublime Text：菜单
File → Save with Encoding → UTF-8（不是 “UTF-8 with BOM”） - Notepad++：菜单
编码 → 转为 UTF-8 无 BOM 格式，然后另存为 - Linux/macOS 下可批量清理：
sed -i '1s/^\xEF\xBB\xBF//' *.html
最容易被忽略的其实是“三重一致性”：文件物理编码、<meta charset> 声明、HTTP Header 中的 charset 必须完全相同。少一个，兼容性地基就塌一角。
