页面中文显示问号是因utf-8文件被误用gbk/iso-8859-1等编码读取或内容已损坏；无法修复已丢失字节，必须确保文件保存编码、http响应头、html声明三者一致且无bom。
页面出现中文显示为问号（）或方框，基本是 UTF-8 文件被按 GBK/ISO-8859-1 等编码读取，或内容本身已损坏；仅靠 <meta charset> 无法修复已丢失的字节，必须先确保文件保存编码、HTTP 响应头、HTML 声明三者一致且无 BOM。
为什么 <meta charset="utf-8"> 对问号无效
问号（）代表浏览器尝试解码时遇到无法映射的字节序列——这些字节在当前解码规则下“不合法”，于是用替换字符兜底。常见于：
- 文件实际是 GBK 编码，但被当 UTF-8 打开：GBK 的两个字节（如
0xC4, 0xE3）在 UTF-8 中不是合法起始，直接转成 - 数据库或后端输出时未指定编码，UTF-8 内容被强制转成 CP1252 或 ISO-8859-1，再传给前端
-
<meta charset>声明了 UTF-8，但服务器响应头返回Content-Type: text/html; charset=gbk，浏览器优先信响应头 - 文件开头有 BOM（
EF BB BF），但编辑器误判为 ANSI，导致整个文件偏移解析
确认文件真实编码（Linux/macOS/PowerShell）
别信编辑器右下角显示，要看真实字节：
- Linux/macOS：
file -i index.html→ 若输出charset=unknown-8bit或charset=us-ascii，大概率是 GBK；若为charset=utf-8，再查 BOM：head -c 3 index.html | xxd，出现ef bb bf就是 UTF-8-BOM - Windows PowerShell：
Get-Content index.html -Encoding Byte | Select -First 3→ 输出239, 187, 191即含 BOM；若前几字节是中文 GBK 编码（如196, 227），则文件实为 GBK - VS Code 中点击右下角编码名 → 选 “Reopen with Encoding” → 依次试
GBK、UTF-8、ISO-8859-1，哪个能正常显示中文，哪个就是真实编码
三处必须统一：文件保存 + <meta> + HTTP 响应头
任何一处错位，都会让问号重现：
-
文件保存：VS Code 右下角点编码 → “Save with Encoding” → 选
UTF-8（**不是 UTF-8 with BOM**）；Notepad++ → “编码”菜单 → “转为 UTF-8 编码” → 确保状态栏显示 “UTF-8”（不含 BOM） -
<meta charset>位置与写法：必须在开始后**第一个标签**，前面不能有任何空格、BOM、注释或以外的内容；只写 <code><meta charset="utf-8">（小写，无引号外空格，不写UTF8或UTF-8） -
HTTP 响应头：F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 查
Content-Type。若值为text/html; charset=gbk或不含charset，需改服务器配置：Nginx 加charset utf-8;；PHP 顶部加header('Content-Type: text/html; charset=utf-8');（必须在任何输出之前）；Node.js Express 用res.set('Content-Type', 'text/html; charset=utf-8')
后端动态生成时容易漏掉的点
静态 HTML 改完就能好，但 PHP/Python/Node.js 动态吐 HTML 时，乱码常藏在数据流中间：
- PHP 读数据库：连接时要设
SET NAMES utf8mb4，查询前执行；mysqli_set_charset($conn, 'utf8mb4') - Python
open()读模板：必须显式指定encoding='utf-8'，否则 Windows 默认用cp1252读 UTF-8 文件，直接产生 - JS 拼接字符串插入 DOM：如果后端接口返回的 JSON 字段本身是乱码（比如 PHP
json_encode()前没转 UTF-8），前端再怎么设<meta>都没用 - CDN 或代理缓存了旧响应头：清除 CDN 缓存，或临时关掉代理测试
问号一旦出现，说明原始字节已经不可逆损坏；所以排查顺序永远是：先看真实文件编码 → 再看响应头 → 最后核对 <meta> 位置和大小写。BOM 和服务器硬编码 charset 是最常被忽略的两个断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
