保存html文件时必须选utf-8编码，否则记事本默认ansi会导致中文、emoji等变乱码；右键“查看网页源代码”无法直接保存，需ctrl+u全选复制后粘贴到编辑器另存为.html；elements面板复制的是渲染后dom而非原始源码，调试服务端逻辑应从network中doc请求保存；离线双击打开失败多因绝对路径、外链资源或file://协议限制，需改相对路径并本地化所有依赖。
保存时编码选 UTF-8 是硬性要求
记事本默认用 ANSI 编码保存，中文标签、文字、注释全会变乱码，浏览器打开后显示为方块或问号。UTF-8 是唯一稳妥选择，尤其当源码含中文、emoji 或特殊符号时。VS Code、Notepad++ 等编辑器默认就是 UTF-8，但记事本必须手动在「另存为」对话框底部下拉菜单里选中它——别信“默认”。
右键“查看网页源代码”不能直接保存？这是真限制
Chrome/Firefox 的右键菜单点出的源码页（view-source: 协议）本身不提供保存按钮，按 Ctrl+S 会保存当前页面渲染结果，不是源码。正确路径是：
- 按
Ctrl+U打开源码页 - 再按
Ctrl+A全选 →Ctrl+C复制 - 粘贴进文本编辑器，再另存为
index.html
注意：这个操作拿到的是服务器返回的原始 HTML，不含 JS 动态插入的内容（比如 React 渲染后的 DOM）。
Elements 面板复制的是渲染后 DOM，不是原始源码
开发者工具（F12）→ Elements 标签页里看到的 HTML，是浏览器解析 + 执行 JS 后生成的最终结构。如果你要备份“用户实际看到的页面”，它更准确；但若想分析服务端逻辑或调试 SSR，就得去 Network 标签页，刷新后找 Doc 类型请求，右键 → Save as。
常见误操作：
- 把
Elements里的内容当成原始源码保存，结果发现<script></script>标签里全是空的（因为已被执行并移除） - 没注意
Network中 Doc 请求被缓存，没禁用缓存就刷新，导致保存的是旧版本
离线打不开？大概率是路径和协议问题
双击本地 .html 文件用 file:// 协议打开时，以下三类问题最常导致空白或样式丢失：
- CSS/JS 引用的是绝对路径（如
src="/js/app.js"），应改为相对路径（src="js/app.js"）并确保对应文件已下载到本地同级目录 - 图片用了
https://外链，离线自然加载失败；需手动下载并替换为本地路径 - 页面依赖
Service Worker或跨域 API，file://下直接报错，此时必须用本地服务器（如python3 -m http.server）启动才能正常运行
真正能“双击即用”的 HTML 副本，前提是它不依赖外部网络、不调用非同源 API、所有资源都已本地化且路径写对——这点比保存动作本身难得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
