必须将置于开头、之前且前面无任何字符（含空格、BOM、注释），因浏览器仅扫描前1024字节识别该标签；HTML5规范强制要求写为全大写“UTF-8”（短横不可省、末尾8不可漏），否则部分环境（如WebView、CI工具）会警告或解析失败；标签仅告知浏览器读取方式，文件本身也须以UTF-8（无BOM）保存，否则仍乱码；服务器响应头Content-Type中的charset优先级更高，本地file://协议下则完全依赖此标签。
直接加 <meta charset="UTF-8">，但必须放在 开头、<title></title> 之前，且前面不能有任何字符（包括空格、BOM、注释）。
为什么必须写成 charset="UTF-8" 而不是其他写法
HTML5 规范强制要求大小写和连字符：必须是全大写的 UTF-8，中间短横不能省，末尾数字 8 不能漏。写成 utf-8、UTF8、utf8 或 UTF-8 （末尾带空格）都可能在某些环境（如 WebView、CI 构建工具、html-validate）中触发警告甚至解析失败。浏览器虽大多宽容，但严谨场景下会 fallback 到系统默认编码（Windows 下就是 GBK），导致中文变方块或问号。
加完标签还是乱码？先检查文件实际编码是否匹配
标签只是“告诉浏览器怎么读”，如果文件本身不是 UTF-8 编码保存的，浏览器照样读错。常见坑：
- VS Code 右下角显示 “UTF-8 with BOM” → 点击它 → 选 “Save with Encoding” → 选 “UTF-8”（**不带 BOM**）
- Notepad++ 菜单栏 “编码” → “转为 UTF-8 编码”（不是 “UTF-8-BOM”）
- 用命令行验证 BOM：
head -c 4 yourfile.html | xxd，输出含ef bb bf就说明有 BOM，得清除重存 - 文件用记事本打开再保存过？默认是 ANSI（即 GBK），必须用专业编辑器重新转码
为什么放位置比内容还重要
浏览器解析 HTML 时，只扫描前 1024 字节来找 charset 声明。如果 <meta charset="UTF-8"> 被挡在注释、空行、BOM 或 <title></title> 后面，就可能被跳过。最安全的位置是：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> ...
注意：<meta charset="UTF-8"> 必须是 内第一个非空白、非注释的标签；前面不能有 <!-- 注释 -->，也不能有换行缩进空格。
服务器响应头会覆盖 meta 标签，别忘了检查
即使 HTML 里写对了，如果 Web 服务器返回的 HTTP 响应头里有 Content-Type: text/html; charset=GBK，浏览器会优先信响应头。验证方法：
- F12 打开开发者工具 → Network → 刷新 → 找到主 HTML 请求 → Headers → Response Headers
- 看
Content-Type字段是否含charset=UTF-8 - Apache 可加
AddDefaultCharset UTF-8到 .htaccess；Nginx 配置里加charset utf-8;
本地双击打开 HTML 文件（file:// 协议）时，响应头不存在，此时完全依赖 meta 标签和文件实际编码——这也是为什么本地测试乱码最常见，而部署到服务器后反而正常。
