“另存为”留不住CSS和图片，因其仅保存HTML文件本身，不下载link、img等标签引用的外部资源；curl/wget仅获取原始HTML源码；真正离线可用需用SingleFile、HTTrack或Puppeteer打包资源并修正路径。
浏览器“另存为”为什么留不住 CSS 和图片
因为 另存为 保存的只是 HTML 文档本身，不触发资源下载逻辑。浏览器只把当前 HTML 文件写入磁盘，<link rel="stylesheet" href="style.css"> 或 <img src="logo.png"> 这类标签里的路径只是文本，不会自动拉取对应文件。遇到 CDN 地址、内联 SVG、fetch() 加载的内容，连同域资源都可能被跳过。
用 curl / wget 只能拿到原始 HTML 源码
这类命令行工具直接请求服务器返回的响应体，绕过浏览器渲染过程，所以：
-
curl -o page.html https://example.com得到的是服务端吐出的原始 HTML，不含 JS 渲染后的内容 - 所有
href、src路径保持原样，但不会额外下载style.css或app.js - 适合 SEO 审查、备案存档等需要“未加工源码”的场景，不是为了离线浏览
真正能打包外部资源的只有三类方案
想让保存下来的 HTML 在断网时也能正常显示样式和图片，必须把依赖文件一并抓下来并修正路径：
-
SingleFile 浏览器扩展：一键生成单个
.html文件，把 CSS、JS、图片全转成data:Base64 内联，无路径依赖，手机点开即用 -
HTTrack 命令行工具：运行
httrack "https://example.com" -O ./site --robots=0，会创建完整目录结构，自动重写所有相对路径，保留原始资源组织方式 -
Puppeteer 脚本：适合动态页面（React/Vue），先等 JS 执行完再保存
page.content()，配合page.pdf()或手动注入资源，但需自行处理 CSS/JS 的 inline 化或路径映射
自己手动生成时最容易漏掉的两件事
哪怕你用开发者工具复制 Elements 面板里的完整 DOM，再保存为 index.html，也大概率打不开：
立即学习“前端免费学习笔记（深入）”；
- 没把
<link>和<script>标签里的href/src改成相对路径，比如把https://cdn.example.com/main.css改成./css/main.css，否则本地双击打开时浏览器会跨域报错 - 没把图片、字体等二进制资源实际下载到对应文件夹里——光改路径没用，文件不存在照样 404
最省事的底线操作：用 SingleFile 扩展保存，它自动做路径重写 + 内联 + 编码转换，连 UTF-8 BOM 都帮你处理了。
