能，但仅限服务端渲染或静态写入的<style>；JS动态插入的需在Elements面板中复制outerHTML获取。
直接保存网页 HTML 源码时，<style> 标签里的 CSS 会被一并保留；但内联样式（即 style 属性）本身已是 HTML 的一部分，无需额外“提取”——它就在你复制的 outerHTML 或保存的源码里。真正容易丢的是动态生成的样式或被 JS 覆盖后的最终计算值。
用浏览器“查看页面源代码”能拿到原始 <style> 吗？
能，但有前提：该 <style> 是服务端渲染或静态写在 HTML 中的。如果样式由 JS 动态插入（比如 document.head.appendChild(styleEl)），源代码里就看不到它。
- 按
Ctrl+U（Windows/Linux）或Cmd+U（macOS）打开的“页面源代码”是服务器返回的原始 HTML，含原始<style>，不含 JS 运行后新增的 - 想确认是否包含，搜索页面源码中是否有
<style字符串；若没找到，说明它是运行时注入的 - 这种情况下，必须切到开发者工具的
Elements面板，手动找<style>节点再右键Copy → Copy outerHTML
保存内联样式（style 属性）需要特殊处理吗？
不需要。只要保存的是当前 DOM 快照（即 outerHTML），所有元素上的 style 属性都会原样保留——包括 JS 动态设置的 el.style.color = 'red' 产生的内联样式。
- 打开开发者工具 →
Elements面板 → 右键<html>→Copy → Copy outerHTML - 粘贴进文本编辑器，保存为
.html文件，编码选UTF-8（不要带 BOM） - 注意：如果页面用了 CSS-in-JS 库（如 Emotion、Styled Components），部分内联样式可能是通过
data-styled属性或 shadow DOM 注入的，此时outerHTML不会包含最终生效的样式规则，需配合getComputedStyle()手动抓取
为什么保存后内联样式不生效？常见路径与编码陷阱
不是样式丢了，而是外部资源加载失败或编码错乱导致浏览器解析异常。
立即学习“前端免费学习笔记（深入）”；
-
url(./img.png)这类相对路径在内联样式里仍有效，但如果你把 HTML 拷贝到另一个目录，图片就 404 —— 内联样式不改路径基准，它还是相对于当前 HTML 文件位置解析 - 如果原始 HTML 是 UTF-8 with BOM，而你用记事本另存为 UTF-8，可能悄悄加了 BOM 头，导致部分浏览器拒绝解析
<style>块开头的 CSS 规则 - 某些 CMS 或前端框架会在
style属性里插入换行或多余空格（如style="color: red;\n font-size: 16px;"），虽然合法，但老旧浏览器可能截断，建议用正则清理：el.getAttribute('style')?.replace(/\s+/g, ' ').trim()
最易被忽略的一点：内联样式优先级虽高，但它只作用于单个元素；如果你保存后发现某段文字没变红，先检查是不是父级元素用 !important 覆盖了它，而不是保存环节出了问题。
