<!DOCTYPE html>必须放在第一行且前面不能有任何字符，否则浏览器进入怪异模式，导致<meta charset="UTF-8">失效；该meta标签须置于<head>最前，且文件编码、响应头、meta声明三者必须均为UTF-8无BOM。
<!DOCTYPE html> 必须放在第一行，且前面不能有任何字符（包括空格、BOM、注释），否则浏览器会退入怪异模式，<meta charset="UTF-8"> 就失效。
确认并清除 BOM 头
老旧 HTML 文件常带 UTF-8-BOM（EF BB BF），VS Code 默认不显示，但它会让 <meta charset="UTF-8"> 失效。打开文件后，若状态栏显示 “UTF-8 with BOM”，就得转成纯 UTF-8：
- VS Code：右下角点击编码名称 → 选 “Save with Encoding” → 选 “UTF-8”（不是 “UTF-8 with BOM”）
- Sublime Text：File → Save with Encoding → UTF-8
- 验证是否清除成功：
xxd yourfile.html | head，输出里不应出现ef bb bf
把 <meta charset> 放到 <head> 最前面
它必须是 <head> 内第一个标签，早于 <title>、<script>、<style> 和任何注释。错位会导致：
- Chrome/Firefox 可能忽略它，按 HTTP 响应头或默认 ISO-8859-1 解析
- 中文、emoji 显示为 或乱码
- PHP/ASP 输出前若有空格或 BOM，也会让该 meta 失效
正确写法：<head><meta charset="UTF-8"><title>... —— 中间不能有换行或空格干扰。
立即学习“前端免费学习笔记（深入）”；
同步修正服务器响应头和文件保存编码
只改 HTML 里的 <meta> 不够，HTTP 响应头和文件实际编码必须三者一致：
- Apache：在
.htaccess加AddDefaultCharset UTF-8；Nginx：server 块加charset utf-8; - PHP 页面开头加
header('Content-Type: text/html; charset=UTF-8');（必须在任何输出之前） - 用
curl -I http://yoursite/page.html检查响应头，确认Content-Type包含charset=UTF-8 - 编辑器保存时务必选 “UTF-8（无 BOM）”，别信“自动识别”——老旧文件常被误判为 GBK
最容易被跳过的点：文件本身是 GBK 编码，却硬写 <meta charset="UTF-8">。浏览器按 UTF-8 解析 GBK 字节，必然乱码。先用 iconv -f GBK -t UTF-8 input.html > output.html 转码，再统一处理 meta 和响应头。
