必须写<meta charset="UTF-8">且置于<head>最开头，因HTML5规范仅认可该简写形式；位置错位或编码不一致会导致浏览器按默认编码（如ISO-8859-1）解析，引发乱码。
必须写 <meta charset="UTF-8">，且必须放在 <head> 的最开头（紧接 <head> 标签后），缺一不可。
为什么只认 <meta charset="UTF-8"> 这一种写法
HTML5 规范只认可这种简写形式。其他写法要么无效，要么触发兼容模式或解析异常：
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是 HTML4 风格，浏览器虽能识别，但属于冗余写法，且容易因空格/大小写出错（比如写成content="TEXT/HTML; CHARSET=utf-8"就可能被忽略） -
<meta charset=UTF-8>（没加引号）不符合 HTML5 语法，部分编辑器或校验工具会报错，某些旧版 Safari 曾因此不生效 -
<meta charset="utf8">（小写无横线）不是标准值，UTF-8是唯一被广泛实现的合法值
<meta charset> 放错位置会导致乱码
它必须是 <head> 中第一个实际内容标签（可紧跟在 <head> 后，但不能晚于 <title> 或 <script>）。原因很直接：
- 浏览器从上到下解析 HTML，一旦开始读取
<title>或文本内容，就已经按当前默认编码（通常是系统 ANSI 或 ISO-8859-1）解码了 - 如果
<meta charset>写在<title>后面，那么<title>里的中文就可能已解码失败，表现为 或一堆问号 - 实测：把
<meta charset="UTF-8">移到<title>下方，Chrome Network 面板中 Response Headers 的content-type仍可能是text/html; charset=iso-8859-1，而页面标题已乱码
文件保存编码和 <meta charset> 必须一致
标签只是“告诉浏览器怎么解”，真正起作用的是文件本身用什么编码保存：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code / Notepad++ 打开 HTML 文件时，右下角显示的编码必须是
UTF-8（不含 BOM 更稳妥；带 BOM 在某些 PHP 环境下可能引发头部输出问题） - Windows 记事本默认保存为 ANSI，直接另存为 “UTF-8” 时，它实际存的是 UTF-8 with BOM —— 虽然能显示中文，但开头三个字节
EF BB BF可能导致 JS 报错或 CSS 不加载 - Python 的
http.server模块不发送Content-Typeheader，此时完全依赖<meta charset>；而 Apache/Nginx 默认不设 charset，也得靠它兜底
最容易被忽略的一点：本地双击打开（file:/// 协议）时，浏览器**只看 <meta charset>，完全无视 HTTP 响应头**。这意味着即使服务器配置了 AddDefaultCharset UTF-8，本地测试仍可能乱码——只要文件本身不是 UTF-8 编码，或 <meta> 标签缺失/错位，就一定会出问题。
