<meta charset="UTF-8">必须置于<head>最开头、<title>之前，否则浏览器按默认编码解析非ASCII字符导致乱码；需确保文件保存编码、HTTP响应头charset与该标签三者一致且写法规范。
<meta charset="UTF-8"> 必须写在 <head> 最开头，紧贴 <head> 标签，且必须在 <title> 之前；否则浏览器可能已开始解析内容，导致中文、emoji 或其他非 ASCII 字符显示为乱码。
为什么 <meta charset> 要放在 <head> 最前面
浏览器从上到下解析 HTML，一旦遇到非 ASCII 字符（比如中文、符号、emoji），而此时还没读到 <meta charset="UTF-8">，就会按默认编码（如 Windows-1252 或 ISO-8859-1）尝试解码，结果就是 、 或空白——这个过程不可逆，后续再声明也救不回来。
- 它不是“建议”，而是浏览器解析 HTML 的“开关”：决定接下来每个字节怎么映射成字符
- 放在
<title>后面？<title>里的中文可能已经乱码了 - 前面有注释、
<script>或空行？都算延迟，有些旧版 IE 会直接忽略该<meta> - 实际验证方法：打开 DevTools → Elements 面板，确认
<meta charset="UTF-8">是<head>下第一个子节点
文件保存编码必须和 charset 声明一致
声明 UTF-8 却用 GBK 编码保存文件，等于告诉浏览器“请用钥匙 A 开锁”，但给的其实是锁芯 B —— 浏览器照做，结果还是打不开。
- VS Code：右下角点击编码名称（如 “GBK”），选 “Save with Encoding” → “UTF-8”（不要选 “UTF-8 with BOM”）
- Notepad++：菜单栏“编码” → “转为 UTF-8 无 BOM 格式” → 再保存
- Sublime Text：“File” → “Save with Encoding” → “UTF-8”
- 验证方式：用 hex editor 查看文件开头，纯 UTF-8 应无
EF BB BF（BOM）；有则可能被某些工具误判
HTTP 响应头中的 charset 优先级更高
如果服务器返回的 HTTP 响应头里带了 Content-Type: text/html; charset=GBK，那浏览器会直接无视 <meta charset>，哪怕你写的是 UTF-8。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Network → 点开 HTML 请求 → Headers → Response Headers → 查
Content-Type字段 - Apache：在
.htaccess中加AddDefaultCharset UTF-8或Header set Content-Type "text/html; charset=UTF-8" - Nginx：在
server或location块中加charset utf-8; - Node.js（Express）：
res.setHeader('Content-Type', 'text/html; charset=UTF-8')
<meta charset> 的写法细节不能错
HTML5 只认一种写法：<meta charset="UTF-8">。任何变体都可能失效或触发兼容模式。
- ❌
<meta charset="utf8">（少横线）、<meta charset="utf-8 "/>（尾部空格）、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（老写法，已不推荐） - ✅ 必须小写
charset，引号用英文双引号，值推荐大写UTF-8（虽然utf-8多数浏览器也认，但规范明确要求大小写不敏感，统一写法更稳） - ✅ 不要自闭合：
<meta charset="UTF-8"/>在 HTML5 中是无效语法，部分解析器会忽略 - ✅ 不要写在
<body>里，也不要在<head>外——它只在<head>内生效
最容易被忽略的其实是三者同步：文件物理编码、HTTP 响应头、<meta charset> 标签，缺一不可。其中任意一个掉链子，乱码就可能出现，而且往往只在特定浏览器或部署环境下暴露——本地测试正常，上线后出问题，多半栽在这儿。
