HTML5中文乱码主因是charset声明缺失或文件编码不一致，须在head首行写<meta charset="UTF-8">，文件保存为UTF-8无BOM，服务器响应头不可覆盖该声明，CSS/JS文件也需同为UTF-8无BOM。
HTML5 静态网页出现中文乱码，90% 是因为 charset 声明缺失或与文件实际编码不一致，不是浏览器问题，也不是“字体没装好”。
HTML 文件里必须显式声明 UTF-8 编码
HTML5 不再支持老式的 meta http-equiv="Content-Type" 写法（虽然部分浏览器仍兼容），必须用简短、标准的 meta charset，且要放在 <head> 最开头（在任何 CSS/JS 引入之前）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的页面</title> </head> <body> <p>你好，世界</p> </body> </html>
注意：charset 值必须是 UTF-8（大小写不敏感，但惯例全大写），不能写成 utf8、utf-8（带短横）、UTF8（无短横但非标准写法）——某些旧版 IE 或工具链可能识别不稳定。
编辑器保存文件时必须选 UTF-8 without BOM
即使 HTML 里写了 <meta charset="UTF-8">，如果文件本身是以 GBK、ISO-8859-1 或带 BOM 的 UTF-8 保存的，浏览器仍会按错误编码解析中文，导致乱码或页面顶部出现  等不可见字符。
立即学习“前端免费学习笔记（深入）”；
- VS Code：右下角点击编码名称 → 选择
Save with Encoding→ 选UTF-8（默认即无 BOM） - Sublime Text：菜单
File → Save with Encoding → UTF-8 - Notepad++：菜单
编码 → 转为 UTF-8 无 BOM 格式
验证方法：用命令行执行 file -i your-page.html（Linux/macOS）或用 VS Code 打开后看右下角是否显示 UTF-8 且无 BOM 提示。
服务器响应头不能覆盖 meta charset
本地双击打开 HTML 文件（file:// 协议）时，浏览器只依赖 meta 声明；但一旦通过 HTTP 服务访问（如 http://localhost:8080），服务器返回的 Content-Type 响应头优先级高于 meta 标签。如果服务器返回：
Content-Type: text/html; charset=GBK
那无论你 HTML 里怎么写 meta，浏览器都会用 GBK 解析，中文必然乱码。
- 用 Python 快速起服务测试：
python3 -m http.server 8000 --bind 127.0.0.1默认发UTF-8头，安全 - 用 Nginx/Apache：确认配置中未手动设置
charset GBK或类似指令 - Chrome 开发者工具 → Network → 刷新页面 → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type
外部资源（CSS/JS）也要保持编码一致
如果 CSS 文件里写了中文注释或内容（如 content: "删除";），或 JS 文件里有中文字符串，它们同样需要自身是 UTF-8 without BOM 编码，并在 <link> 或 <script> 标签中显式声明：
<link rel="stylesheet" href="style.css" charset="UTF-8"> <script src="app.js" charset="UTF-8"></script>
不过现代浏览器对 CSS/JS 默认也按页面编码解析，只要 HTML 主文档编码正确、外部文件也是 UTF-8，一般无需额外加 charset 属性；但加了更稳妥，尤其面对老旧环境。
真正容易被忽略的是：用文本编辑器新建一个 .css 文件，直接输入中文保存——很多编辑器默认用系统区域编码（如 Windows 简体中文版默认 GBK），这个文件单独打开就是乱码，嵌入 HTML 后也会污染渲染。
