保存网页需分场景：ctrl+u保存静态html须设utf-8编码；elements面板copy outerhtml可存js渲染后dom；浏览器“另存为”生成html+文件夹但需保持同级目录；curl仅抓html适合自动化但无资源。
用 Ctrl+U 查看源码后直接保存，但注意编码必须选 UTF-8
Ctrl+U 打开的是原始 HTML 源码（未执行 JS 的静态版本），适合存档、审计或对比前后端差异。但很多人保存后双击打开是乱码——问题几乎都出在编码上。
关键操作步骤：
- 按
Ctrl+U打开源码页 →Ctrl+A全选 →Ctrl+C复制 - 打开记事本或 VS Code，
Ctrl+V粘贴 → “文件 → 另存为” - 文件名末尾必须带
.html（如backup.html） -
编码务必手动选
UTF-8（记事本默认是 ANSI，VS Code 默认是 UTF-8 但需确认右下角状态栏）
如果跳过编码设置，中文、emoji 或特殊符号会变成问号或方块，且无法通过改后缀修复。
Elements 面板复制 outerHTML，适合保存 JS 渲染后的最终 DOM
有些网页内容由 JavaScript 动态插入（比如 React/Vue 页面、评论区、懒加载图片），Ctrl+U 看不到这些内容。这时得用开发者工具的 Elements 面板。
操作要点：
- 按
F12打开开发者工具 → 切到Elements标签页 - 找到最外层的
标签 → 右键 →Copy→Copy outerHTML - 粘贴到编辑器 → 保存为
.html文件，编码仍为UTF-8
注意：Copy outerHTML 复制的是当前内存中的 DOM 快照，包含所有 JS 修改结果，但不包含原始 <script></script> 标签里的逻辑，也不保证能离线运行（比如依赖 CDN 的 JS 可能 404）。
用 “另存为” 保存完整网页，自动打包资源但路径易出错
想离线打开时图片、CSS、JS 全都有？用浏览器原生的“网页，完整”模式最省事，但它生成两个东西：page.html + page_files/ 文件夹。
常见陷阱：
- 必须保持
page.html和同名_files文件夹在同一级目录，否则资源加载失败 - 保存后双击打开，地址栏显示
file://协议 → 某些网站因安全策略（如CORS、Service Worker）会白屏或报错 - 部分动态资源（如 iframe 加载的内容、fetch 异步拉取的数据）不会被保存
- 若页面用了绝对路径引用资源（如
src="/js/app.js"），本地打开时会请求根目录，实际应改为相对路径
简单验证是否保存成功：打开 page_files 文件夹，确认里面有 .css、.js、.png 等文件，而不是空的。
命令行用 curl 抓取原始 HTML，适合自动化但不带资源
如果你要批量抓取几十个页面源码，或者写脚本做备份，curl 是最轻量可靠的选择。
基础命令：
curl https://example.com > index.html
必须注意的细节：
-
curl只下载 HTML 文本本身，href和src引用的 CSS/JS/图片一个都不会下载 - 如果目标站有反爬（如需要 User-Agent、Cookie 或 JS 渲染），
curl会返回空白页或 403，此时得换Puppeteer或加--user-agent参数 - 中文 URL 要先
urlencode，否则可能报错；含查询参数的 URL 建议用单引号包裹，避免 shell 解析错误 - 想保存到指定文件夹，先确保目录存在：
mkdir -p ./backup && curl https://example.com > ./backup/index.html
真正离线可用的完整保存，从来不是单靠“保存 HTML”这一步就能闭环的——它只是起点，后续还得检查编码、路径、协议、资源完整性，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
