必须置于内且紧邻开头、位于之前，文件本身须为utf-8无bom编码；三者缺一不可，否则中文、emoji或js将乱码或报invalid or unexpected token。
直接写 <meta charset="UTF-8">，放在 里、<title></title> 前面，且文件本身必须存为 UTF-8 编码（不含 BOM 更稳妥）——三者缺一不可，否则中文、emoji 或 JS 就会报错。
为什么 <meta charset="UTF-8"> 必须紧挨
浏览器解析 HTML 时，只扫描前 1024 字节找这个标签；一旦遇到非 ASCII 字符（比如中文 <title>我的页面</title> 或 emoji），就会中断扫描， fallback 到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），接着就乱码或报 Invalid or unexpected token。
- ✅ 正确位置：
<meta charset="UTF-8"> <title>...</title> - ❌ 错误位置：
<title>...</title>后再写<meta charset>，或前面有注释、空格、BOM - ⚠️ 注意：VS Code 默认保存为 UTF-8 with BOM，但 BOM（
EF BB BF）会占用开头 3 字节，挤占扫描空间，建议关掉 BOM
怎么确认文件真是 UTF-8 编码？
编辑器显示“UTF-8”不等于文件就是 UTF-8 —— 很多初学者用 Word 粘贴后另存为 HTML，实际是 GBK 编码，<meta charset> 完全无效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- VS Code：右下角点击编码名称 → 选
Reopen with Encoding→ 试选GBK，如果中文变乱码，说明原文件确实是 GBK；再选Save with Encoding→UTF-8（不要勾选 “with BOM”） - Notepad++：菜单栏「编码」→「转为 UTF-8 编码」（不是「UTF-8-BOM」）
- Linux/macOS 终端：
file -i your.html应返回charset=utf-8；head -c 4 your.html | xxd不应看到ef bb bf
charset="utf8" 和 charset="UTF-8" 有区别吗？
有。IANA 注册的标准值只有 UTF-8（带连字符、大写 U、T、F，数字 8）；utf8、UTF8、utf_8 都不合法，部分环境（如某些 WebView、jsdom）会忽略或报 warning。
- ✅ 只用：
<meta charset="UTF-8"> - ❌ 别写：
<meta charset="utf8">、<meta charset="UTF8">、<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 已废弃这种写法） - ⚠️ 注意：
<meta charset>只能出现一次，重复写不会叠加，反而可能干扰解析
最常被忽略的其实是文件编码和 meta 标签的配合——很多人反复改 <meta> 却不检查文件本身是不是真 UTF-8，结果调半天发现只是编辑器没存对。动手前先用 file -i 或 VS Code 的编码切换功能验证一遍，比瞎试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
