“查看页面源代码”得到的是服务器返回的原始html，不含js渲染后的内容；真实dom结构只存在于开发者工具elements面板中，需复制outerhtml或用document.body.innerhtml提取。
直接保存 内容，不能靠右键“查看源代码”——那里面是原始 HTML，不含 JS 渲染后的内容；必须用开发者工具复制 outerHTML 或手动提取。
为什么“查看页面源代码”得不到真实的 body？
浏览器右键 → “查看页面源代码”打开的是服务器返回的原始 HTML 字符串， 里可能空空如也，或只有占位符（比如 <div id="root"></div>）。现代网页靠 JavaScript 动态注入内容，真实 DOM 结构只存在于 Elements 面板中。
- 原始源码里
可能只有一行<script src="app.js"></script> - Elements 面板里的
才是 JS 执行后最终渲染出的结构 - 想存“当前看到的页面主体”，必须从 Elements 复制，不是从源码页复制
用 Chrome/Firefox 开发者工具提取完整 body 内容
这是最常用、最可靠的方式，适用于 React/Vue/Angular 等框架渲染后的页面。
- 打开目标网页，按
F12或Ctrl+Shift+I调出开发者工具 - 切换到
Elements标签页，按Ctrl+F搜索，定位到 <code>标签（通常是最外层第二个节点） - 右键该
标签 →Copy→Copy outerHTML - 粘贴到 VS Code / 记事本等编辑器中，删掉开头的
和结尾的（保留中间所有内容） - 如果需要保留
标签本身，就不用删——看后续用途：嵌入模板时通常不要外层标签
用 JavaScript 控制台一键提取并下载 body.innerHTML
适合批量操作或不想手动复制粘贴的场景。注意：只提取 innerHTML，不包含 标签自身。
- 在开发者工具的
Console面板中执行：copy(document.body.innerHTML)
- 然后直接
Ctrl+V粘贴到编辑器，就是干净的 body 子内容 - 若要连同
标签一起复制，改用：copy(document.body.outerHTML)
- 想自动下载为文件？执行以下代码（兼容 Chrome/Firefox）：
const blob = new Blob([document.body.innerHTML], {type: 'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'body-content.html'; a.click();
保存时容易忽略的三个细节
很多人存完一打开是乱码或样式丢失，问题往往出在这几步。
- 编码必须选
UTF-8：记事本另存为时，“编码”下拉菜单务必选UTF-8，不是 ANSI 或 GBK - 路径引用会失效：复制出来的 HTML 若含
<img src="images/logo.png">，离线打开时图片不显示——因为没同步资源文件夹 - 内联脚本可能报错：如果 body 里有
<script>fetch(...)</script>，保存后双击打开会触发 CORS 错误（file://协议限制），此时需本地起服务或改用data:URL
真正要复用 body 片段，别只图快复制粘贴；先确认它是静态结构还是依赖运行时状态——后者即使保存下来，脱离原始上下文也可能无法还原效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
