HTML中文乱码需统一编码声明、正确文件保存及服务端响应头协同：HTTP响应头Content-Type优先级高于<meta charset>，必须确保三者均为UTF-8且无BOM；<meta charset="UTF-8">须置于<head>内首位置，编辑器保存时须选UTF-8（不带BOM），并验证各环节编码一致。
HTML前端中文乱码不是靠“解码”修复的，而是靠**统一编码声明 + 正确文件保存 + 服务端响应头协同**。浏览器不会主动“解码”乱码内容——它只是按它认为正确的编码去读取字节流。一旦错配，就不可逆地变成或问号。
检查 Content-Type 响应头是否覆盖了 <meta charset>
HTTP 响应头里的 Content-Type 优先级高于 HTML 中的 <meta charset="UTF-8">。如果服务器返回的是 text/html; charset=gbk 或没带 charset（默认 fallback 为 iso-8859-1），哪怕你写了 <meta charset="UTF-8">，浏览器也大概率忽略它。
- 用浏览器 DevTools 的 Network → HTML 请求 → Headers → Response Headers 查看
Content-Type值 - Nginx 需显式加：
add_header Content-Type "text/html; charset=utf-8";（注意：不能只写charset utf-8;，那仅对静态资源生效） - Apache 需在
.htaccess或配置中加：AddDefaultCharset UTF-8 - Node.js/Express 必须在
res.send()前调用：res.set("Content-Type", "text/html; charset=utf-8") - PHP 必须在任何输出前调用：
header("Content-Type: text/html; charset=utf-8");，且文件不能含 BOM
<meta charset> 写错位置或格式就失效
<meta charset="UTF-8"> 必须是 <head> 内第一个可解析标签（前面只能有空白、注释或 BOM），且必须出现在 <title>、<script> 等任何可能触发解析的标签之前。浏览器只扫描前 1024 字节，超了就找不到。
- ✅ 正确位置：
<head> <meta charset="UTF-8"> <title>首页</title> </head>
- ❌ 错误示例：
<meta charset="utf8">（少横线）、<meta charset="UTF8">（大小写不规范）、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 已不推荐） - ⚠️ 注释或空行不算“干扰”，但
<script>标签提前出现会中断扫描
文件实际编码 ≠ 编辑器显示编码
VS Code 显示 “UTF-8”，不代表文件真是 UTF-8。Windows 上很多编辑器默认存为 UTF-8 with BOM，而 BOM（EF BB BF）若出现在 <meta charset> 之前，某些旧环境（如 PHP + BOM）会导致 header 发送失败；若出现在之后，则可能让浏览器跳过 meta 扫描。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Linux/macOS 检查：
file -i index.html（输出含charset=utf-8）或head -c 4 index.html | xxd（确认无ef bb bf） - Windows PowerShell 检查：
Get-Content index.html -Encoding Byte | Select -First 3 - VS Code 保存时选
Save with Encoding → UTF-8（不带 BOM），而非UTF-8 with BOM - Sublime Text / Notepad++ 同理：关闭 BOM 选项再保存
动态模板（Thymeleaf、EJS、Jinja）要额外设编码
模板引擎渲染时若未指定输出编码，可能把 UTF-8 字节当 Latin-1 输出，导致双乱码。这不是前端能修的，后端必须干预。
- Thymeleaf（Spring Boot）：
spring.thymeleaf.cache=false+ 在配置类中设置：templateResolver.setCharacterEncoding("UTF-8") - Tomcat：
server.xml中 Connector 加URIEncoding="UTF-8" useBodyEncodingForURI="true" - Java Servlet：
request.setCharacterEncoding("UTF-8")和response.setCharacterEncoding("UTF-8")必须在获取参数或写响应前调用 - 数据库连接 URL 补全：
?useUnicode=true&characterEncoding=UTF-8（MySQL）
最易被忽略的一点：所有环节——文件保存、模板渲染、HTTP 响应头、数据库连接、甚至 JS/CSS 外部文件——必须全部锁定 UTF-8。漏掉任意一环，比如 CSS 文件本身是 GBK 编码，@import 进来就会污染整个页面解析上下文。
