必须紧贴开头，是其内第一个非空白、非注释子元素，因浏览器仅扫描前1024字节查找该声明，若被bom、空格、注释或阻挡即失效，回退至系统默认编码（如windows下gbk）导致中文乱码；文件须为utf-8无bom编码，且http响应头content-type中charset=utf-8优先级更高，三者缺一不可。
meta charset 必须放在 最前面
浏览器解析 HTML 时，会在前 1024 字节内查找 charset 声明；如果 <meta charset="UTF-8"> 被注释、空格、BOM 或其他标签（比如 <title></title>、<script></script>）挡在后面，它就失效。表格里中文显示为方块或问号，往往就是这个原因。
常见错误写法：
-
<title>用户列表</title> <meta charset="UTF-8">——<title></title>在前，<meta>失效 -
<!-- 页面头 --><meta charset="UTF-8">—— 注释在前，浏览器跳过 -
<meta charset="utf8">或<meta charset="utf-8">—— 非标准值，W3C 校验报错，部分 WebView 不识别
正确写法只有一种：<meta charset="UTF-8">，且必须是 内第一个非空白、非注释的子元素。
文件实际编码必须是 UTF-8（无 BOM）
光写对 <meta charset="UTF-8"> 没用，如果 HTML 文件本身不是以 UTF-8（无 BOM）保存，浏览器按声明去解码一堆乱字节，表格里的中文照样乱。
验证和修复方法：
- VS Code 右下角看编码显示：若为
UTF-8 with BOM，点击后选Save with Encoding → UTF-8（注意不带 “with BOM”） - Notepad++：菜单栏
编码 → 转为 UTF-8 编码（不是 “UTF-8-BOM”） - 命令行快速检查：
head -c 4 your-table.html | xxd，输出含ef bb bf就有 BOM，需清除重存
BOM 会卡在 前面，导致 JS/CSS 加载失败，连带表格中通过 JS 动态插入的中文也出错。
HTTP 响应头 Content-Type 优先级高于 meta
当页面通过 http:// 访问（而非 file://），服务器返回的 HTTP 响应头中 Content-Type: text/html; charset=... 会直接覆盖 <meta charset>。表格乱码但本地双击打开正常，大概率是这里出了问题。
检查方式：
- Chrome DevTools → Network → 刷新 → 点主 HTML 请求 → Headers → Response Headers → 查
Content-Type - 若值为
charset=gbk、charset=iso-8859-1或压根没charset子句，<meta>就被无视了
常见服务配置：
- Nginx：
charset utf-8;（小写，加在server或location块内） - Apache：
AddDefaultCharset UTF-8（写在.htaccess或httpd.conf） - Express：
res.set('Content-Type', 'text/html; charset=UTF-8')（不能只用res.sendFile()）
表格内容本身不触发额外编码问题，但依赖链要全对
HTML 表格（<table>）本身不改变字符编码逻辑，但它常暴露底层问题：比如从数据库查出的中文写进 <code><td>张三</td> 后乱码，说明数据读取/拼接环节已出错；JS 动态生成表格时 innerHTML = '<td>李四</td>' 报 Uncaught SyntaxError，大概率是 JS 文件本身含 BOM 或非 UTF-8 编码。
关键点：
-
<meta charset="UTF-8">只管 HTML 主文档，外部<script src="data.js"></script>和<link href="style.css">必须各自也是 UTF-8（无 BOM），CSS 中如有中文注释也要 UTF-8 - 服务端模板（如 EJS、Thymeleaf）渲染时，若模板文件编码不对，
<meta charset>写得再准也没用——它被拼进输出流之前就错了 - PHP 输出 HTML 前，header() 不能有 BOM，否则
header('Content-Type: ...')失效，退回到默认 GBK
真正卡住人的，从来不是表格怎么写，而是 <meta charset="UTF-8"> 前面有没有不可见字符、文件是不是真 UTF-8、HTTP 头有没有悄悄覆盖它——这三环缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
