必须同时满足三个条件才能稳定显示中文：html文件实际编码为utf-8（无bom）、位于最开头、http响应头content-type声明charset=utf-8；缺一不可，否则浏览器可能 fallback 至 iso-8859-1 或 gbk 导致乱码。
必须同时满足三个条件才能稳定显示中文等非ASCII字符：HTML文件实际编码是UTF-8（无BOM）、<meta charset="UTF-8">在最开头、HTTP响应头Content-Type也声明charset=UTF-8。缺一不可，只做其中一项大概率仍会乱码。
为什么<meta charset="UTF-8">必须放在
浏览器解析HTML时，只扫描前1024字节来查找<meta charset>；如果它被<title></title>、注释、空格或BOM挡在后面，就会失效，退回到默认的ISO-8859-1或系统fallback（比如Windows上是GBK），直接导致中文显示为或乱码。
常见错误写法：
-
<title>首页</title> <meta charset="UTF-8">——<title></title>挡住了 -
<!-- 注释 --><meta charset="UTF-8">—— 注释挡住了 -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 已过时，且不如charset属性可靠
正确顺序只有一种：<meta charset="UTF-8">
<title>首页</title>
如何验证HTML文件实际编码是不是UTF-8（无BOM）
BOM（EF BB BF）是隐藏在文件开头的3个字节，VS Code默认保存为“UTF-8”，但Notepad++/Sublime常默认带BOM；一旦存在，<meta charset>就可能被跳过，JS/CSS引入也会出错（如Uncaught SyntaxError: Invalid or unexpected token）。
验证和修复方法：
- Linux/macOS终端执行：
file -i your.html—— 输出含charset=utf-8且无with BOM字样才算合格 - 检查开头3字节：
head -c 3 your.html | xxd—— 若输出ef bb bf，说明有BOM，需删除 - VS Code：保存时点右下角编码 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM） - Notepad++：菜单栏“编码” → “转为UTF-8无BOM编码” → 再保存
服务器端Content-Type响应头比<meta>优先级更高
当HTTP响应头里明确写了Content-Type: text/html; charset=GBK，哪怕HTML里写了<meta charset="UTF-8">，Chrome/Firefox也会强制按GBK解码——结果就是UTF-8文件被当GBK读，每个汉字变两三个乱码。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见配置位置：
- Nginx：
charset utf-8;放在http、server或location块中（注意不是charset UTF-8;，小写才有效） - Apache：
AddDefaultCharset UTF-8加到.htaccess或httpd.conf，避免写GBK残留 - Node.js/Express：
res.set('Content-Type', 'text/html; charset=utf-8')或直接用res.send()（它默认带utf-8） - PHP：
header('Content-Type: text/html; charset=utf-8');必须在任何输出之前调用
调试时打开Chrome开发者工具 → Network → 点开HTML请求 → 查看Response Headers里的Content-Type值，这是最终生效的依据。
JS/CSS外部文件也要统一UTF-8（无BOM）
<script src="a.js"></script>和<link rel="stylesheet" href="style.css">的charset由HTML页面决定，不支持单独声明（charset="UTF-8"在HTML5中已废弃）。所以只要HTML本身编码、meta、响应头三者一致，外部JS/CSS文件就必须也是UTF-8（无BOM），否则里面的中文注释、字符串、CSS字体名（如font-family: "微软雅黑"）都会出问题。
特别注意：
- VS Code编辑JS/CSS时，右下角编码显示必须是
UTF-8，不是GBK或ISO-8859-1 - 用
file -i逐个检查JS/CSS文件，确保全部是charset=utf-8 - 不要依赖
<script charset=""></script>或<link charset="">，它们在现代浏览器中基本无效
最容易被忽略的是：你改好了HTML，却忘了检查配套的JS和CSS文件是否也存成了UTF-8（无BOM）——它们任何一个出错，都可能让整个页面中文显示崩溃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
