双击打开html文件样式丢失主因是file://协议限制：禁用跨源请求、不识别mime类型、不支持服务端路径解析，导致css/js/字体加载失败；应改用本地http服务调试。
本地双击打开 HTML 文件为什么样式全没了
浏览器直接双击打开 file:// 协议的 HTML 文件，CSS 和 JS 很容易加载失败，尤其是用了相对路径、@import、字体文件或现代构建工具输出的资源。这不是代码写错了，是协议限制——file:// 下多数浏览器禁用跨源请求，且不支持服务端逻辑（如路径解析、MIME 类型自动识别）。
常见表现：net::ERR_FILE_NOT_FOUND 控制台报错、font-face 加载失败、background-image 不显示、fetch() 报错。
- 检查所有
link、script、img标签的href/src路径是否为相对路径（如./css/style.css），并确认文件实际位置与 HTML 文件层级一致 - 避免在 CSS 中用
url(../fonts/icon.woff2)这类向上跳级过深的路径，优先扁平化资源结构 - 字体文件（
.woff2、.ttf）在file://下常被拒绝加载，改用在线字体（如 Google Fonts）或转 Base64 内联可临时验证 - 如需本地调试，用轻量 HTTP 服务代替双击：命令行运行
npx http-server或python3 -m http.server 8000
CSS 文件 404 但路径看起来完全正确
发布后服务器返回 404 Not Found，往往不是路径写错，而是大小写、扩展名或服务器配置问题。Linux 服务器（绝大多数托管环境）路径严格区分大小写，而 Windows 开发环境不敏感，极易漏掉这个差异。
比如开发时写了 link href="CSS/style.css"，但实际文件夹名为 css/；又或者上传时 FTP 工具自动转小写，导致 Style.css 变成 style.css，而 HTML 里仍引用大写。
立即学习“前端免费学习笔记（深入）”；
