必须置于最前面，因为浏览器仅扫描前1024字节查找该声明；若被注释、bom、空行或等标签阻隔，将fallback至系统默认编码（如gbk/iso-8859-1），导致中文乱码或js语法错误。
meta charset 不是为“表格”单独设置的，而是为整个 HTML 文档设置字符编码。表格里的中文乱码，根本原因从来不是 <table> 写错了，而是文档整体没声明或声明错、文件实际编码与声明不匹配。<h3>为什么 <code>meta charset="UTF-8" 必须放在 最前面？
浏览器解析 HTML 时，只扫描前 1024 字节找 meta charset。如果它被卡在 <title></title> 后面、夹在注释里、或者前面有 BOM（EF BB BF）或空行，就可能找不到——然后 fallback 到系统默认编码（Windows 常为 GBK，macOS/Linux 常为 ISO-8859-1），导致 <td>你好</td> 显示成 “浣犲ソ” 或直接报 JS 错误 Uncaught SyntaxError: Invalid or unexpected token。
-
<meta charset="UTF-8"> <title>表格页</title>✅ 正确位置 -
<title>表格页</title> <meta charset="UTF-8">❌ 太晚，可能失效 -
<!-- 注释 --><meta charset="UTF-8">❌ 注释不算空，但若注释过长可能挤出 1024 字节范围
charset 的值写成 "utf-8"、"UTF8" 还是 "UTF-8"？
HTML5 规范明确要求写 "UTF-8"（全大写 U/T/F/-/8，中间短横不可省，末尾数字 8 不可缺）。虽然 "utf-8" 在 Chrome/Firefox 里通常能识别，但部分环境（如某些 WebView、CI 工具 html-validate）会警告或拒绝：
-
charset="UTF-8"✅ 规范写法，兼容性最稳 -
charset="utf-8"⚠️ 小写，W3C 验证器会告警，Node.js 模板引擎可能转义异常 -
charset="UTF8"❌ 缺短横，Android WebView 等可能完全不识别，fallback 到 GBK -
charset=UTF-8✅ 允许不加引号（HTML5 合法），但易被编辑器误删空格，建议保留引号
文件实际编码和 meta charset 不一致怎么办？
这是中文乱码最常踩的坑：代码里写了 <meta charset="UTF-8">，但文件本身是 GBK 编码保存的。浏览器按 UTF-8 解码 GBK 字节，必然错乱。验证和修复步骤很直接：
- 用 VS Code 打开文件 → 右下角看编码显示（如 “GBK”）→ 点击它 → 选 “Reopen with Encoding” → 选 GBK → 如果中文正常了，说明文件真是 GBK
- 再点右下角 → “Save with Encoding” → 选 “UTF-8”（**务必取消勾选 “with BOM”**，BOM 会导致 IE/旧 WebView 误判）
- Linux/macOS 下可用命令验证：
file -i index.html看 MIME 类型；xxd -l 3 index.html看开头三字节是否为ef bb bf（BOM） - 如果用 Express/Nginx/Apache 发布，还要同步设置 HTTP 响应头：
Content-Type: text/html; charset=UTF-8，否则file://能好，线上反而乱
真正要盯死的只有三点：文件存盘是 UTF-8（无 BOM）、meta charset="UTF-8" 是 第一个子节点、HTTP 响应头 charset 与之严格一致。其余所有“表格乱码”的排查，都是在这三者之间来回确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
