最稳妥方式是右键“查看页面源代码”后按ctrl+s另存为.html文件：打开网页→右键选“查看页面源代码”或按ctrl+u→新标签页中按ctrl+s→输入文件名并手动添加.html扩展名→保存类型选“所有文件”→确保编码为utf-8。
直接保存 HTML 源码最稳妥的方式，是用浏览器「查看页面源代码」后另存为 .html 文件——不是在原网页上右键“另存为”，也不是复制 Elements 面板内容，否则你拿到的可能是被 JS 修改过的 DOM，不是原始服务器返回的 HTML。
怎么用浏览器保存原始 HTML 源码（不改设置、零配置）
这是最干净、最可靠的方法，适合所有静态页面和多数动态页面的初始源码备份：
- 在目标网页空白处右键 → 选「查看页面源代码」（Chrome/Edge）或「查看源代码」（Firefox）；快捷键是
Ctrl+U（Windows）或Cmd+Option+U（Mac） - 新打开的标签页里全是纯文本，此时按
Ctrl+S（Windows）或Cmd+S（Mac）调出保存对话框 - 文件名填
xxx.html（比如github-homepage.html），务必手动输入扩展名 - 保存类型选「所有文件」（记事本）或「Web Page, HTML Only」（Chrome/Edge）；Firefox 会默认显示为「Page Source」
- 编码选
UTF-8（若选项中有），避免中文乱码
常见错误：在原网页标签页里直接「另存为」→ 选了「网页，全部」→ 结果生成一个 .html 文件 + 同名文件夹 → 这是带资源的完整快照，不是单个源码文件。你要的是前者，不是后者。
Elements 面板复制 outerHTML 适合什么场景
当你需要保存的是「当前实际渲染出来的结构」，比如页面由 React/Vue 渲染、或者有大量 JS 动态插入内容，原始源码里根本没这些节点，那就得用 Elements：
- 按
F12打开开发者工具 → 切到「Elements」标签页 - 右键最外层的
标签 → 「Copy」→「Copy outerHTML」 - 粘贴进 VS Code / 记事本 → 另存为
rendered.html，编码设UTF-8 - 注意：这类文件里可能含内联样式、动态 class、临时 ID，且外部资源路径（如
src="https://cdn.example.com/app.js"）仍是线上地址，离线打不开 JS/CSS
它不是原始源码，而是快照。别把它当「源码备份」交出去，除非你明确知道要的是渲染后状态。
用 curl 或 Python 保存时最容易踩的坑
命令行或脚本适合批量、自动化、无浏览器环境，但默认行为常让人误以为“成功了”，其实没拿到真实内容：
-
curl https://example.com > page.html默认不处理重定向，遇到 301/302 就停住，得加-L参数 - 很多网站反爬，
curl直接请求会返回 403 或空页，需加-H "User-Agent: Mozilla/5.0" - Python 的
requests.get(url)若没检查response.status_code == 200，可能把 502 页面也存下来了 - JS 渲染的页面（如知乎首页、掘金文章页），
curl和requests拿到的只是骨架 HTML，不含正文——这不是工具问题，是服务器根本没发那些内容
简单判断：把命令行下载的 page.html 用文本编辑器打开，搜索关键词（比如页面标题文字）。搜不到？说明你没拿到有效内容，得换方案（比如用 Playwright/Puppeteer 渲染后抓取）。
保存后打不开或乱码？先看这三处
双击打开 .html 文件发现空白、报错、中文变方块？别急着重来，90% 是以下三个地方出问题：
- 文件扩展名是不是真的叫
xxx.html？记事本默认会偷偷加.txt，看起来是index.html，实际是index.html.txt—— 开启 Windows 显示文件扩展名再确认 - 有没有在
里写<meta charset="UTF-8">？没有的话，即使你用 UTF-8 编码保存，浏览器也可能按 GBK 解析中文，导致乱码 - 图片或 CSS 路径是绝对 URL（如
src="https://i.example.com/logo.png"）？那离线打开当然加载不了。想离线可用，要么下资源改成本地相对路径，要么用SingleFile浏览器插件一键打包
真正麻烦的不是保存动作本身，而是保存之后你是否清楚这个文件的“身份”：它是原始源码？是渲染快照？还是带资源的完整副本？搞混这三者，后面调试、复用、交付都会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
