浏览器中文显示为方块或问号，主因是content-type响应头缺失charset=utf-8；需确保服务端响应头、静态服务器配置、后端输出、html meta标签、文件存储编码、数据读取及数据库连接等全链路统一utf-8。
浏览器显示中文是方块或问号，Content-Type 缺 charset=utf-8
这是最常见也最容易被忽略的一环。服务端返回 HTML 时，如果响应头里没带 Content-Type: text/html; charset=utf-8，浏览器会按默认编码（比如 GBK 或 ISO-8859-1）去解析 UTF-8 写的页面，立刻变乱码。
实操建议：
- 用浏览器开发者工具（F12 → Network → 点开 HTML 请求 → Headers 标签）检查响应头中
Content-Type是否含charset=utf-8 - 静态文件托管（如 Nginx）需在配置里加：
charset utf-8;，否则即使 HTML 里写了<meta charset="utf-8">也晚了 - Node.js/Express 中用
res.set('Content-Type', 'text/html; charset=utf-8')，别只靠模板引擎自动设 - PHP 输出前加
header('Content-Type: text/html; charset=utf-8');，且必须在任何输出之前调用
<meta charset> 放错位置或被忽略
<meta charset="utf-8"> 必须是 中**第一个**有字符编码声明作用的标签，且必须在任何可能触发页面解析的内容之前（比如注释、空格、<title></title> 之前）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 开头有 BOM（比如 UTF-8 with BOM 的 .html 文件），导致浏览器跳过
<meta>，回退到响应头或默认编码 - 写成
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">—— 这种旧写法在部分老环境仍有效，但现代浏览器优先看charset属性，且它不如响应头可靠 - 放在
里，完全无效
验证方法：把文件用 VS Code 或 Sublime Text 以“UTF-8 无 BOM”格式另存，再确认 <meta charset="utf-8"> 是 中第一行非空非注释内容。
后端读取/拼接 HTML 时用了错误的编码
比如 PHP 用 file_get_contents() 读一个 UTF-8 文件，但文件实际是 GBK 编码；或 Python 用 open(path).read() 没指定 encoding='utf-8'，依赖系统默认编码（Windows 常是 cp936）——结果字符串本身已损坏，后面怎么设 charset 都救不回来。
关键点：
- PHP 中读文件务必用
file_get_contents($path, false, stream_context_create(['http' => ['method' => 'GET', 'header' => 'Accept-Charset: utf-8']]))不够，得确保源文件编码和读取方式匹配；更稳的是用mb_convert_encoding(file_get_contents($path), 'UTF-8', 'GBK')显式转 - Python 3 中
open('a.html').read()默认用系统编码，必须写open('a.html', encoding='utf-8') - 模板引擎（如 Jinja2、EJS）渲染时传入的数据若含非 UTF-8 字符串，会直接污染输出，要提前统一 decode
数据库查出的中文在插入 HTML 前没做编码适配
MySQL 默认通信编码可能是 latin1，即使字段是 utf8mb4，如果连接时没执行 SET NAMES utf8mb4，查出来的中文就会是乱码字节，再塞进 HTML 也白搭。
排查路径：
- 连上 MySQL 后立即执行
SHOW VARIABLES LIKE 'character_set%';，重点看character_set_client、character_set_connection、character_set_results是否全为utf8mb4 - PHP PDO 要在 DSN 中加
;charset=utf8mb4，或连接后执行$pdo->exec("SET NAMES utf8mb4") - Node.js mysql2 驱动需在配置中明确设
charset: 'utf8mb4'，不能只靠数据库全局设置 - 查出来后别用
iconv()或mb_convert_encoding()二次转码——除非你确定原始字节不是 UTF-8，否则越转越糊
<meta> 标签。 
