最可靠方法是右键选“查看页面源代码”后直接保存为HTML文件；fetch仅限同源下载；curl/wget可获取真实服务器响应；跨域时JS无法获取原始HTML源码。
Ctrl+U 后直接 Ctrl+S 是最接近“一键”的操作，但严格来说它只保存原始 HTML 源码（不含 JS 渲染后的内容），且必须在源码标签页中执行——这是多数人卡住的第一步。
为什么“右键 → 查看页面源代码”后不能直接另存为？
浏览器右键菜单里的“查看页面源代码”本身不提供保存入口，它只是打开一个只读的源码视图标签页。很多人误在原网页标签页按 Ctrl+S，结果弹出的是“网页,全部”保存对话框，生成一堆文件和文件夹，而不是单个干净的 .html 文件。
正确路径是：Ctrl+U → 新标签页打开源码 → 在该标签页里按 Ctrl+S → 保存类型选“所有文件” → 文件名写 xxx.html → 编码必须选 UTF-8。
- 不选 UTF-8：中文变
???或乱码（记事本默认 ANSI，VS Code 默认 UTF-8） - 保存类型没选“所有文件”：系统可能自动加
.txt后缀，变成xxx.html.txt - 在原网页标签页保存：触发的是“网页,全部”，不是源码
想保存 JS 渲染后的完整 DOM，别用 Ctrl+U
Ctrl+U 拿到的是服务器返回的原始 HTML，对 React/Vue/Angular 等单页应用基本无效——你看到的页面内容大多是 JS 动态插入的，源码里只有空 <div id="root"></div>。
这时得进开发者工具：F12 → Elements 面板 → 右键最外层 <html> 标签 → 选 Copy outerHTML → 粘贴到编辑器 → 保存为 .html（同样注意 UTF-8）。
立即学习“前端免费学习笔记（深入）”；
- Firefox 和新版 Chrome/Edge 都支持这个操作；旧版 Edge 可能只有
Copy element，不够完整 - 复制的是当前时刻的 DOM 快照，含内联样式、动态 class、JS 插入的文本，但外部 CSS/JS 文件路径仍是相对或绝对 URL，离线打开会 404
- 如果页面用了 Shadow DOM 或
iframe跨域内容，outerHTML不会包含它们
wget 和 curl 怎么才算“完整”抓取？
命令行工具默认只拿 HTML 文本，所谓“完整”需手动加参数下载依赖资源：
-
wget --page-requisites --convert-links --no-parent https://example.com：下载 HTML + 所有css/js/img，并把链接转为本地相对路径 -
curl -s https://example.com > page.html：仅原始 HTML，无资源，无重试，无重定向跟随（加-L才跟跳转） -
wget在 Windows 上需额外安装，macOS/Linux 自带；curl全平台预装但功能较基础
注意：wget --page-requisites 对现代 SPA 的异步加载资源（如懒加载图片、fetch 加载的数据块）依然无效，它只处理 HTML 中静态声明的 href/src。
离线打不开？大概率是这三个地方错了
即使你成功保存了 HTML 文件，双击用 file:// 协议打开时白屏或样式丢失，问题通常不在保存动作本身：
- 路径写死成绝对 URL（如
src="/js/app.js"），没改成相对路径（src="js/app.js"） - 页面启用了 Service Worker，离线时拦截请求并返回缓存失败页，需在开发者工具 Application → Service Workers 中
Unregister - 用了
file://协议加载本地资源，但浏览器因安全策略拒绝跨 origin 请求（尤其 Chrome），可改用本地 HTTP 服务（如 VS Code Live Server 扩展）
真正“一键完整”的方案不存在——原始源码、渲染后 DOM、带资源的离线包，三者目标不同，技术路径天然分裂。选哪个，取决于你到底要备份什么、后续怎么用。
