必须明确保存目标：原始HTML响应、渲染后DOM或含资源的离线副本，三者技术路径不同。curl获取服务器首响，右键“查看源代码”后在新标签页保存，Elements面板复制outerHTML得动态内容，wget可下载完整网页资源。
直接保存网页的全部HTML源码，关键在于区分「原始服务端返回的HTML」和「浏览器渲染后的DOM」——两者内容可能完全不同。如果你要的是可审计、可比对、可复现的原始快照，必须获取服务器实际返回的响应体，而不是Elements面板里被JS改写过的结构。
用 curl 抓取原始 HTML 源码（推荐静态页面）
这是最干净、最可控的方式，绕过浏览器解析与JS执行，拿到服务器吐出的第一手内容。
- 在终端运行
curl -o backup.html https://example.com，会把响应体原样写入文件 - 加
-H "User-Agent: Mozilla/5.0..."可避免部分网站反爬拦截空响应 - 若页面依赖 Cookie 或登录态，先用浏览器导出 cookies.json，再用
--cookie-jar或--cookie参数带入 - 注意：不下载 CSS/JS/图片等外部资源，
backup.html是纯文本文件，双击打开可能样式错乱
用浏览器“查看页面源代码”+Ctrl+S（最简但易踩坑）
很多人卡在这一步：右键→“查看页面源代码”后，直接在原网页标签页按 Ctrl+S，结果保存的是渲染后的 DOM，不是原始源码。
- 必须在新开的「源代码标签页」里按
Ctrl+S（Windows）或Cmd+S（Mac）才能保存原始 HTML - 保存时务必手动选择“保存类型：所有文件”，否则记事本可能强行加
.txt后缀 - 编码必须选
UTF-8，否则中文注释或文字变乱码（记事本默认 ANSI 编码） - 该方式对禁用右键或屏蔽
Ctrl+U的网站无效
用开发者工具 Elements 面板复制 outerHTML（适合动态 SPA）
当页面大量依赖 JavaScript 渲染（如 React/Vue 应用），原始 HTML 往往只有 <div id="root"></div>，真正内容在 JS 执行后才插入 DOM —— 这时你要的是最终呈现的完整结构。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具（
F12），切到Elements面板，找到顶层<html>标签 - 右键 →
Copy→Copy outerHTML（Chrome/Edge）或Copy→Copy outerHTML（Firefox） - 粘贴进 VS Code 或 Notepad++，另存为
rendered.html，编码选UTF-8 - 注意：这个 HTML 包含 JS 动态插入的节点，但不含未加载的懒加载内容，也不保证能离线执行原有 JS 逻辑
用 wget 下载完整网页（含资源，但路径易失效）
如果目标是离线能点开就看，且不介意生成一堆文件夹，wget 是唯一能自动拉取全部依赖的命令行方案。
- 运行
wget --page-requisites --convert-links --no-parent -e robots=off https://example.com -
--page-requisites是核心，它会下载 HTML 引用的所有 CSS/JS/图片 -
--convert-links把绝对 URL 改成相对路径，否则本地双击打开时资源 404 - 生成的
example.com/index.html和同名文件夹必须保持原结构，移动任一文件都会导致资源加载失败
真正难的不是“怎么保存”，而是明确你要存什么：原始响应？渲染快照？还是可离线运行的副本？三者技术路径完全不同，混用会导致后续分析失效或调试失真。尤其注意那些用 fetch 或 Service Worker 动态加载内容的页面，它们的“源码”根本不在初始 HTML 里。
