应使用Ctrl+S（Windows/Linux）或Cmd+S（macOS）快捷键，选择“网页,全部”格式保存完整网页，生成.html文件及同名_files文件夹；注意不可选“仅HTML”，否则缺失样式与脚本，且需确保两者共存才能正常离线浏览。
直接用浏览器快捷键保存完整网页（含HTML+资源）
Chrome、Edge、Firefox 都支持原生保存为 Web Page, Complete 格式，它会生成一个 .html 文件 + 同名文件夹，里面包含所有内联 CSS、JS 和图片等外部资源。
操作很简单：Ctrl+S（Windows/Linux）或 Cmd+S（macOS）→ 选择「Web Page, Complete」→ 点击保存。注意不是「Web Page, HTML Only」——后者只存 HTML 结构，不带样式和脚本，页面大概率无法正常渲染。
- 保存后打开
.html文件时，必须连同那个同名文件夹一起保留，否则图片/字体/样式会丢失 - 某些网站通过 CSP 或动态加载阻止资源写入本地（比如部分 SPA 页面），此时「Complete」模式可能漏掉 JS 渲染后的内容
- Firefox 在保存时默认不下载跨域图片（如 CDN 上的 avatar），需手动检查文件夹内是否缺失
.png或.jpg
用开发者工具复制原始 HTML 源码（不含动态修改）
如果只要服务端返回的原始 HTML（也就是「右键→查看网页源代码」看到的内容），别用「检查元素」面板里的 DOM 树——那是浏览器解析并执行 JS 后的结果，已经不是源码了。
正确做法是：F12 打开 DevTools → 切到 Network 标签 → 刷新页面 → 找到顶部第一个 document 类型请求（通常是 index.html 或根路径）→ 右键「Open in Sources panel」→ 右键「Save as…」。
- 这个方法拿到的是未经 JS 修改的原始 HTML，适合做快照比对或调试 SSR 问题
- 如果网站用了 Service Worker 缓存，可能需要先禁用（
Network面板勾选Disable cache）再刷新，否则保存的是缓存版本 - 部分网站返回的是压缩 HTML（无换行缩进），可粘贴到 VS Code 中按
Shift+Alt+F自动格式化
命令行一键抓取 HTML（适合批量或自动化）
用 curl 最直接：它不执行 JS，也不渲染，纯拿响应体。适合保存静态落地页、API 文档页这类内容。
curl -s "https://example.com" -o page.html
- 加
-L参数支持重定向（比如跳转到 HTTPS 或登录页）：curl -sL "https://example.com" -o page.html - 有些网站会校验
User-Agent，遇到 403 可加-H "User-Agent: Mozilla/5.0" -
wget虽然也能用，但默认行为更复杂（自动递归、重命名文件），容易误存一堆无关资源，不如curl干净
为什么「另存为」有时保存失败或内容不对
根本原因在于浏览器保存逻辑依赖的是当前渲染树快照，而非原始响应。一旦页面大量使用 innerHTML、document.write 或框架（React/Vue）挂载，「另存为」得到的 HTML 就是运行时状态，和源码不一致。
- 比如一个按钮点击后才显示的模块，没点之前「另存为」就不存在那段 HTML
- 单页应用（SPA）首页往往只有
，其余内容全靠 JS 注入，「另存为」只会保存这个空壳 - 如果目标是存 JS 渲染后的结果，得先用 Puppeteer 或 Playwright 启动真实浏览器，再调用
page.content()获取最终 DOM 字符串
所以没有银弹：要源码就用 Network 面板；要渲染后快照就得走自动化浏览器；想省事又兼容性好，优先试「Web Page, Complete」——但务必核对保存后的资源完整性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
