必须紧贴开头，因浏览器仅扫描前1024字节查找该标签，若前面存在bom、注释、空格或等非ascii内容，将导致解析失败而回退至iso-8859-1或gbk等默认编码，引发乱码或脚本错误。
HTML字符显示故障，90% 由 meta charset 缺失或位置错误引发，而非浏览器或系统问题。
为什么 <meta charset="UTF-8"> 必须放在
浏览器解析 HTML 时，一旦读到非 ASCII 字节（比如中文、emoji），会立刻根据当前已知的编码规则解码。如果 <meta charset="UTF-8"> 写在 <script></script> 或 <style></style> 后面，前面那段 JS/CSS 里的中文注释或字符串可能已被按默认编码（如 ISO-8859-1 或 GBK）错误解析，导致乱码甚至脚本中断。
- 必须紧贴
开始，且在任何外部资源（<link>、<script></script>）之前 - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 兼容写法，但现代浏览器优先识别charset属性 - 值必须是
UTF-8（全大写、连字符、无空格），utf8、utf-8、UTF8均不被标准认可
如何确认 HTML 文件本身确实是 UTF-8 编码？
编辑器显示“UTF-8”不代表文件就是 UTF-8 —— 很多编辑器（尤其是 Windows 记事本）会把 ANSI（实际为 GBK）文件误标为 UTF-8，保存时也不提示。真实编码需靠字节判断。
- Linux/macOS 下执行：
file -i your.html，输出含charset=utf-8才可信 - 检查 BOM：执行
head -c 3 your.html | xxd，若输出ef bb bf表示有 UTF-8-BOM；无则为无 BOM UTF-8（更推荐） - VS Code 中右下角状态栏点击编码名 → 选 “Save with Encoding” → 明确选 “UTF-8”（不是 “UTF-8 with BOM”）
- 若用 Python 生成 HTML，
open(..., "w", encoding="utf-8")是必须的；漏掉encoding参数会按系统 locale（Windows 上常为 cp936/GBK）写入
HTTP 响应头中的 Content-Type 与 meta charset 冲突怎么办？
当服务器返回的响应头里 Content-Type: text/html; charset=gbk，而 HTML 里又写了 <meta charset="UTF-8">，浏览器会以响应头为准 —— 此时 meta 完全失效，页面必然乱码。
- Chrome DevTools → Network → 点开 HTML 请求 → Headers → Response Headers → 查
Content-Type - Nginx 配置中删掉
charset gbk;，改为charset utf-8;（注意写在http、server或location块内） - Apache 中检查
.htaccess或httpd.conf是否有AddDefaultCharset GBK，应改为AddDefaultCharset UTF-8或直接删除 - PHP 脚本开头加
header('Content-Type: text/html; charset=UTF-8');，且确保它在任何echo或空白输出前执行
从 Word/Notion 导出的 HTML 为何总带 Unicode 空格乱码？
这类工具常插入 U+2000–U+200F 范围的“固定宽度空格”，而老旧渲染引擎或 CSS font-family fallback 链不支持，就显示为小方块或问号。
- 用 VS Code 打开 HTML → Ctrl+Shift+P → 输入 “Toggle Render Whitespace” → 可见所有不可见空格字符
- 正则替换清除（谨慎）：
[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]→ 替换为空格或删掉 - 避免依赖这些空格：CSS 中用
margin、padding或letter-spacing控制间距更可靠 - 若必须保留，确保
font-family指定支持 Unicode 的字体，如"Segoe UI", "Microsoft YaHei", sans-serif
最易被忽略的一点：数据库字段级编码。即使整个 MySQL 表设为 utf8mb4，某个 title 列仍可能是 latin1 —— 这种隐性不一致会让 PHP/Python 读出的字符串从源头就是乱码，再怎么设 meta 和响应头都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
