必须启用mhtml保存功能：在chrome://flags/#save-page-as-mhtml中启用并重启浏览器，或直接输入chrome://save-page/触发保存；mhtml可完整嵌入html、css、图片、字体等所有资源，确保断网下精准还原排版、颜色、字体及响应式布局。
要在断网状态下准确还原网页的排版、颜色、字体和响应式布局，必须确保CSS样式被完整嵌入或可靠关联，仅保存HTML骨架会导致页面变成纯文字列表。
启用MHTML保存功能（推荐首选）
Chrome原生支持MHTML格式，它会自动将HTML、内联CSS、外部CSS文件、图片、字体等全部编码打包进单个文件，无需额外配置资源路径。
1、在地址栏输入 chrome://flags/#save-page-as-mhtml 并回车。
2、在搜索框中键入 Save Page as MHTML，找到对应实验性选项。
3、点击下拉菜单，选择 Enabled。
4、点击页面右下角的 Relaunch 按钮重启浏览器——这一步不可跳过，否则后续菜单中不会出现MHTML选项。
用MHTML方式保存当前网页
启用后，所有后续保存操作都会默认包含全部CSS资源，包括@import引入的样式表和字体文件（如woff2），这是“另存为HTML”做不到的。
方法一：菜单操作
打开目标网页 → 点击右上角三点菜单 → 选择“另存为” → 在“保存类型”中选“网页，单个文件(*.mhtml)” → 指定位置并保存。
方法二：快捷命令（免重启判断）
打开网页后，在地址栏直接输入 chrome://save-page/ 并回车 → 弹出对话框时，保存类型已自动锁定为MHTML → 点击保存即可。
注意：该命令在Chrome 86+版本中有效，当前稳定版（2026年9月）已全面支持。
验证CSS是否真正生效
双击刚保存的.mhtml文件 → Chrome自动打开 → 检查以下三项：
① 页面文字是否保持原始字号与行高；
② 按钮、卡片等元素是否有圆角、阴影、渐变色；
③ 切换窗口宽度时，导航栏是否收缩为汉堡菜单——若以上全部正常，说明CSS已完整嵌入。
如果发现某处排版错乱或颜色丢失，大概率是网页使用了动态注入CSS（如JS生成style标签）或跨域字体，此时需改用SingleFile扩展补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
