浏览器“另存为→网页，全部”是最可靠方式，可自动生成HTML文件及同名资源文件夹并修正路径；其他方法如复制源码、outerHTML或curl仅保存HTML，无法自动获取图片。
保存含图片的HTML源码时，浏览器“另存为→网页，全部”最可靠
直接用浏览器的 Ctrl+S（或菜单“文件→另存为”），在“保存类型”中选 网页，全部(*.html;*.htm)，是唯一能自动下载并关联图片、CSS、JS 等资源的方式。它会生成一个 .html 文件 + 一个同名文件夹（如 example_files/），所有外部资源都放里面，路径由浏览器自动修正。
常见错误现象：只用“查看页面源代码→复制→粘贴到记事本→保存为 index.html”，结果打开后全是空白或断链——因为源码里的 <img src="images/logo.png"> 指向的是服务器路径，本地根本没有那个文件夹和图片。
- 这个操作必须在目标网页**完全加载完成后再执行**，否则 Network 面板里还没加载完的图片不会被一并抓取
- 某些网站用 JS 动态插入图片（比如懒加载），这类图可能不会出现在“网页，全部”里，得配合开发者工具手动补
- 保存后的 HTML 文件里，
src路径会被浏览器自动改成相对路径，例如images/logo.png→example_files/logo_abc123.png，别手动改回去，否则会失效
用开发者工具复制 outerHTML 只能保存结构，不带图片文件
按 F12 打开开发者工具 → Elements 面板 → 右键 <html> 或目标容器 → Copy → Copy outerHTML，再粘贴进编辑器保存为 .html，这只是纯 HTML 字符串快照，不包含任何外部资源文件。
使用场景：仅需保留当前 DOM 快照（比如表单填了一半、JS 修改过的内容），或做临时调试比对；不适合离线查看，因为所有 src 和 href 仍指向原站地址，本地打不开。
立即学习“前端免费学习笔记（深入）”；
- 如果页面用了内联 base64 图片（
src="data:image/png;base64,..."），那这部分图会保留在 HTML 里，可直接离线打开 - 但绝大多数网站不用 base64，所以这种保存方式对图片基本无效
- 想补图片？得手动从 Network 面板找所有
Img请求，逐个右键“Open in new tab”再保存，效率低且易漏
命令行抓取 HTML + 图片需分两步：先取 HTML，再提图 URL 下载
像 wget 或 curl 这类工具默认只拿 HTML 文本，不会自动下载引用的图片。要同步保存，得先解析 HTML 提取所有 src，再批量下载——这已超出“保存源码”的范畴，属于资源采集。
简单可用的 wget 命令（Linux/macOS）：
wget --page-requisites --no-parent --convert-links --restrict-file-names=windows https://example.com/page.html
说明：--page-requisites 会下载 CSS、JS、图片等依赖；--convert-links 把绝对链接转成本地相对路径；但注意：它对 JS 渲染出的图片、background-image、响应式 srcset 支持有限。
- Windows 自带的
wget不一定有，推荐用 Git for Windows 或安装cURL配合脚本 - Python 用户更推荐
requests-html库，它的r.html.absolute_links和session.get(img_url).content组合更可控 - 千万别用
curl https://... > index.html单行命令——它只存 HTML，图片一个都不会下来
手动组织项目结构时，图片路径错位是最常踩的坑
当你把 HTML 源码粘贴进编辑器、另存为 index.html，又单独把图片拖进 images/ 文件夹，却忘了改 HTML 里的 src，浏览器就找不到图。这不是编码问题，是路径管理问题。
正确做法：先建好目录结构（my-site/index.html + my-site/images/），再检查 HTML 中每处 <img src="...">，确保路径与实际位置一致。例如图片在 images/photo.jpg，那标签就得是 <img src="images/photo.jpg">，不能写成 /images/photo.jpg（开头斜杠表示根目录，本地双击打开时无效）。
- VS Code 里装 “Auto Rename Tag” 插件，重命名文件夹时可联动更新 HTML 中的引用路径
- Mac 用户用 TextEdit 保存前务必切到“纯文本”模式，否则存出来是乱码，图片路径看着对，实际是隐藏格式字符
- Windows 用户必须开启“显示文件扩展名”，否则很容易存成
index.html.txt，双击只弹记事本，不渲染页面
