最干净的原始html只能通过“查看页面源代码”后在新标签页中按ctrl+s（windows）或cmd+s（macos）保存获得，该方式直接获取服务器返回内容，不执行js、不补全标签、不修改结构；若在原网页标签页另存为，或选“网页，全部”，则会生成额外文件夹或得到渲染后dom快照，失真。
“查看页面源代码”后直接保存，最干净的原始 HTML
这是获取服务器返回原始 HTML 的唯一可靠方式，不经过 JS 渲染、不修改标签闭合、不补全缺失结构。关键点在于：必须在「源代码新标签页」里按 Ctrl+S（Windows）或 Cmd+S（macOS），不能在原网页标签页里点另存为。
常见错误现象：另存为 时格式选了“网页，全部”或“Web Archive”，结果生成一堆文件夹和资源，根本不是单个 .html 文件；或者误在原页面标签页保存，得到的是渲染后的 DOM 快照，不是源码。
操作要点：
- 右键网页空白处 → 选“查看页面源代码”（Chrome/Edge）或“查看源代码”（Firefox），或直接按
Ctrl+U/Cmd+Option+U - 新打开的标签页里，确认地址栏是
view-source:https://...开头 - 按
Ctrl+S，文件名填page.html，保存类型选“所有文件”或“Web Page, HTML Only” - 编码务必选 UTF-8（部分记事本默认 ANSI，会导致中文乱码）
用开发者工具复制 outerHTML，抓取 JS 渲染后的最终 DOM
当页面大量依赖 JavaScript（比如 React/Vue 单页应用），view-source: 标签页里几乎只有空壳 <div id="root"></div>。这时要保存的是浏览器当前实际渲染出的完整结构，就得靠 Elements 面板。
注意：outerHTML 复制的是内存中当前状态，包含动态插入的节点、被 JS 修改过的属性（如 class、style），但不会包含外部 CSS/JS 文件本身——这些资源路径仍保留在 HTML 中，离线打开会 404。
操作要点：
- 按
F12或Ctrl+Shift+I打开开发者工具，切到Elements面板 - 找到最顶层的
标签（不是），右键 →Copy→Copy outerHTML - 粘贴进 VS Code / 记事本等编辑器，另存为
rendered.html，编码选 UTF-8 - 若需离线可用，得手动下载
<link>和<script></script>引用的资源，并改写为相对路径
命令行用 curl 抓取，适合批量或自动化场景
curl 拿到的是和服务端原始响应完全一致的内容，和 view-source: 标签页等价，但可脚本化、可加 headers、可处理重定向。它不执行 JS，也不渲染 DOM，纯 HTTP 层抓取。
容易踩的坑：curl https://example.com > index.html 默认不跟随重定向，遇到 301/302 会存下跳转 HTML；有些网站还校验 User-Agent 或 Referer，直接请求可能返回 403。
实操建议：
- 加
-L跟随重定向：curl -L https://example.com > page.html - 加
-H模拟浏览器请求头：curl -L -H "User-Agent: Mozilla/5.0" https://example.com > page.html - 保存到指定文件夹：先
cd /path/to/folder，再运行curl命令 - 若目标站有反爬，
curl不够用，得换playwright或puppeteer启动真实浏览器
别混淆“网页，全部”和“网页，仅 HTML”
浏览器菜单里的 另存为 看似简单，但两个选项行为完全不同：网页，全部 会生成一个 .html 文件 + 一个同名 _files 文件夹，把图片、CSS、JS 全扒下来并改写路径；网页，仅 HTML 则只存 HTML 主体，所有外部资源链接保持原样，离线打开基本是白屏或错位。
这个功能本质是浏览器帮你做了一次简易静态打包，但它会自动修正 HTML（比如补全 、重排属性顺序），还会把内联样式转成 style 属性，导致和原始源码有细微差异。
适用场景判断：
- 想快速离线看效果、不介意结构微调 → 选
网页，全部 - 需要做源码比对、审计、或调试服务端输出 → 必须用
view-source:+Ctrl+S或curl - 保存的是本地已打开的 HTML 文件（非远程 URL），
另存为就只是复制文件，没任何渲染或修正
真正难的从来不是“怎么点”，而是分清你到底要原始响应、渲染快照，还是带资源的离线包——三者技术路径不同，目的也完全不同。选错一步，后面调试就全偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
