局域网访问HTML易乱码是因为file://协议无HTTP响应头，浏览器依赖或BOM推断编码，而必须位于DOCTYPE后立即位置、文件须为UTF-8无BOM编码。

为什么局域网访问 HTML 时更容易乱码

因为 file:// 协议不走 HTTP，服务器响应头（Content-Type）完全缺失，浏览器只能依赖 HTML 内部的 或文件 BOM 推断编码。而很多局域网场景下：本地双击打开、Python http.server 默认无 charset、Nginx/Apache 配置遗漏、VS Code Live Server 插件未设 header —— 这些都会让 成为唯一防线，但又极易失效。

必须放在 最开头（DOCTYPE 之后立即）

HTML 解析器在读取前 1024 字节时就尝试确定编码，一旦遇到非 ASCII 字符（如中文、emoji）或 中文内容，而 还没扫到，就会 fallback 到系统默认编码（Windows 常为 GBK），直接崩。

• ✅ 正确位置：
• ❌ 错误写法： （ 已含中文，解析器已按 GBK 解码失败）
• ❌ 不要加斜杠： 是无效自闭合，在 HTML5 中不被识别
• ❌ 不要大小写混写："utf8"、"UTF_8"、"unicode" 全部无效，仅 "UTF-8"（全大写 U/T/F，短横线）是标准值

确保 HTML 文件本身是 UTF-8 无 BOM 编码

VS Code 默认保存为 UTF-8，但若你用记事本编辑过、或从别人手里拿到的文件原先是 GBK，再怎么写 都白搭 —— 浏览器会用 UTF-8 解码 GBK 字节流，结果就是满屏 。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 在 VS Code 右下角点击编码名称（如 “GBK”、“UTF-8 with BOM”），选 “Save with Encoding” → “UTF-8”
• 绝对避开 “UTF-8 with BOM”：BOM（EF BB BF）三个字节会卡在 前面，导致 实际不是文档第一个标签，IE/旧 Edge 直接忽略
• Sublime Text / Notepad++ 同理：保存时选 “UTF-8”，别选带 BOM 的选项
• 验证方法：用 hex editor 打开文件，开头应为 3C 21 44 4F 43 54 59 50 45（即 /code> ASCII 字节），而非 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"。两个都对，才算真正闭环 —— 少一个，局域网里中文就悬。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！