正确保存网页源码需用开发者工具复制后以UTF-8编码另存为.html；原始源码应从Network中Doc请求Save as；curl/wget需加--page-requisites等参数下载完整资源；Save Page WE受Shadow DOM、异步加载等限制；离线打不开多因file://协议限制、绝对路径未转相对、Service Worker报错。
浏览器右键“查看网页源代码”后怎么保存成 .html 文件
直接右键菜单里的“查看网页源代码”只是预览，不提供保存功能——这是新手最常卡住的地方。
正确做法是：打开开发者工具（F12 或 Ctrl+Shift+I），切到 Elements 标签页，按 Ctrl+A 全选，再 Ctrl+C 复制；新建文本文件，粘贴，另存为 index.html，编码选 UTF-8。
- 别用记事本默认的 ANSI 编码保存，中文会变乱码，必须手动选
UTF-8 - 复制的是渲染后的 DOM（可能含 JS 动态插入的内容），不是原始 HTML 源码；要原始源码得用
Network里刷新后找Doc类型请求，点进去右键Save as - 部分网站禁用右键或屏蔽
F12，此时可用命令行工具curl或wget直接抓取：curl -o page.html https://example.com
用 curl / wget 下载 HTML 时丢失 CSS、JS、图片怎么办
单靠 curl 或 wget 命令下载一个 .html 文件，只是抓了 HTML 文本本身，所有 href 和 src 引用的外部资源都不会自动下载——这不是 bug，是设计如此。
想离线能正常打开，必须把整站结构一并拉下来：
wget --recursive --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows https://example.com-
--page-requisites是关键，它会下载 CSS、JS、图片等页面必需资源 -
--convert-links把绝对 URL 改成相对路径，否则本地双击打开时资源 404 -
wget默认不抓跨域资源（比如 CDN 上的字体或 JS），需要加--span-hosts并配合--domains白名单
Chrome 扩展 Save Page WE 为什么有时保存失败
这个扩展本质是注入脚本序列化当前 DOM，再打包成 ZIP。它不走网络请求，所以绕过了一些反爬逻辑，但也有明显局限：
- 遇到用
Shadow DOM封装的内容（如某些 Web Component），可能漏抓内部结构 - 依赖
fetch或XHR异步加载的数据，如果保存时机早于请求完成，就存不到真实内容 - 保存后的
index.html里可能混有内联style和script，体积大且难维护，不适合二次编辑 - 部分网站通过
document.write或iframe动态写入内容，该扩展无法还原原始加载顺序，离线打开可能白屏
保存后的 HTML 离线打不开？检查这三处
不是保存动作失败，而是路径、协议或权限没对上——90% 的“打不开”问题都集中在这几个点。
- 双击打开时浏览器地址栏显示
file:///而非http://，此时多数现代浏览器会拦截XMLHttpRequest和fetch请求，导致空白或报错Failed to load resource: net::ERR_FILE_NOT_FOUND - 资源路径写的是绝对 URL（如
https://cdn.example.com/style.css），离线时自然 404；应确认是否启用--convert-links或手动替换成相对路径 - 有些网站用
Service Worker缓存逻辑，保存下来的 HTML 里仍含注册代码，本地运行会报Only secure contexts can register a ServiceWorker，需手动删掉相关navigator.serviceWorker.register脚本块
离线浏览真正的难点不在“怎么存”，而在“存下来的东西和原网页行为是否一致”。动态渲染、跨域资源、安全上下文限制，这几条线只要碰上一条，就不是改个后缀名能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
