HTML中文乱码的根源是编码声明缺失或错位，需确保HTML文件UTF-8无BOM保存、<meta charset="utf-8">置于<head>最前、服务器响应头Content-Type含charset=utf-8、外部JS/CSS也统一UTF-8。
HTML 中文乱码的根源是编码声明缺失或错位
浏览器默认按 ISO-8859-1 或系统本地编码（如 GBK）解析 HTML，一旦文件实际保存为 UTF-8 却没告诉浏览器，中文就变成 æ些æå 这种乱码。关键不是“加不加”，而是“加在哪、加得对不对”。
常见错误现象：ã欢è¿ä½¿ç¨ã 显示成方块、问号或一堆符号；用 VS Code 打开正常，但浏览器里全乱；本地打开正常，部署到 Nginx/Apache 后乱码。
-
<meta charset="utf-8">必须放在<head>内，且越靠前越好——最好在<title>之前 - 它只对 HTML 文件本身生效，不影响外部 JS/CSS 的编码，那些文件也得各自保存为 UTF-8 并正确声明（如 JS 文件无 BOM，CSS 用
@charset "UTF-8";） - 如果服务器 HTTP 响应头里带了
Content-Type: text/html; charset=GBK，会直接覆盖<meta>，此时优先修服务器配置
VS Code 保存为 UTF-8 且禁用 BOM 是硬性前提
编辑器保存时选错编码，<meta charset="utf-8"> 就是空谈。Windows 系统下 VS Code 默认可能带 BOM（Byte Order Mark），而部分老浏览器或服务器会把 BOM 当作页面开头的不可见字符，导致 <meta> 不在最前面，失效。
- 在 VS Code 右下角点击编码名称（如
UTF-8或GBK），选Save with Encoding→UTF-8 - 务必确认右下角显示的是
UTF-8，不是UTF-8 with BOM - 检查文件开头：用十六进制工具或命令
head -c 4 index.html | xxd，UTF-8 无 BOM 应以3c 21（即<!）起始；有 BOM 则是ef bb bf 3c
HTTP 响应头比 <meta> 更优先，Nginx/Apache 要同步配
当服务器返回的 Content-Type 响应头明确指定了字符集，浏览器会无视 <meta charset>。本地双击打开 HTML 没问题，是因为走的是 file:// 协议，不发响应头；一放到服务器就乱，八成是这里卡住。
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置中，在
server或location块里加：charset utf-8;（注意不是charset UTF-8;，大小写敏感） - Apache 需确保
AddDefaultCharset UTF-8在httpd.conf或.htaccess中启用，且未被其他指令覆盖 - 用浏览器开发者工具 → Network → 点开 HTML 请求 → Headers → Response Headers，确认
content-type值含charset=utf-8
script 标签内嵌中文报错？那是 JS 解析层面的问题
如果 <script>alert("你好");</script> 在页面里显示乱码或报 Uncaught SyntaxError: Invalid or unexpected token，说明浏览器把 script 内容当成了非 UTF-8 编码解析——这通常意味着 HTML 的编码声明根本没生效，或者 script 被单独加载时没继承主文档编码。
- 避免在
<script>标签内写大量中文逻辑，改用外部 JS 文件，并确保该文件也是 UTF-8 无 BOM 保存 - 外部 JS 加载时可显式声明：
<script src="app.js" charset="utf-8"></script>（虽然现代浏览器基本自动继承，但加上更稳） - 若用构建工具（Webpack/Vite），检查其输出配置是否强制设了
encoding: 'utf8'，否则压缩后可能丢掉编码信息
真正容易被忽略的点：HTML 文件本身编码、<meta> 位置、HTTP 响应头、外部资源编码，这四者必须全部对齐为 UTF-8。少一个，中文就可能在某个环节塌方。
