meta charset="UTF-8" 必须是<head>第一个子节点且文件为无BOM UTF-8编码，否则浏览器将回退至GBK等默认编码导致中文显示为问号或方块。
直接说结论：meta charset="UTF-8" 必须写在 <head> 开头、**前面不能有任何字符**，且 HTML 文件本身必须是无 BOM 的 UTF-8 编码；否则浏览器大概率 fallback 到系统默认编码（Windows 是 GBK），中文就变成问号或方块。
为什么 meta charset="UTF-8" 写了还是出问号
浏览器只扫描 HTML 前 1024 字节找 charset 声明，一旦被干扰就直接放弃，退回到系统默认编码读取后续字节——这就是问号的来源。
- 常见干扰源：文件开头有 BOM（
EF BB BF）、<!-- 注释 -->、空行、空格、<!DOCTYPE html>前的不可见 Unicode 字符（比如U+200B零宽空格） -
<head>标签本身不算干扰，但<meta charset="UTF-8">必须是<head>的第一个子节点，不能裹在注释里，也不能换行缩进后前面留空格 - 写成
<meta charset="utf8">或<meta charset="UTF8">也无效——只有"UTF-8"（大小写+连字符）是标准值
如何验证 HTML 文件真实编码是否为无 BOM 的 UTF-8
编辑器右下角显示 “UTF-8” 不代表文件就是 UTF-8；它只是当前打开方式。真正要查的是文件磁盘上的原始字节。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Linux/macOS：
head -c 4 index.html | xxd—— 输出ef bb bf表示带 BOM；正常应以3c 68 74 6d（即<htm）开头 - PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3—— 若输出239 187 191，就是 BOM - VS Code：按
Ctrl+Shift+P→ 输入Change File Encoding→ 选Save with Encoding→ **明确选UTF-8（不是UTF-8 with BOM）**
本地双击打开（file://）时特别容易出问号
HTTP 响应头完全失效，此时 meta charset 是唯一救命稻草。任何偏差都会导致失败。
立即学习“前端免费学习笔记（深入）”；
- 确保没有服务端参与（比如没用 Live Server），就纯双击 HTML 文件
- 检查 DevTools → Elements → 展开
<head>，确认<meta charset="UTF-8">是第一个子节点，前面无文本、无注释、无空行 - 如果用了模板引擎（EJS、Thymeleaf 等），确认生成后的 HTML 源码里它真在最前——动态插入可能把它推到后面
- 外部 JS/CSS 文件也必须是 UTF-8 编码，否则即使 HTML 正确，引入的脚本里中文也会变问号
最容易被忽略的一点：BOM 不是“看不见就等于不存在”，它是实实在在的 3 字节前缀，会卡死 meta charset 解析逻辑。很多编辑器默认存带 BOM，而开发者只看状态栏不验证字节，问题就卡在这三字节上。
