根本原因是保存的html非离线可用结构：用“查看页面源代码”+ctrl/cmd+s保存最可靠，wget需加--page-requisites和--convert-links，复制elements面板outerhtml得手动处理路径与协议问题。
直接保存网页源码为单个 .html 文件，却双击打不开、样式丢失、图片不显示——根本原因不是操作错了，而是你保存的压根就不是“能离线跑”的完整结构。
用「查看页面源代码」+ Ctrl+S 保存最可靠
这是获取原始 HTML 源码（服务端返回的未渲染文本）最快且兼容性最好的方式。关键在入口和保存动作必须匹配：
- 必须在「查看页面源代码」新标签页里按
Ctrl+S（Windows）或Cmd+S（macOS），不能在原网页标签页里点「另存为」 - 保存类型选「Web Page, HTML Only」（Chrome/Edge）或「Page Source」（Firefox），别选「Web Page, Complete」——那会生成文件夹，不是单个
.html - 如果网站用了 CSP 或禁用了右键/F12，这个方法会失败，得换命令行
curl / wget 下载后离线打不开？缺 --page-requisites
单条 curl -o page.html https://example.com 只抓 HTML 文本，所有 src 和 href 引用的资源（CSS、JS、图片）全丢，本地打开必然 404。
- 要离线可用，
wget必须加：--page-requisites --convert-links --restrict-file-names=windows -
--convert-links把https://example.com/style.css改成style.css，否则 file:// 协议下路径无效 -
curl本身不支持自动下载依赖，想用它就得配合脚本逐个抓取link/script/img的href/src
Elements 面板复制的是 DOM，不是源码
按 F12 → 切到 Elements → 右键 → Copy outerHTML，得到的是 JS 执行后的真实 DOM 结构，含动态插入内容，但可能混入浏览器注入的调试属性（如 jscontroller）、丢失原始注释、甚至包含 Shadow DOM 内容（Save Page WE 类插件也抓不到）。
- 适合保存「当前看到的效果」，比如 SPA 页面加载完后的快照
- 不适合做源码分析、SEO 审查或备份原始结构
- 复制后务必用 UTF-8 编码保存，否则中文变
file:// 协议下资源 404 的三个硬坑
即使 HTML 文件和资源都下载到了本地，双击打开仍报错，大概率卡在这三处：
- 路径写死为绝对 URL：
<link href="https://cdn.example.com/main.css">→ 必须改成相对路径或本地副本 - Service Worker 注册代码没删：
navigator.serviceWorker.register(...)在file://下直接抛SecurityError - 跨域 AJAX 或 fetch 调用残留：本地打开时请求被浏览器拦截，控制台报
CORS错误，但页面可能看起来“还行”
真正离线能用的 HTML 副本，不是简单复制粘贴就能成的；它要求你明确区分「原始源码」和「渲染后 DOM」，并主动处理路径、协议、运行时依赖这三层断裂点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
