直接另存为会丢失外部CSS/JS、图片等资源的本地路径，导致404；modulepreload、动态import失效；内联脚本若含fetch/location等API则离线报错；需用wget--convert-links或手动复制outerHTML并补全head信息。
直接用浏览器“另存为”会丢失哪些东西
直接右键 → “另存为”生成的 .html 文件，表面看能打开，但实际常缺关键部分：外部 CSS/JS 路径被转成绝对 URL（比如 https://example.com/css/style.css），本地双击打开时 404；图片路径也一样；更严重的是，现代网页常用 <link rel="modulepreload"> 或动态 import，这些在静态保存里全失效。
真正可用的模板文件，必须满足：所有资源可离线加载、路径相对化、无跨域或运行时依赖。
- 优先用开发者工具的
Elements面板右键 →Copy outerHTML，粘贴到新文件中，再手动补上<head>中的<meta charset="utf-8">和基础<title> - 若页面用了构建工具（如 Vite、Next.js），
另存为几乎没用——它只保存渲染后的 DOM，不包含原始组件结构或数据绑定逻辑 - 检查是否含内联
style或script：如果有，确认它们没调用window.location、fetch或localStorage，否则离线即报错
用 curl + wget 批量抓取并修复路径
适合需要保留多级目录结构（如 /css/main.css、/img/logo.png）的切图归档。关键是让所有引用变成相对路径，且不漏资源。
执行前先禁用 robots.txt 限制（仅限自己站点）：
立即学习“前端免费学习笔记（深入）”；
curl -s https://yoursite.com/index.html | grep -o 'src=["'']\([^"'']*\)[''']' | sed 's/src=["'']//; s/["'']$//' | sort -u
确认资源列表后，用 wget 递归下载：
wget --convert-links --adjust-extension --page-requisites --no-parent --restrict-file-names=windows https://yoursite.com/
-
--convert-links把绝对 URL 改成相对路径，这是核心开关 -
--page-requisites下载 CSS、JS、图片等，但不会抓取<iframe>或跨域名资源 - 下载后检查
index.html里是否有data-src、srcset或picture里的路径未被转换——这些需手动替换为相对路径
VS Code 插件快速生成可复用模板
如果你只是想把某段 HTML（比如一个卡片组件）抽出来当模板复用，别存整页，直接用插件固化结构。
- 装
Emeraldwalk.RunOnSave插件，配合脚本自动把选中 HTML 片段转成带占位符的模板：{{title}}、{{content}}，避免硬编码 - 用
bradlc.vscode-tailwindcss时注意：它默认压缩 class 名（如mt-2→mt-2不变），但若你开了tailwind.config.js的content路径没包含模板文件夹，class 就会丢失——务必加进数组里 - 保存为
.html没问题，但若后续要注入数据，建议改用.njk（Nunjucks）或.hbs（Handlebars）扩展名，编辑器和构建工具更容易识别模板语义
保存后必做的三件事验证是否真能当模板用
很多人以为文件存下来就完事了，结果一嵌入新项目就样式错乱或控制台报错。真正可靠的模板，必须过这三关：
- 双击本地打开
index.html，检查控制台有没有net::ERR_FILE_NOT_FOUND或Access to script at 'file:///...' from origin 'null' has been blocked—— 后者说明用了fetch或模块化脚本，不能直接双击运行 - 把该文件复制到另一个空文件夹，用
python3 -m http.server 8000启一个本地服务，再访问http://localhost:8000/index.html，看资源是否全部加载成功 - 搜索文件里是否存在
document.write、eval(、new Function(—— 这些在 CSP 策略下会被拦截，一旦你的目标项目启用了Content-Security-Policy，模板立刻失效
路径相对化不是终点，执行环境一致性才是模板能否复用的分水岭。
