必须置于最前面，因浏览器仅解析前1024字节定位该标签；若缺失、错位或文件实际编码不匹配（如存为GBK却声明UTF-8），或HTTP响应头Content-Type覆盖声明，均会导致中文显示为问号。
页面显示问号，90% 是 meta charset 缺失、错位或与文件实际编码不一致导致的，不是字体或 CSS 问题。
为什么 meta charset="UTF-8" 必须放在
浏览器解析 HTML 时，前 1024 字节内若没遇到 meta charset，就会按系统默认编码（Windows 是 GBK，Linux/macOS 多是 UTF-8）解码——一旦开头几个字节是中文 GBK 字节流，却被当 UTF-8 解，立刻出现 问号或乱码。
常见错误现象：
-
meta charset前面，标题里的中文变成问号 -
<script></script>或出现在meta前，JS/CSS 路径含中文时加载失败 - 注释
或空行挡在meta前，IE 等老浏览器直接忽略
正确位置只有一处： 开始后、任何其他标签（包括 <script></script>、注释）之前。
文件保存编码必须和 meta charset 值严格一致
meta charset="UTF-8" 只是“告诉浏览器怎么读”，如果文件本身是 GBK 编码存的，浏览器硬用 UTF-8 去读，每个中文都会解成两三个乱码字符，最终显示为 。
实操要点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- VS Code：保存时点右下角编码 → “Save with Encoding” → 选
UTF-8（**不要选 “UTF-8 with BOM”**，BOM 会卡在文件头，干扰 JS/CSS 加载） - Notepad++：编码 → “Convert to UTF-8 without BOM” → 再保存
- Sublime Text：File → Save with Encoding → UTF-8
- Linux/macOS 验证：终端运行
file -i your.html，输出应含charset=utf-8；或head -c 3 your.html | xxd，结果不该是ef bb bf（那是 BOM）
HTTP 响应头 Content-Type 优先级高于 meta
通过 HTTP 访问（如 http://localhost:8080/index.html）时，服务器返回的响应头里若有 Content-Type: text/html; charset=gbk，浏览器会无视 meta charset，直接用 GBK 解——哪怕你写了十遍 UTF-8 也没用。
检查与修复：
- Chrome DevTools → Network → 刷新页面 → 点 HTML 文件 → Response Headers → 查看
content-type字段值 - Nginx：在
server或location块加charset utf-8; - Apache：在
.htaccess或配置中加AddDefaultCharset UTF-8 - Node.js/Express：响应前加
res.set('Content-Type', 'text/html; charset=utf-8')，或用res.sendFile()（它自动设 header） - 静态文件直开
file://协议时，HTTP 头不存在，此时meta是唯一依据，务必确保它存在且位置正确
容易被忽略的坑：BOM 和大小写
BOM（Byte Order Mark）是 UTF-8 文件开头的隐形三字节 EF BB BF，看似无害，实则致命：
- 它会让
<script></script>第一行报Uncaught SyntaxError: Invalid or unexpected token - PHP/Node 输出 HTML 前若含 BOM，会导致
header()或res.set()失败（因已输出内容） -
meta charset的值必须是"UTF-8"（连字符 + 大写 U、T、F）——"utf8"、"utf_8"、"Unicode"全部无效
真正起效的只有三件事：文件存为 UTF-8 no BOM、 在 最顶上、HTTP 响应头不覆盖它。少一个，问号就回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
