meta charset="UTF-8" 必须作为<head>第一个子元素，因浏览器仅扫描前1024字节且易被空白、注释、BOM等干扰；file://协议下无HTTP头，全赖此标签；UTF-8 with BOM会导致JS/CSS加载失败。
meta charset="UTF-8" 必须写，且必须放在 <head> 开头——这是唯一能覆盖多数乱码场景的硬性要求。其他操作都是补救或加固，不是替代。
为什么 meta charset="UTF-8" 必须是 <head> 的第一个子元素
浏览器解析 HTML 时，只扫描前 1024 字节找 meta charset；一旦遇到空格、换行、注释（<!-- -->）、零宽空格（U+200B）或 BOM（EF BB BF），就可能跳过或误判。IE 和部分旧版 Safari 更敏感，甚至把 <title> 前的空白也计入偏移。
- 错误写法：
<head>\n <!-- 注释 -->\n <meta charset="UTF-8"> - 正确写法：
<head><meta charset="UTF-8">（紧贴<head>，中间无任何字符） - VS Code 中按
Ctrl+Shift+P→Change File Encoding→Save with Encoding→ 选UTF-8（**不是 UTF-8 with BOM**）可避免 BOM 干扰
file:// 协议下只能靠 meta charset，没有 HTTP 响应头兜底
双击打开 HTML 文件走的是 file:// 协议，此时服务器响应头（如 Content-Type: text/html; charset=utf-8）完全不存在。浏览器只能 fallback 到 meta charset，且会严格按本地系统默认编码 fallback：Windows 是 GBK，macOS/Linux 是 ISO-8859-1 —— 这就是为什么同一份文件在不同系统上显示效果不同。
- 验证方式：Chrome 打开 DevTools →
Network→ 刷新 → 点 HTML 请求 → 看Response Headers是否为空；若为空，meta charset就是唯一救命稻草 - 开发时务必用 Live Server（VS Code 插件）或
npx serve启服务，让 URL 变成http://127.0.0.1:xxxx/，才能触发响应头逻辑 -
meta http-equiv="Content-Type"在 HTML5 中已废弃，且file://下完全无效，别写
UTF-8 with BOM 是隐形雷，尤其影响 JS/CSS 加载
BOM（EF BB BF）是三个字节的签名，插在文件最开头。它会让 <script> 或 <link rel="stylesheet"> 的 src/href 路径前多出不可见字符，导致 404；更常见的是引发 Uncaught SyntaxError: Invalid or unexpected token —— 因为 JS 引擎把 BOM 当作非法起始字符。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 检测命令：
xxd -l 4 index.html（Linux/macOS）或Get-Content index.html -Encoding Byte | Select -First 3（PowerShell），输出含ef bb bf或239, 187, 191即有 BOM - 删除方法：VS Code 中
Save with Encoding→ 选UTF-8（明确避开 “with BOM” 选项） - Webpack/Vite 构建时若报
Unexpected token，先检查入口 HTML 是否带 BOM，而不是急着改 JS
lang="zh-CN" 不解决乱码，但影响字体回退和语音朗读
lang 属性和字符编码无关，它不参与解码过程。但它决定浏览器用哪套字体 fallback 规则渲染中文：比如没装 “Microsoft YaHei”，lang="zh-CN" 会让 Chrome 优先尝试 “SimSun” 而不是 “Helvetica”；同时，屏幕阅读器、翻译插件、搜索引擎也会据此判断内容语种。
- 必须写在
<html>标签上：<html lang="zh-CN">，不能只写在<body>或段落里 - 局部语言切换可用：
<p lang="en">English text</p>，但不要滥用 - 搭配 CSS 字体声明更稳妥：
font-family: "Microsoft YaHei", "SimSun", sans-serif;，避免依赖系统默认
BOM 和 meta charset 位置是最容易被忽略的两个点，它们不出问题时一切正常，一出就是整页乱码或白屏，而且很难一眼定位。每次改完 HTML，顺手用 xxd 看一眼开头，比反复刷新调试快得多。
