关键在于区分保存原始源码还是渲染后DOM、编码必须选UTF-8、路径需转为相对以支持离线打开；静态页用Ctrl+U复制保存，SPA页须用DevTools复制outerHTML，命令行可用curl或wget--page-requisites批量抓取。
直接保存 HTML 源码为可双击打开的 index.html 文件，关键不是“能不能存”，而是“存的是原始源码还是渲染后 DOM”“编码选错会中文乱码”“路径写死导致离线打不开”。选错方法，存下来也白存。
用浏览器“查看页面源代码”保存原始 HTML（适合静态页）
这是获取服务器返回的原始 HTML 的最可靠方式，但不包含 JS 动态插入的内容。
- 在网页上按
Ctrl+U（Windows）或Cmd+Option+U（Mac）打开源码页 - 全选（
Ctrl+A），复制（Ctrl+C） - 粘贴到 VS Code / Notepad++ 等编辑器中（**别用系统记事本直接粘贴后另存**——它默认 ANSI 编码）
- 保存时：文件名填
index.html，编码必须选UTF-8，保存类型选“所有文件” - 如果直接用浏览器右键“另存为”→“网页，仅 HTML”，也能得到原始源码，但部分网站会拦截该操作
用开发者工具 Elements 面板保存渲染后 DOM（适合 SPA 或动态内容）
当页面大量依赖 JS 渲染（比如 React/Vue 项目、登录后才显示的内容），Ctrl+U 看到的可能是空壳，此时必须从 Elements 复制。
- 按
F12打开开发者工具，切到Elements标签页 - 右键最外层的
<html>标签 →Copy→Copy outerHTML - 粘贴进编辑器，保存为
index.html，同样确认编码是UTF-8 - 注意：这个 HTML 是浏览器当前实际渲染出的结构，含 JS 注入的节点，但不含原始注释、缩进，且内联样式可能被展开
用 curl 或 wget 命令行抓取并保存（适合批量/自动化/绕过右键限制）
命令行方式不受前端屏蔽影响，还能加参数下载资源，但需注意反爬和 User-Agent。
立即学习“前端免费学习笔记（深入）”；
- 基础保存（只抓 HTML）：
curl -o backup.html https://example.com - 带请求头模拟浏览器：
curl -H "User-Agent: Mozilla/5.0" -o backup.html https://example.com - 用
wget下载完整页面（HTML + CSS/JS/图片）：wget --page-requisites --no-parent https://example.com - ⚠️
wget默认保存为index.html并建同名文件夹存资源；curl不自动下载外部资源，只存 HTML 主体
保存后打不开？重点检查这三处
双击 index.html 打不开、样式丢失、控制台报 404，90% 出在这几个地方：
-
file://协议限制：本地双击打开时，浏览器默认禁用跨域请求，fetch、XMLHttpRequest、import()会失败；改用本地服务器（如 VS Code 的 Live Server 插件）启动更可靠 - 路径没转相对：
<link href="https://cdn.example.com/style.css">这种绝对 URL 离线就失效；应下载 CSS 到本地css/style.css，再改为<link href="css/style.css"> - 资源引用了未保存的文件：检查
<img src="avatar.jpg">，确认avatar.jpg确实放在同一目录或对应子目录下，否则图片显示为空
真正麻烦的从来不是“怎么点保存”，而是保存后要不要支持离线、要不要保留原始结构、要不要兼容 JS 渲染逻辑——这些决定了你该用 Ctrl+U 还是 Elements，该用 curl 还是 wget --page-requisites，以及是否立刻配上一个本地服务来验证。
