怎么保存含有图片的HTML源码？图片与代码同步保存方法-html教程-PHP中文网

浏览器“另存为→网页，全部”是最可靠方式，可自动生成html文件及同名资源文件夹并修正路径；其他方法如复制源码、outerhtml或curl仅保存html，无法自动获取图片。

怎么保存含有图片的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 面板 → 右键或目标容器 → 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，再批量下载——这已超出“保存源码”的范畴，属于资源采集。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

简单可用的 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（开头斜杠表示根目录，本地双击打开时无效）。