局域网访问HTML易乱码是因为file://协议无HTTP响应头，浏览器依赖或BOM推断编码，而必须位于DOCTYPE后立即位置、文件须为UTF-8无BOM编码。
为什么局域网访问 HTML 时更容易乱码
因为 file:// 协议不走 HTTP，服务器响应头（Content-Type）完全缺失，浏览器只能依赖 HTML 内部的 <meta charset> 或文件 BOM 推断编码。而很多局域网场景下：本地双击打开、Python http.server 默认无 charset、Nginx/Apache 配置遗漏、VS Code Live Server 插件未设 header —— 这些都会让 <meta charset="UTF-8"> 成为唯一防线，但又极易失效。
<meta charset> 必须放在
HTML 解析器在读取前 1024 字节时就尝试确定编码，一旦遇到非 ASCII 字符（如中文、emoji）或 <title></title> 中文内容，而 <meta charset> 还没扫到，就会 fallback 到系统默认编码（Windows 常为 GBK），直接崩。
- ✅ 正确位置：
<meta charset="UTF-8"> <title>测试页</title> - ❌ 错误写法：
<title>测试页</title> <meta charset="UTF-8">（<title></title>已含中文，解析器已按 GBK 解码失败） - ❌ 不要加斜杠：
<meta charset="UTF-8">是无效自闭合，在 HTML5 中不被识别 - ❌ 不要大小写混写：
"utf8"、"UTF_8"、"unicode"全部无效，仅"UTF-8"（全大写 U/T/F，短横线）是标准值
确保 HTML 文件本身是 UTF-8 无 BOM 编码
VS Code 默认保存为 UTF-8，但若你用记事本编辑过、或从别人手里拿到的文件原先是 GBK，再怎么写 <meta charset="UTF-8"> 都白搭 —— 浏览器会用 UTF-8 解码 GBK 字节流，结果就是满屏 。
- 在 VS Code 右下角点击编码名称（如 “GBK”、“UTF-8 with BOM”），选 “Save with Encoding” → “UTF-8”
- 绝对避开 “UTF-8 with BOM”：BOM（EF BB BF）三个字节会卡在
前面，导致 <code><meta charset>实际不是文档第一个标签，IE/旧 Edge 直接忽略 - Sublime Text / Notepad++ 同理：保存时选 “UTF-8”，别选带 BOM 的选项
- 验证方法：用 hex editor 打开文件，开头应为
3C 21 44 4F 43 54 59 50 45（即/code> ASCII 字节），而非 <code>EF BB BF 3C 21...
用 Python / Node.js 启服务时必须手动设 header
局域网常用 python3 -m http.server 8000 或 live-server，但它们默认不发 Content-Type: text/html; charset=UTF-8，等价于裸文件访问。
立即学习“前端免费学习笔记（深入）”；
- Python 简单修复：
python3 -c " import http.server, socketserver class H(h): def do_GET(self): if self.path.endswith('.html') or self.path == '/': self.send_response(200) self.send_header('Content-Type', 'text/html; charset=UTF-8') self.end_headers() self.wfile.write(open('.'+self.path, 'rb').read()) else: super().do_GET() socketserver.TCPServer(('', 8000), H).serve_forever() " - Node.js + Express：
res.set('Content-Type', 'text/html; charset=UTF-8') - Nginx 配置段加：
charset utf-8;（注意不是charset UTF-8;） - Apache .htaccess 加：
AddDefaultCharset UTF-8
最后检查是否生效：F12 → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 看 Content-Type 是否含 charset=UTF-8；同时执行 document.characterSet 应返回 "UTF-8"。两个都对，才算真正闭环 —— 少一个，局域网里中文就悬。
