网页乱码本质是浏览器解码方式与网页实际编码不一致，解决关键在于HTML文件保存编码、<meta charset>声明、HTTP响应头Content-Type三者对齐：一、VS Code中右下角选“Save with Encoding”→UTF-8（非BOM）；二、<meta charset="UTF-8">须置于<head>首位置、唯一、无前置字符；三、F12 Network查Response Headers中Content-Type应为text/html; charset=utf-8，Nginx配charset utf-8;，Node.js用res.set('Content-Type', 'text/html; charset=utf-8')；四、临时可用Chrome-Charset扩展快速切换编码验证。
网页乱码本质是浏览器解码方式和网页实际编码不一致。解决的关键不是“统一设成 UTF-8”，而是让三者对齐：HTML 文件保存的编码、<meta charset> 声明、HTTP 响应头中的 Content-Type。下面分三步讲清楚怎么配。
一、确保 HTML 文件本身用正确编码保存
文件实际内容必须和你声明的编码一致，否则声明再准也白搭。
- 用 VS Code 打开 HTML 文件，右下角查看当前编码（如显示“GBK”或“UTF-8 with BOM”）
- 点击该编码标识 → 选“Save with Encoding” → 明确选择 UTF-8（不是 “UTF-8 with BOM”）
- Notepad++ 用户：菜单栏“编码” → “转为 UTF-8 编码”（避开带 BOM 的选项）
- 命令行验证是否含 BOM：
head -c 4 yourfile.html | xxd，若输出含ef bb bf就要重存
二、正确书写 <meta charset> 标签
这个标签必须位置准、写法严、唯一性高，否则浏览器可能直接忽略。
- 必须放在
<head>内，且是<head>中第一个非空、非注释的子元素 - 只写一种标准形式：
<meta charset="UTF-8">（注意大小写和连字符，禁用 utf8 / UTF8 / utf_8） - 删掉所有重复声明，尤其避免同时存在
<meta http-equiv="Content-Type" ...> - 前面不能有任何字符：包括空格、换行、HTML 注释
<!-- -->、BOM 或不可见 Unicode 符号
三、检查并设置 HTTP 响应头 Content-Type
服务器发来的 Content-Type 优先级高于 HTML 里的 meta，它错了，页面照样乱。
- F12 打开开发者工具 → Network 标签 → 刷新页面 → 找主 HTML 请求（类型为 document）
- 点开它 → Headers → 查 Response Headers 中的
Content-Type - 理想值是：
text/html; charset=utf-8（小写 utf-8，带分号和空格） - Nginx 配置加一行：
charset utf-8;（放在 server 或 location 块内） - Apache 配置加一行：
AddDefaultCharset UTF-8（写在 .htaccess 或 httpd.conf） - Node.js/Express 中响应前加：
res.set('Content-Type', 'text/html; charset=utf-8');
四、临时应急：用 Chrome-Charset 快速切换编码
当无法修改源文件或服务器配置时，这是最直接的补救手段。
- 安装 Chrome-Charset 扩展（Chrome 网上应用店搜名字，或 ID：
oenllhgkiiljibhfagbfogdbchhdchml） - 打开乱码页面，点击扩展图标，它会自动检测当前编码并列出常用选项
- 中文网页常见可试编码：
GBK、GB18030、UTF-8 - 日文试
Shift_JIS，韩文试EUC-KR，俄文试Windows-1251 - 选中后页面自动刷新，生效即说明匹配成功
