根本原因是UTF-8编码链断裂：HTML文件实际编码非UTF-8、存在干扰BOM，或HTTP响应头Content-Type指定其他charset（如GBK），三者必须严格一致且位于最开头，缺一不可。

为什么写对了，emoji还是显示为方块或乱码？

根本原因不是没写 meta，而是 UTF-8 编码链断在了某一处：HTML 文件本身不是 UTF-8（比如存成了 GBK），或者文件带了 BOM 但浏览器/WebView 拒绝解析，又或者 HTTP 响应头里的 Content-Type 强制指定了别的编码（如 charset=GBK）。三者只要一个不匹配，emoji 就会崩。

必须同时满足的三个条件

支持 emoji 的 UTF-8 不是“写了 meta 就完事”，它要求：

• meta charset="UTF-8" 必须出现在 最开头（ 之前），且不能被注释、空行或 BOM 挡住
• HTML 文件实际保存为 UTF-8 编码 —— VS Code 里选 Save with Encoding → UTF-8，**不要选 “UTF-8 with BOM”**（BOM 会干扰某些 WebView 和旧版 Safari）
• HTTP 响应头中 Content-Type 必须包含 charset=UTF-8，且不能和 meta 冲突；如果服务端返回了 charset=GBK，meta 直接失效

检查与验证方法

别猜，直接查实锤：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 用命令行看文件真实编码：file -i index.html（Linux/macOS）或 Get-Content index.html -Encoding Byte | Select -First 3（PowerShell），确认输出不含 ef bb bf（即无 BOM）
• 打开 Chrome DevTools → Network → 点开 HTML 请求 → Headers → Response Headers，找 Content-Type 字段，值必须是 text/html; charset=UTF-8
• 在控制台运行 document.characterSet，返回值必须是 "UTF-8"；再试 console.log("?")，如果报 Invalid or unexpected token，说明 JS 文件本身也不是 UTF-8

容易被忽略的连带坑

emoji 是个“放大镜”，一照就暴露整个编码链的问题：

• 外部 <script></script> 或 文件如果本身是 GBK 或 ISO-8859-1 编码，哪怕 HTML 正确，JS 里的字符串（如 alert("提交成功✅")）也会触发语法错误
• lang 属性不影响编码，但 能帮屏幕阅读器和搜索引擎更好理解内容，建议加上
• 写 charset=utf8 或 charset=UTF_8 是无效的 —— 只有 "UTF-8"（大写 U/T/F，带短横，双引号可省略但值必须严格匹配）被 HTML5 规范认可

实际生效的关键不在“怎么写”，而在“三个地方是否完全一致”。少验一个，emoji 就可能变成 。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！