必须将置于第一个标签位置，因浏览器仅扫描前1024字节确定编码，延迟声明或前置空格/bom/注释均会导致中文乱码或js语法错误。
必须把 <meta charset="UTF-8"> 放在
浏览器解析 HTML 时，前 1024 字节内如果没看到 <meta charset>，就会按默认编码（如 ISO-8859-1 或 GBK）开始解码，后续再声明也晚了。哪怕只差一个空格、注释或 BOM 前导字节，都可能导致中文变乱码或 JS 报 Uncaught SyntaxError: Invalid or unexpected token。
正确位置是： 开始后**第一个标签**，紧贴 ，不能有换行、空格、注释或 <title></title> 在它前面：
<meta charset="UTF-8"><title>我的页面</title><script src="app.js"></script>
- 别写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 兼容写法，HTML5 不推荐，且部分旧版 IE 解析更不可靠 - 别加斜杠闭合：
<meta charset="UTF-8">是错的，HTML5 规范要求它是自闭合但不带斜杠的 void 元素 - 如果用了构建工具（如 Vite、Webpack），确保模板文件本身也是 UTF-8 无 BOM 编码保存，否则编辑器存出的 BOM 会卡在
<meta>前面
为什么单靠 <meta charset> 有时还不行
HTTP 响应头里的 Content-Type 优先级高于 <meta>。如果服务器返回的是 Content-Type: text/html; charset=GBK，浏览器直接忽略 HTML 里的 <meta charset="UTF-8">。
常见场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 本地双击打开 HTML 文件（
file://协议）：没有 HTTP 头，完全依赖<meta>，所以位置和编码保存方式就特别关键 - Nginx 默认不发 charset，需手动加
charset utf-8;到server或location块里 - Apache 需配置
AddDefaultCharset UTF-8，否则可能 fallback 到ISO-8859-1 - Express 中用
res.send()会自动加charset=utf-8，但用res.write() + res.end()就不会，得手动res.set('Content-Type', 'text/html; charset=utf-8')
<meta charset> 对外部资源也有影响
这个声明不仅管 HTML 自身，还会影响同域下未显式声明编码的 <script></script> 和 <style></style> 的解析。比如：
- 一个 UTF-8 的
main.js被引入，但 HTML 没设<meta charset>，浏览器可能用 GBK 解 JS，导致箭头函数=>或中文注释报错 - CSS 文件里的中文类名或伪元素内容（如
::before { content: "编辑"; }）也会受此影响 -
<script charset="UTF-8"></script>已被 HTML5 废弃，强制指定反而可能被忽略；统一靠 HTML 头部声明 + 文件真实编码即可
验证是否真生效的最快方法
别只看页面显示正常——有些字符（如半宽标点、ASCII 子集）即使编码错也能蒙混过关。真正要确认，得查实际解析所用编码：
- Chrome / Edge：F12 → Network → 刷新 → 点 HTML 请求 → 查 Response Headers 里的
Content-Type字段，同时看 Preview 标签页右下角显示的编码名称 - 如果显示 “ISO-8859-1” 或 “GBK”，说明 HTTP 头覆盖了 meta；如果显示 “UTF-8” 但页面仍有乱码，大概率是文件本身没存成 UTF-8（比如 VS Code 显示“UTF-8”，但保存时选了“UTF-8 with BOM”）
- 用命令行快速检测文件编码：
file -i index.html（Linux/macOS）或chcp+ 手动 hexdump 查 BOM（Windows）
BOM 是最容易被忽略的隐形问题：它不显示、不报错，但会让 <meta charset> 失效。只要不是为兼容古董 IE，一律选 “UTF-8 without BOM” 保存 HTML 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
