应点击右下角编码名→选Save with Encoding→UTF-8（非UTF-8 with BOM）；同时设files.encoding为utf8、files.autoGuessEncoding为false，并确保<meta charset="UTF-8">紧随<head>开头。
HTML 文件乱码，90% 是编辑器保存编码和 <meta charset="UTF-8"> 声明不匹配导致的——不是写错了标签，而是文件根本没存成 UTF-8。
VS Code 里怎么确认并强制保存为 UTF-8（无 BOM）
VS Code 默认用 UTF-8，但“默认”不等于“当前文件就是”。底部状态栏显示的编码可能被手动改过，或从旧项目复制来时继承了错误编码。
- 点击右下角编码名称（如
GBK、UTF-8 with BOM或UTF-8），选 Save with Encoding →UTF-8（注意：不选UTF-8 with BOM） - 如果当前是
GBK，先点 Reopen with Encoding →GBK看是否恢复中文，确认是 GBK 编码后，再执行上一步保存为 UTF-8 - 永久避免：在设置中搜索
files.encoding，设为utf8；搜files.autoGuessEncoding，设为true（让 VS Code 自动探测旧文件编码） - BOM 会干扰
<script>和<link>标签解析，导致Uncaught SyntaxError: Invalid or unexpected token
Sublime Text / Notepad++ 保存为 UTF-8 的关键操作
这两款编辑器默认不带 BOM，但用户常误选“UTF-8-BOM”或“ANSI”，尤其从 Windows 记事本粘贴后极易出错。
- Sublime Text：菜单
File → Save with Encoding → UTF-8（不是UTF-8 with BOM） - Notepad++：菜单
编码 → 转为 UTF-8 编码（不是“UTF-8-BOM”）；若已存为 BOM，先选转为 ANSI再转回UTF-8 - 验证是否真为无 BOM UTF-8：Linux/macOS 执行
xxd index.html | head -n1，输出首行不含ef bb bf；Windows PowerShell 执行Get-Content index.html -Encoding Byte | Select -First 3，结果不应是239,187,191
<meta charset="UTF-8"> 必须放在 <head> 最前面
浏览器只扫描 HTML 前 1024 字节来找这个标签。任何前置内容（注释、空格、BOM、<script>）都可能导致它失效，退回到系统默认编码（Windows 是 GBK）。
立即学习“前端免费学习笔记（深入）”；
- 正确位置：
<head><meta charset="UTF-8"><title>...（<meta>紧跟<head>，前面不能有任何字符，包括注释和空格） - 错误示例：
<head><!-- 注释 --><meta charset="UTF-8">（注释占位，可能超前 1024 字节范围） - 错误示例：
<head><script>console.log('测试')</script><meta charset="UTF-8">（JS 代码提前占用字节，<meta>可能被跳过） - 不要混用：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">已过时，HTML5 中仅<meta charset="UTF-8">有效
HTTP 响应头 Content-Type 与 meta 的优先级关系
服务器返回的 HTTP 响应头里的 Content-Type 比 HTML 中的 <meta charset> 权重更高。如果两者冲突，浏览器以响应头为准——但多数 Web 服务器默认不发 charset，所以实际依赖 meta。
- Nginx：在
server或location块中加charset utf-8;（自动为text/html、text/css、application/javascript加 charset） - Apache：在
.htaccess中加AddDefaultCharset UTF-8（注意：这也会作用于text/plain，可能影响 API 接口） - PHP：在输出 HTML 前调用
header('Content-Type: text/html; charset=utf-8');（必须在任何输出之前） - 验证方式：Chrome 开发者工具 → Network → 点 HTML 请求 → Headers → Response Headers → 查看
Content-Type值
真正容易被忽略的是：CSS 和 JS 外部文件也必须单独保存为 UTF-8（无 BOM），且不能依赖 HTML 的 <meta charset>。它们有自己的编码解析逻辑，@charset "UTF-8"; 在 CSS 里只在文件开头第一行才有效，而 JS 完全依赖文件实际编码。
