静态HTML中文乱码的解决关键是文件保存编码、HTML的声明（须置于开头且无BOM）、传输头三者统一为UTF-8；配套CSS/JS文件也须同为UTF-8编码。
静态 HTML 页面出现中文乱码，核心在于字符编码未被浏览器正确识别。解决的关键不是靠“浏览器兼容性补丁”，而是确保 文件保存编码、HTML 声明、传输头（如适用）三者统一为 UTF-8。其中，“charset” 指令主要指 HTML 中的 声明，它是纯静态页面在无服务器干预时最直接、最可靠的控制手段。
必须写在 开头的
这是解决静态页乱码的首要动作。它必须满足三个条件：
- 放在
标签内，且越靠前越好（建议紧贴开始，早于<script></script>）； - 属性名必须是
charset（不是char或encoding），值必须是UTF-8（推荐全大写，兼容性更稳；utf-8也可，但避免写成utf8或UTF8）； - 不能放在
里，否则多数浏览器会忽略，声明失效。
HTML 文件本身必须以 UTF-8（无 BOM）编码保存
只是“告诉浏览器怎么读”，前提是文件内容确实是 UTF-8 编码。常见错误是：编辑器用 GBK 或 ANSI 保存了中文，却写了 UTF-8 声明，结果浏览器按 UTF-8 解码一堆 GBK 字节，必然乱码。
- VS Code：右下角点击编码名称 → “Save with Encoding” → 选 UTF-8（不勾选 “with BOM”）；
- Sublime Text：菜单 File → Save with Encoding → UTF-8；
- Notepad++：菜单 编码 → 转为 UTF-8 无 BOM 格式；
- 验证方法：Linux/macOS 执行
file -i your-page.html，应显示charset=utf-8；Windows 可用 VS Code 打开后看右下角编码标识。
注意 file:// 协议与 HTTP 协议的区别
本地双击打开 HTML（即 file:// 协议）时，浏览器**只依赖 声明**，完全不看 HTTP 响应头。而通过 Web 服务器（如 http://localhost）访问时，服务器返回的 Content-Type 响应头（如 text/html; charset=UTF-8）优先级高于 meta 标签。
- 纯静态开发阶段，只要确保 meta 声明 + 文件编码一致，Chrome/Firefox/Edge/Safari 都能正常显示中文；
- 若部署到 Nginx/Apache/Express 等服务器，需额外配置响应头为 UTF-8，否则可能被服务器默认头（如
charset=iso-8859-1）覆盖 meta 声明； - Tomcat 用户还需修改
server.xml的URIEncoding="UTF-8"并配置DefaultServlet的fileEncoding参数。
配套资源也要统一编码
一个页面不止有 HTML，还可能引入外部 CSS、JS 文件。如果这些文件本身是 GBK 编码，哪怕 HTML 正确，其内部中文注释或字符串仍会乱码。
- 所有 .css、.js 文件也必须保存为 UTF-8（无 BOM）；
- CSS 中若用中文字体名（如
font-family: "微软雅黑", "Microsoft YaHei"），无需额外声明编码，但字体名本身必须是 UTF-8 字节； - JS 中的中文字符串、注释同理，编辑器保存时务必确认编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
