1、通过开发者工具复制outerhtml并保存为.html文件;2、使用浏览器“另存为”功能完整保存网页及资源;3、利用cURL或wget命令行工具抓取源码;4、在控制台运行JavaScript脚本自动下载页面源码。

如果您需要对网页的HTML源码进行备份,以便后续恢复或迁移使用,则可以通过多种方式将当前页面的源代码保存为本地文件。以下是几种实用的操作方法:
一、使用浏览器开发者工具保存源码
通过浏览器内置的开发者工具可以查看并复制完整的HTML结构,适合需要精确控制保存内容的场景。
1、在目标网页上右键点击,选择“检查”或“审查元素”,打开开发者工具。
2、在“Elements”标签页中找到最外层的 <html> 标签,右键点击该标签。
立即学习“前端免费学习笔记(深入)”;
3、选择“copy” → “Copy outerHTML”以复制整个页面的HTML代码。
4、打开任意文本编辑器(如记事本、vs code等),粘贴复制的内容。
5、将文件保存为 .html 扩展名,例如“backup_page.html”。
二、直接另存为网页文件
利用浏览器的“另存为”功能可快速保存当前页面及其资源,适用于完整保留样式和图片的情况。
1、在浏览器菜单中点击“文件” → “另存为”或使用快捷键 Ctrl + S。
2、在弹出的保存窗口中选择保存位置。
3、将“保存类型”设置为 “网页,全部 (*.html;*.htm)” 以包含相关资源文件。
4、点击“保存”按钮,浏览器会生成一个HTML文件及配套的资源文件夹。
三、使用命令行工具抓取并保存
对于熟悉命令行操作的用户,可通过工具如curl或wget获取远程网页源码并存储为本地文件。
1、打开终端或命令提示符窗口。
2、输入以下命令之一执行下载操作:
   curl -o backup.html https://example.com
   wget -O backup.html https://example.com
3、确认当前目录下已生成名为 backup.html 的文件,并可随时打开查看。
四、通过JavaScript脚本自动导出
在浏览器控制台运行脚本能动态生成并下载当前页面的HTML源码文件。
1、按下F12打开开发者工具,切换到“console”面板。
2、粘贴以下JavaScript代码并回车执行:
(() => { const blob = new Blob([document.documentElement.outerHTML], { type: ‘text/html’ }); const url = URL.createObjectURL(blob); const a = Object.assign(document.createElement(‘a’), { href: url, download: ‘page_backup.html’ }); a.click(); })();
3、浏览器将自动触发下载,文件名为 page_backup.html。