html乱码必须三处统一为utf-8：文件真实编码（无bom）、紧贴开头且大小写准确、http响应头content-type含charset=utf-8；任一缺失即退至系统默认编码（如gbk）导致乱码。
直接看三处是否都指向 UTF-8，缺一不可；只靠 <meta charset="UTF-8"> 是最弱 fallback，极易失效。
检查 HTML 文件实际编码格式
编辑器显示的“UTF-8”只是当前打开方式，不等于文件真实编码。真实编码由文件开头字节决定：
- VS Code：右下角点击编码名 → 选
Reopen with Encoding→ 依次试UTF-8、GBK、ISO-8859-1，看中文是否正常显示 - 终端命令（macOS/Linux）：
file -i index.html或head -c 3 index.html | xxd，输出含ef bb bf表示带 BOM 的 UTF-8 - PowerShell（Windows）：
Get-Content index.html -Encoding Byte | Select -First 3，若输出239 187 191就是 UTF-8 BOM - Notepad++：菜单栏「编码」→ 查看当前编码类型，注意别选
UTF-8-BOM（BOM 会干扰某些服务端解析）
验证 <meta charset> 是否生效且位置正确
这个标签必须在 开始后 1024 字节内被识别，任何前置内容（BOM、注释、空格、<title></title>）都可能导致它被跳过：
- 检查位置：
<meta charset="UTF-8"> <title></title>中间不能有换行、空格或注释 - 禁止写法：
<meta charset="utf8">、<meta charset="UTF8">、<meta charset="utf_8">—— 只有"UTF-8"是 HTML5 标准值 - 别用旧式写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它在现代浏览器中优先级低于<meta charset> - 用 Chrome DevTools → Network → 刷页面 → 点 HTML 请求 → Headers → Response → 查看
<meta>是否在前 1024 字节内被解析到
确认 HTTP 响应头中的 Content-Type 设置
服务端发送的 Content-Type: text/html; charset=xxx 优先级高于 <meta>，一旦冲突，浏览器以响应头为准：
- Nginx：检查
nginx.conf或站点配置，在http/server/location块中是否有charset utf-8;（注意小写、分号） - Apache：检查
.htaccess或httpd.conf，确认是AddDefaultCharset UTF-8（大写 UTF-8），而非AddDefaultCharset GBK - Express（Node.js）：确保
res.set('Content-Type', 'text/html; charset=UTF-8')在res.send()或res.sendFile()之前调用 - Tomcat：检查
server.xml中<connector></connector>的URIEncoding="UTF-8"和useBodyEncodingForURI="true"
排查外部资源（JS/CSS）和运行时影响
即使 HTML 本身编码正确，引入的 JS 或 CSS 若不是 UTF-8，也可能污染 document.charset 或导致控制台乱码：
-
<script src="app.js"></script>和<link rel="stylesheet" href="style.css">对应文件也必须保存为 UTF-8（无 BOM） - 浏览器控制台执行
document.characterSet或document.inputEncoding，返回值应为"UTF-8" - JS 中硬编码中文（如
console.log("你好")）若显示为 ，说明脚本文件本身编码错误，不是 HTML 设置问题 - Emoji、中文路径、URL 参数等在 UTF-8 下才能安全传输；若出现
%E4%BD%A0%E5%A5%BD解码失败，大概率是某层未统一为 UTF-8
最容易被忽略的是：HTML 文件保存为 UTF-8（无 BOM），<meta charset="UTF-8"> 紧贴 开始，HTTP 响应头也声明 UTF-8 —— 这三者必须同时成立。任一环节掉链子，浏览器就会退回到系统默认编码（如 Windows 上的 GBK），中文立刻变方块或问号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
