必须将<meta charset="UTF-8">置于<head>最前端，紧贴<head>标签且在<title>等任何其他标签之前；否则浏览器在前1024字节内无法识别编码，将按默认编码（如ISO-8859-1或GBK）解析，导致中文、emoji乱码及DOM解析失败。
必须把 <meta charset="UTF-8"> 放在 <head> 开头、任何其他标签（包括 <title>）之前，否则浏览器可能用错误编码解析后续 HTML，直接导致乱码或 DOM 解析失败。
为什么必须放在 <head> 最前面？
浏览器解析 HTML 时，会在读取前 1024 字节内查找 <meta charset>；如果开头有空格、注释、BOM 或其他标签（比如错放的 <title>），它可能来不及识别编码，就按系统默认（如 ISO-8859-1 或 GBK）开始解码——这时候哪怕后面写了正确的 charset，中文、emoji、特殊符号也早就解析错了，DOM 已损坏，无法回滚。
常见错误现象：
- 页面刚打开时闪一下乱码，然后才正常（说明解析中途切换了编码）
-
<title>显示为“й”但正文正常（<title>在meta前，被误解） - JavaScript 报
SyntaxError: Invalid or unexpected token（脚本里含中文或 emoji，被当乱码读）
<meta charset> 的写法细节和坑
看似简单，但大小写、空格、引号、拼写全会影响实效：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 值必须是
"UTF-8"（全大写 U、T、F，数字 8，中间短横，英文双引号）——"utf8"、"utf-8"（小写）、'utf-8'（单引号）都**不保证兼容** - 不能加斜杠闭合：
<meta charset="UTF-8"/>是无效写法，HTML5 不支持自闭合 meta - 不能有空格：
<meta charset = "UTF-8">中等号两侧空格会导致部分旧浏览器忽略该声明 - 不能混用旧写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">在 HTML5 中已过时，且优先级低于charset属性
光写对 meta 还不够：配套动作必须做
<meta charset> 只是“告诉浏览器怎么读”，前提是文件本身确实是 UTF-8 编码。否则就是“说真话，存假数据”：
- 用 VS Code / Notepad++ 打开 HTML 文件，确认右下角显示 “UTF-8” 而非 “GBK”、“ANSI” 或 “UTF-8 with BOM”（BOM 会干扰解析，应选 “UTF-8 without BOM”）
- 保存文件时手动选 “Save with Encoding → UTF-8”（不要依赖自动检测）
- 如果服务端由 Apache/Nginx/Express 提供，建议同步配置 HTTP 响应头：
Content-Type: text/html; charset=UTF-8，作为 fallback（但以meta为准） - 避免在
<head>开头插入任何内容：注释<!-- ... -->、空行、BOM 字节、甚至不可见 Unicode 字符（如 ZWSP）都会破坏检测
最常被忽略的一点：改完 meta 标签后，一定要重新保存文件并**硬刷新（Ctrl+F5 或 Cmd+Shift+R）**——浏览器很可能缓存了旧版本的编码解析结果，仅刷新看不到效果。
