Elements面板中右键最顶层<html>节点选择“Copy outerHTML”才是正解，可获取完整渲染后DOM；若界面受限，可在Console执行copy(document.documentElement.outerHTML)绕过限制。
能直接复制，但必须选对节点、用对命令，否则拿到的是残缺结构或乱码。
Elements 面板里右键复制 outerHTML 才是正解
很多人在 Elements 面板里点中 <html> 标签后按 Ctrl+C，结果只复制了当前可视区域的 HTML 片段——那是浏览器做了懒加载或折叠后的视图，不是完整 DOM。
- 务必先找到最顶层的
<html>节点（通常在树状结构第一行），右键它 - Chrome/Edge 选
Copy→Copy outerHTML；Firefox 是Copy→Copy outerHTML（不是 “Copy element”） - 如果页面用了 Shadow DOM 或 Web Component，
outerHTML可能不包含内部封装内容，此时得手动展开 shadow-root 后再复制对应节点 - 别用
Copy innerHTML，它会漏掉<head>和<html>属性（比如lang、class）
复制后保存为 .html 文件必须设 UTF-8 编码
粘贴到记事本再保存，很容易默认用 ANSI 编码，中文、emoji、特殊符号全变问号或方块。
- 用 VS Code / Sublime Text / Notepad++ 等编辑器打开粘贴内容，保存前确认右下角显示
UTF-8（不是UTF-8 with BOM，BOM 会导致某些服务器解析异常） - Windows 自带记事本：保存时点击“编码”下拉框，强制选
UTF-8，不要信默认选项 - 文件名末尾必须是
.html，不能是.txt或无后缀；双击打开时浏览器才按 HTML 渲染 - 如果原网页有相对路径资源（如
src="js/app.js"），保存成单文件后这些路径会失效——这不是复制问题，是结构依赖问题
document.documentElement.outerHTML 在控制台执行更可靠
有些网站禁用右键或劫持了开发者工具菜单，这时 Elements 面板右键可能失灵。控制台执行 JS 是绕过限制的通用方案。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，切到
Console标签页，输入：copy(document.documentElement.outerHTML)，回车 - 这行代码直接把完整渲染后 DOM 的字符串写入剪贴板，不依赖界面交互
- 注意：如果页面还没加载完就执行，可能拿到空
<body>或骨架屏 HTML；建议等DOMContentLoaded触发后再运行 - 别用
document.body.innerHTML，它不含<head>，SEO 相关标签、meta、link 全丢失
真正容易被忽略的点是：复制的是「当前时刻的 DOM 快照」，不是原始 HTML。如果页面大量依赖 JS 动态插入内容（比如 React/Vue 应用），你复制到的已经是框架渲染后的结果；而用 Ctrl+U 查看源代码拿到的，才是服务端吐出的初始 HTML——两者可能完全不同。
