直接双击HTML文件能打开但样式错乱、图片不显示、JS报错，主因是编码不匹配（记事本默认ANSI而网页声明UTF-8）、路径错误（file://下/被解析为磁盘根目录）及资源加载受限（CORS、离线无法加载CDN）。
直接保存为 .html 文件就能双击打开，但多数人卡在编码、路径和资源加载这三步上——不是打不开，而是打开后样式错乱、图片不显示、JS 报错。
用记事本保存时为什么中文变乱码？
记事本默认用 ANSI 编码保存，而现代网页基本都声明 <meta charset="UTF-8">。一旦编码不匹配，中文就成方块或问号。
- 必须在“另存为”对话框里手动点开“编码”下拉菜单，选
UTF-8（不是“UTF-8-BOM”） - 别信“自动检测”，记事本根本不会真检测，它只按文件扩展名猜
- VS Code、Sublime 等编辑器默认就是 UTF-8，粘贴后直接保存更省心
保存的是 Elements 里的代码，和原始 HTML 有啥区别？
开发者工具 Elements 面板里复制的是当前渲染后的 DOM，已执行 JS、补全了闭合标签、可能含 Shadow DOM 内容；而原始 HTML 是服务器返回的“裸源码”，没被浏览器加工过。
- 要还原页面初始状态（比如调试 SSR 或 SEO），得去
Network标签页刷新页面，找Type = doc的请求，右键 →Save as - 如果页面大量依赖 JS 渲染（如 React/Vue 单页应用），
Elements复制的内容反而更接近用户看到的样子 -
copy outerHTML只复制选中节点及其子树，容易漏掉<head>里的 meta、link、script
双击打开后 CSS/JS 不生效、图片 404 怎么办？
本地用 file:// 协议打开时，浏览器会严格校验路径，且不支持跨域请求。常见问题不是代码写错了，而是路径没对齐。
立即学习“前端免费学习笔记（深入）”；
- 检查所有
src和href：绝对路径（如https://cdn.example.com/style.css）能联网加载，但离线就断；相对路径（如./css/main.css）必须确保对应文件真实存在且目录结构一致 - 别用“另存为 → 网页，全部”，它生成的文件夹结构混乱，CSS 里写的
url(../img/logo.png)在新路径下极易失效 - 本地测试交互功能（如
fetch()加载 JSON）会因 CORS 被拒，此时得起一个本地服务：npx serve或python3 -m http.server 8000
真正麻烦的从来不是“怎么保存”，而是保存之后要不要改路径、要不要补资源、要不要换协议跑——这些细节不处理，哪怕代码一字不差，页面也大概率是半残的。
