最可靠方式是在「查看页面源代码」独立标签页中按Ctrl+S/Cmd+S保存；原网页标签页“另存为”保存的是JS动态渲染后的DOM快照，非服务器返回的原始HTML源码。
直接保存网页HTML源码为 .html 文件，最可靠的方式不是在原网页上点“另存为”，而是在「查看页面源代码」的独立标签页里按 Ctrl+S（Windows）或 Cmd+S（macOS）。否则你保存的可能是渲染后的 DOM，不是原始 HTML。
为什么不能在原网页标签页里“另存为”？
浏览器在原网页标签页执行“另存为”时，默认保存的是当前 DOM 快照——也就是 JS 动态插入、修改过的内容，甚至可能包含 Shadow DOM 或未加载完成的异步区块。而你真正想存的，通常是服务器返回的原始 text/html 响应体。
- 常见错误现象：
另存为 → 网页, 全部会生成一个文件夹 + 一个.html，但结构混乱、路径错乱，离线打不开 - 更隐蔽的问题：如果网页用了 Service Worker，
另存为可能连 CSS/JS 都没抓全，只存了个空壳 - Firefox 的“查看页面源代码”页里按
Ctrl+S会自动弹出Page Source类型保存选项；Chrome/Edge 则需手动在保存对话框中确认文件类型为Web Page, HTML Only
用开发者工具复制 Elements 内容时要注意什么？
这是取“当前渲染结构”的方式，适合保存已加载完成、含动态内容的快照，但和原始源码不是一回事。它本质是 document.documentElement.outerHTML 的结果。
- 必须右键点击最外层
<html>标签 → 选Copy outerHTML，不能 Ctrl+A 全选 Elements 面板——那样会把<head>里的注释、<script>标签里的内联逻辑也复制进去，还可能混入 DevTools 自动注入的调试节点 - 粘贴后要检查开头是否有
<!DOCTYPE html>，没有就手动补上，否则 IE 或旧版 WebView 渲染会触发怪异模式 - 如果页面用了相对路径引用资源（如
src="js/app.js"），这个结构保存后仍可离线运行——前提是这些文件你一并下载到了同级目录
记事本保存时编码选错会怎样？
中文乱码、emoji 显示为方块、<meta charset="UTF-8"> 失效，基本都是因为用了系统默认的 ANSI 或 GBK 编码保存。记事本不提示，但后果立竿见影。
立即学习“前端免费学习笔记（深入）”；
- Windows 记事本：保存对话框里必须手动点开「编码」下拉菜单，选
UTF-8（不是UTF-8-BOM，BOM 会导致某些 PHP/Node.js 环境解析异常） - VS Code / Sublime Text 等编辑器：默认就是 UTF-8，但要确认右下角状态栏显示的是
UTF-8，不是UTF-16 LE或其他 - 文件名本身别用中文或空格，比如
我的首页.html在某些 CLI 工具里会出问题，建议用index.html或home-page.html
真正容易被忽略的点是：原始 HTML 源码里可能有 <link rel="canonical" href="..."> 或 <base href="...">，它们会影响所有相对路径的解析逻辑。保存后若发现图片/CSS 加载失败，先查这两个标签，而不是急着改 src 和 href。
