真要保留可运行的源码，得按用途选对方法：查看原始HTML适合学习调试，用SingleFile扩展可保存完整可运行网页，批量获取应使用SingleFile CLI工具。
直接保存网页 HTML 源码 ≠ 能离线还原页面。浏览器“另存为”生成的是一堆分散文件（index.html + images/ + css/），稍一移动或断网就失效。真要保留可运行的源码，得按用途选对方法。
用浏览器开发者工具查看并复制原始 HTML
这是最轻量、最可控的源码获取方式，适合学习结构、调试、临时复用片段。
- 右键网页任意位置 → 选择“查看页面源代码”（Chrome/Firefox）或按
Ctrl+U，会打开纯文本 HTML；不要直接另存为，先确认页面已完全加载（尤其含 JS 渲染的内容） - 若页面由 React/Vue 等框架动态生成，
Ctrl+U看到的是初始骨架，真实 DOM 需在 DevTools 的Elements面板中右键 → “Copy” → “Copy outerHTML” 才能拿到渲染后结果 - 复制内容后，务必粘贴到纯文本编辑器（如 VS Code、Notepad++），保存时手动加上
.html后缀，并选择编码为UTF-8—— 编码错会导致中文乱码、样式丢失
用 SingleFile 扩展保存完整可运行网页
当你需要“保存即可用”，比如归档参考案例、备份设计稿落地页、离线演示原型，SingleFile 是目前唯一稳定可靠的方案。
- 安装后访问目标网页，等所有图片、动画、字体加载完毕再点击插件图标；它会把
img的src、link的href、script的src全部内联或 base64 编码写进单个.html文件里 - 默认输出带压缩和清理（如删空格、合并 CSS 规则），如需保留原始格式便于阅读，可在插件设置中关闭
Minify HTML/CSS - 注意：含登录态、第三方 iframe（如 YouTube、地图）、Web Worker 或 Service Worker 的页面，
SingleFile无法保存其运行时状态，仅能固化当前可见 DOM 和静态资源
批量下载整站 HTML 源码？别用“另存为”，改用 CLI 工具
设计师整理竞品库、做 UI 模式分析时，常需拉取多个页面的干净 HTML。浏览器右键保存效率低且不一致，应转向命令行。
立即学习“前端免费学习笔记（深入）”；
-
curl -s "https://example.com/page1" > page1.html最简但只拿原始 HTML，不含 JS 渲染后内容 - 真正可靠的是
SingleFileCLI：npx singlefile https://example.com/page1 --output=page1.html，它会启动无头浏览器，等页面就绪后再打包，效果等同扩展版 - 避免用
wget --mirror或旧式爬虫：它们默认不执行 JS，也难处理相对路径重写，导出的 HTML 很可能连 CSS 都加载不了
最容易被忽略的一点：保存下来的 HTML 文件，如果引用了本地路径（如 ./style.css）或跨域资源（如 CDN 字体），在双击打开时必然失败——因为 file:// 协议下浏览器禁用跨域请求，也不支持相对路径解析。所以，要么用 SingleFile 内联一切，要么用本地服务器（如 VS Code 的 Live Server 插件）打开，而不是直接双击。
