必须同时满足：HTML文件实际为UTF-8无BOM编码、<meta charset="UTF-8">紧贴<head>开头（无空格/注释）、HTTP响应头Content-Type含charset=utf-8；VS Code右下角显示“UTF-8”为理想状态，若为“UTF-8 with BOM”则需用Save with Encoding→UTF-8（不选with BOM）清除BOM，Linux/macOS用head -c 4 | xxd验ef bb bf，PowerShell用Get-Content -Encoding Byte | Select -First 3验239 187 191。
必须同时满足三个条件，缺一不可：HTML 文件实际是 UTF-8 编码（无 BOM）、<meta charset="UTF-8"> 在 <head> 开头、HTTP 响应头 Content-Type 声明 charset=utf-8（仅限 http/https 协议）。
怎么确认 HTML 文件真实编码是不是 UTF-8（且无 BOM）
VS Code 右下角显示 “UTF-8” 是理想状态；若显示 “UTF-8 with BOM”，说明文件开头有 EF BB BF 三字节标记，它会干扰 <meta charset> 解析。Linux/macOS 下用 head -c 4 index.html | xxd 查看前 4 字节，出现 ef bb bf 就要删掉。PowerShell 中运行 Get-Content index.html -Encoding Byte | Select -First 3，若输出 239 187 191 同样需清理。改用 VS Code 的 Save with Encoding → UTF-8（注意不选 “with BOM”）即可。
<meta charset="UTF-8"> 必须紧贴 <head> 开始，不能有空格或注释
浏览器只扫描 <head> 开始后最多 1024 字节内的 <meta charset>，任何前置内容都会让它失效：
- 错误写法：
<head>\n <!-- 注释 -->\n <meta charset="UTF-8"> - 错误写法：
<head> <meta charset="UTF-8">（中间有全角空格或 U+200B 零宽空格） - 正确写法：
<head><meta charset="UTF-8">（紧挨着，无换行、无空格、无注释）
用 Chrome F12 打开 Elements 标签页，展开 <head>，确认 <meta charset="UTF-8"> 是第一个子节点。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
为什么本地双击打开（file://）总乱码，而 Live Server 正常
因为 file:// 协议下 HTTP 响应头完全不存在，浏览器只能依赖 <meta charset> 和系统默认编码（Windows 默认 GBK）。此时只要文件不是 UTF-8（无 BOM）+ <meta charset="UTF-8"> 紧贴 <head> 开头，就必然失败。解决办法只有两个：
- 用 VS Code 安装 Live Server 插件，右键选择
Open with Live Server，走http://127.0.0.1:xxxx/协议 - 确保服务器配置了正确的响应头：Nginx 加
charset utf-8;，Apache 加AddDefaultCharset UTF-8，Express 中调用res.set("Content-Type", "text/html; charset=utf-8")
BOM 是最隐蔽的坑——它看不见、删不掉、还让所有努力白费。每次保存 HTML 文件前，务必确认编辑器显示的是 “UTF-8”，不是 “UTF-8 with BOM”。
