不会丢，但只保留服务器返回的原始HTML，不含JS动态插入或修改的style属性；Elements面板Copy outerHTML才能获取“所见即所得”的完整内联样式。
直接用浏览器“查看页面源代码”会丢内联样式吗
不会丢，但只保留服务器返回的原始 HTML —— 也就是没被 JavaScript 动态插入或修改过的 style 属性。如果你看到的页面颜色、间距、字体是靠 JS 渲染后才加上的，那右键 → “查看页面源代码”（Ctrl+U）拿到的内容里就没有这些。
常见错误现象：保存后打开本地文件，文字变默认黑宋体、按钮没了圆角、表格边框消失 —— 很可能就是只抓了初始 HTML，没捕获 JS 运行后的最终 DOM 状态。
- 适用场景：页面纯静态，所有
style="..."都写在原始 HTML 里 - 不适用场景：React/Vue 渲染页、带懒加载样式的后台管理界面、用 JS 注入主题色的博客
- 验证方法：打开开发者工具 → Elements 标签页，展开任意元素，看
style属性值是否和你在源码页（Ctrl+U）里看到的一致
Elements 面板复制 outerHTML 才能保全动态内联样式
这才是真正“所见即所得”的方式：Elements 面板显示的是当前浏览器实际渲染出的完整 DOM，包括所有 JS 插入/修改过的 style 属性、class 名、甚至临时添加的 data- 属性。
操作时容易踩的坑：Copy → Copy element 只复制选中节点；必须右键最外层 <html> 或 <body> 节点，选 Copy outerHTML，否则漏内容。
立即学习“前端免费学习笔记（深入）”；
- 步骤：F12 → Elements → 左上角点击选择器图标 → 点击页面任意位置 → 在 DOM 树中找到高亮的节点 → 右键 →
Copy→Copy outerHTML - 注意：如果页面用了 Shadow DOM，部分内联样式可能藏在
#shadow-root里，需要手动展开并复制对应节点 - 性能影响：对超长页面（比如含几千行表格的报表），复制整个
<html>outerHTML 可能卡顿，可改用<body>+ 手动补<head>中关键style标签
SingleFile 扩展自动内嵌所有样式资源，省去路径修复
当网页依赖外部 CSS 文件、Web Font 或远程图片时，单纯复制 HTML 会导致本地打开后样式断裂。这时候 SingleFile 不是“可选”，而是刚需 —— 它会把所有 link[rel=stylesheet]、style 标签内容、img[src] 的 base64 编码全部塞进一个 HTML 文件里。
为什么不用自己写脚本做这事？因为内联样式常和外部 CSS 优先级交织，SingleFile 会智能合并计算后的最终样式值（比如把 font-size: clamp(1rem, 2.5vw, 1.5rem) 替换成当前视口下的实际像素值），而手动处理极易漏掉媒体查询生效后的结果。
- 安装后：打开目标页 → 点击浏览器工具栏
SingleFile图标 → 点“保存” → 自动生成单个.html文件 - 兼容性：Chrome/Firefox/Edge 均支持；Safari 需用 macOS 版专用客户端
- 限制：遇到 CSP 严格禁止内联脚本的站点（如某些银行页面），可能无法注入 base64 图片，此时会回退为保留原始
src，需联网才能显示
保存后打开空白或样式错乱？重点检查这三处
即使复制了完整的 outerHTML 或用了 SingleFile，本地双击打开仍可能异常。根本原因不是代码错了，而是浏览器安全策略或路径解析逻辑变了。
最容易被忽略的其实是相对路径和协议处理 —— 比如原网页通过 https://example.com/style.css 加载样式，保存成本地文件后，这个 URL 依然存在，但浏览器拒绝跨协议加载（file:// 协议下所有网络请求默认被拦）。
-
<script src="js/app.js"></script>：本地打开时，浏览器尝试从file:///path/to/js/app.js加载，路径错就 404 -
<link href="/css/main.css" rel="stylesheet">：开头的/会让浏览器去找磁盘根目录，不是项目文件夹根目录 -
background: url(images/bg.png)：CSS 里的相对路径，是以 CSS 文件所在位置为基准，不是 HTML 文件位置
复杂点在于：SingleFile 虽然把 CSS 内容搬进来了，但如果原 CSS 里还有 @import 或 url() 引用其他资源，它不一定全部递归内嵌 —— 尤其是跨域或带 query 参数的 URL，得手动检查生成文件里是否残留了未处理的 url(...)。
