必须将置于最开头，紧贴标签，因其需在浏览器解析前1024字节内被识别，否则将回退至系统默认编码（如windows的gbk），导致中文、emoji乱码或js语法错误。
直接结论：用 <meta charset="UTF-8">，且必须放在 最开头，紧贴 标签，前面不能有任何其他标签、注释或空行。
为什么 <meta charset="UTF-8"> 必须在
浏览器解析 HTML 时，只读取文件开头约 1024 字节就决定初始编码。如果这范围内没看到 <meta charset="UTF-8">，就会 fallback 到系统默认（Windows 是 GBK，Linux/macOS 常是 ISO-8859-1），中文、emoji 等立刻乱码或截断。
常见错误现象：
-
<title>我的页面</title> <meta charset="UTF-8">——<title></title>已触发解析，meta失效 -
<!-- 注释 --><meta charset="UTF-8">—— 注释占了前段字节，部分旧浏览器不识别 -
<script></script><meta charset="UTF-8">—— JS 标签提前启动解析，meta被忽略
charset 的值大小写和拼写有严格要求吗？
HTML5 规范只认 "UTF-8"（全大写 U/T/F，带连字符，数字 8）。
这些写法都不可靠：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
charset="utf8"—— 缺连字符，IE 和部分嵌入式浏览器不识别 -
charset="utf-8"—— 小写 u，Chrome/Firefox 可能容忍，但 Safari/Edge 有兼容风险 -
charset="UTF8"—— 缺连字符，IE 直接失效 -
charset="unicode"—— 完全无效，无任何浏览器支持
别图省事，老老实实写 <meta charset="UTF-8">。
光写 meta 不够，还得配三件事
<meta charset="UTF-8"> 只是“告诉浏览器怎么解码”，它不改变文件实际内容。下面三件事缺一不可：
- 源文件本身得是 UTF-8 编码：VS Code 保存时选 “Save with Encoding → UTF-8”（不是 “UTF-8 with BOM”，BOM 在现代环境反而易引发异常）
-
HTTP 响应头优先级更高：如果服务器返回
Content-Type: text/html; charset=GBK，哪怕 HTML 里写了UTF-8，浏览器也按 GBK 解析 —— Nginx 配charset utf-8;，Apache 配AddDefaultCharset UTF-8 -
DOCTYPE 必须是 HTML5：写
即可；别用 XHTML DTD（如 <code>public "-//W3C//DTD XHTML 1.0 Strict//EN"），某些 IE 模式下会降级处理meta charset
怎么快速验证是否真生效？
别只看页面显示正常 —— 很多乱码在输入框、URL、JS 字符串里才暴露。
打开 DevTools → Network → 刷新页面 → 找 HTML 请求 → 看 Response Headers 里的 Content-Type 是否含 charset=UTF-8；再点 Preview 标签页，确认中文、emoji 显示无扭曲；最后在 Console 里执行 document.characterSet，返回值必须是 "UTF-8"。
特别注意：file:// 协议下 HTTP 头为空，此时完全依赖 meta 和文件实际编码，最容易翻车 —— 开发阶段务必走本地 server（如 VS Code Live Server）测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
