直接保存为.html文件双击打不开主因是编码、路径和资源加载问题：记事本默认ansi编码致中文乱码，须选utf-8（非bom）；file://协议下绝对路径和外链资源失效，需转相对路径并下载全部资源；curl/wget需加--page-requisites等参数才完整抓取；ajax等功能必须用http服务（如npx serve）运行。
直接保存为 .html 文件就能双击打开，但多数人卡在编码、路径和资源加载这三步上——不是打不开，是打开后样式错乱、图片不显示、JS 报错。
用记事本保存时为什么中文变乱码？
记事本默认用 ANSI 编码保存，遇到中文就丢字节。必须手动选 UTF-8，且不能勾选“UTF-8 with BOM”（带签名的 UTF-8 会导致 DOCTYPE 前多出不可见字符，部分浏览器拒解析）。
- 复制 HTML 源码 → 粘贴进记事本 → “文件”→“另存为”
- 在保存对话框中：
文件名输入index.html，保存类型选“所有文件”，编码下拉选“UTF-8”（不是“UTF-8-BOM”） - 若已保存成乱码，用 VS Code 打开 → 右下角点击编码名 → 选“Reopen with Encoding”→“UTF-8”→ 再另存为
保存后图片/CSS/JS 全部 404 怎么办？
HTML 里写的 src="https://cdn.example.com/style.css" 或 href="/css/main.css" 在本地 file:// 协议下根本无法加载：前者跨域被拦，后者路径从根开始找不到本地文件夹。
- 离线使用必须把所有外部资源下载到本地，并改用相对路径，例如
href="css/style.css" - 用浏览器“另存为”→ 选“网页，全部”，它会自动生成
index.html+index_files/文件夹，资源路径已自动转相对 - 若手动处理，检查所有
<link>、<script></script>、<img>标签的href和src，逐个确认对应文件是否真存在于指定相对路径下
curl / wget 下载的 HTML 打不开？关键参数漏了
curl https://example.com > page.html 只抓 HTML 文本，CSS、JS、图片一个都不会带——这不是 bug，是工具默认行为。
- 要用
wget完整下载：wget --page-requisites --convert-links --no-clobber --restrict-file-names=windows https://example.com -
--page-requisites是核心，它强制下载 CSS/JS/图片等必需资源 -
--convert-links把页面内所有绝对 URL 改成相对路径，否则本地双击仍 404 -
curl没有等效参数，非得用它就得配合curl -s https://example.com | grep -o 'src="\([^"]*\)' | sed 's/src="//'这类链式命令手动补资源，不推荐
最容易被忽略的是：本地 file:// 协议下，fetch()、XMLHttpRequest、Service Worker 全部受限，哪怕路径全对、编码全准、资源全在，AJAX 请求照样报 CORS 错误。要测完整功能，必须起本地服务，比如 npx serve 或 Python 的 python3 -m http.server。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
