根本原因是file://协议下浏览器拦截外部资源加载；现代网页依赖服务端环境特性，而本地文件协议不支持MIME识别、相对路径解析、跨域策略等，导致CSS/JS/字体/图片全部失效。
直接保存网页 HTML 源码后样式丢失，根本原因不是代码写错了，而是浏览器在 file:// 协议下拒绝加载外部资源——CSS、字体、图片、JS 全部被拦截，控制台常见 net::ERR_FILE_NOT_FOUND 或 CORS policy blocked 错误。靠改路径、调顺序、手动补链接，90% 的尝试都会失败。
为什么双击打开的 HTML 一定丢样式？
现代网页依赖服务端环境：MIME 类型识别、相对路径解析、跨域策略、字体加载机制等，在 file:// 下全部失效。哪怕你把 style.css 和 HTML 放在同一文件夹，<link href="style.css"> 仍大概率 404。
- Chrome / Edge 默认禁用
file://下的fetch()、XMLHttpRequest和@font-face加载 - CSS 中的
url(./images/icon.png)或@import "reset.css"全部失效 - 本地路径层级稍有偏差（比如多一层
pages/），所有相对引用立刻崩盘 - 使用构建工具（Vite、Next.js）生成的 HTML，连
<script type="module">都无法执行
别碰“另存为 > 网页，完整”
这个选项看似靠谱，实则陷阱重重：它只保存当时 DOM 中已存在、且同源可访问的资源，对懒加载图片、CDN 字体、JS 动态插入的 <style> 标签、Web Component 内部样式完全无感。
- 遇到 React/Vue 单页应用，保存下来基本是空壳或首屏静态快照
- 含 Google Fonts 或 Adobe Fonts 的页面，字体必然回退成系统默认
- 保存后文件夹里一堆
xxx_files/子目录，移动或重命名就断链 - 不压缩、不合并、不转内联，体积比原网页还大 2–3 倍
真正能离线保真的方案只有两个
要么让资源彻底脱离外部依赖，要么绕过 file:// 协议限制。
立即学习“前端免费学习笔记（深入）”；
-
首选 SingleFile 扩展：自动将所有 CSS、JS、图片、字体转为 Base64 内联进 HTML，产出单个文件，打开即所见即所得。支持 Chrome/Firefox/Edge，设置里勾选
embedImages、embedFonts、compressHTML即可 -
次选本地 HTTP 服务：用
npx http-server或python3 -m http.server 8000启一个临时服务器，再用浏览器访问http://localhost:8000/your-page.html——此时所有相对路径、字体、AJAX 全部正常 - 手动内联 CSS/JS 可行但极难维护：需提取所有
<link rel="stylesheet">对应内容，替换为<style>...</style>；图片逐个转 Base64 并替换src；字体文件同样处理。动态内容（如评论区）依然无法捕获
容易被忽略的关键点
很多人试了 SingleFile 还是漏资源，问题往往出在扩展权限和页面状态上：
- 未等页面完全加载完毕（尤其是滚动触发的懒加载图片）就点击保存，
embedImages会漏掉视口外的图 - 页面用了 CSP（Content-Security-Policy）头限制内联脚本，SingleFile 生成的
<script>可能被浏览器静默屏蔽 - Firefox 用户若启用了增强跟踪保护（ETP），需在扩展设置中开启
allowInPrivateWindows和disableCSP - 保存前务必关闭开发者工具——某些站点会检测
devtools.isOpen并隐藏关键 DOM 节点
