主流浏览器处理中文乱码优先级为：HTTP响应头Content-Type > HTML中<meta charset> > 系统默认编码；必须确保HTML文件本身为UTF-8无BOM编码，且<meta charset="UTF-8">置于<head>开头1024字节内，同时CSS/JS等配套资源也需统一UTF-8无BOM。
主流浏览器（Chrome、Firefox、Edge、Safari）对中文乱码的处理逻辑一致：**优先信任 HTTP 响应头的 Content-Type，其次 fallback 到 HTML 中的 <meta charset>，最后才退到系统默认编码（如 Windows 的 GBK）**。只要这三层中任意一层明确指定 UTF-8 且无冲突，就不会乱码。
必须确保 HTML 文件本身是 UTF-8 编码（不含 BOM）
文件编码错误是 80% 乱码问题的根源。VS Code 显示“GBK”或“ISO-8859-1”，哪怕写了 <meta charset="UTF-8"> 也白搭。
- 在 VS Code 中右下角点击当前编码（如
GBK），选Save with Encoding→UTF-8（**不要选 “UTF-8 with BOM”**） - 用命令行验证：
file -i index.html（Linux/macOS）应输出charset=utf-8；Windows 可用 PowerShell：Get-Content index.html -Encoding Byte | Select -First 3，确认前 3 字节不是ef bb bf - Notepad++ 要点“编码”→“转为 UTF-8 无 BOM 格式”→再保存
<meta charset> 必须放在 <head> 最开头（且不能有空格/注释）
浏览器只扫描 HTML 前 1024 字节找 charset 声明。如果 <meta charset="UTF-8"> 前有 BOM、空行、注释或意外字符，就会被跳过，直接 fallback 到 GBK。
- 正确写法（
<head>后第一行，无空格、无注释）：<head> <meta charset="UTF-8"> <title>中文标题</title>
- 错误写法举例：
<meta charset="utf8">（少横线）、<meta charset="UTF8">（缺连字符）、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 已不推荐） - 绝对不要把
<meta charset>放到<body>里，它完全无效
HTTP 响应头 Content-Type 不能覆盖或冲突
当通过 http:// 或 https:// 访问时，服务器返回的响应头优先级高于 <meta>。如果头里写着 charset=gbk 或压根没声明 charset，浏览器就可能忽略 HTML 里的 meta。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置要加：
charset utf-8;（在http或server块），而不是仅靠add_header Content-Type "text/html; charset=utf-8"（后者可能被重复添加导致语法错误） - Apache 要在
.htaccess或虚拟主机配置里加：AddDefaultCharset UTF-8 - Node.js/Express 发送静态 HTML 时，必须显式设置：
res.set('Content-Type', 'text/html; charset=utf-8')，不能只依赖res.sendFile() - F12 打开 Network 面板，点 HTML 请求 → Headers → Response Headers，确认
Content-Type值包含charset=utf-8
最容易被忽略的是 CSS/JS 文件自身编码——它们不继承 HTML 的 <meta>。如果 style.css 是 GBK 编码，里面写了 content: "按钮";，Chrome 也会显示乱码。所有配套资源（CSS、JS、字体文件、图片 alt 文字）都得统一为 UTF-8 无 BOM。
