直接保存为.html文件需避开记事本三大陷阱：选“所有文件”类型、手动输完整文件名（如page.html）、编码设UTF-8；否则生成的不是有效网页文件，导致双击无反应、样式丢失或图片不显示。
直接保存为 .html 文件就能双击打开，但多数人卡在「文件没反应」「样式全丢」「图片不显示」——根本原因不是代码错，而是保存动作本身出了问题。
用记事本另存为.html时必须关掉三个默认陷阱
Windows 记事本默认会偷偷加 .txt 后缀、用 ANSI 编码、把文件类型设成「文本文档」。这三步错一个，生成的就不是网页文件。
- 粘贴完 HTML 源码后，点「文件 → 另存为」，在「文件名」框里**手动输入完整名称**，例如
page.html（不能只输page） - 「保存类型」下拉菜单必须选「所有文件」，不是「文本文档」或「UTF-8 文本文档」
- 「编码」选项选
UTF-8（不是 ANSI 或 Unicode），否则中文标签或注释可能乱码 - 保存后检查文件图标：如果是空白文档图标，说明后缀没生效；应是浏览器图标或带
html字样的图标
用 VS Code 或 Sublime 保存时别信「自动补全」
这些编辑器常默认把新文件当纯文本处理，新建文件粘贴 HTML 后，即使你手输 .html，也可能因未显式设置语言模式导致缩进/格式化出错，间接影响后续调试。
- 粘贴 HTML 后，右下角状态栏点击当前语言标识（如
Plain Text），选HTML - 保存前确认右下角显示
UTF-8编码，不是UTF-8 with BOM（BOM 会导致部分浏览器解析失败） - 如果源码含
<script>或内联样式，建议保存后用浏览器打开，按F12看 Console 是否报Access to script at 'file://...' is blocked——这是正常现象，说明你在本地双击运行，不是服务器环境
“另存为网页，全部”生成的文件夹为什么打不开？
浏览器菜单里的「另存为 → 网页，全部」看似省事，实际会生成一个 xxx.html + 一个同名文件夹（如 xxx_files/），里面塞 CSS、图片等资源。一旦移动或重命名 HTML 文件，路径立刻断裂。
立即学习“前端免费学习笔记（深入）”；
- 该方式适合临时存档，**不适合复制分享或版本管理**
- 若已生成，想转成独立文件：打开
xxx.html，用浏览器开发者工具切到Elements面板，右键最外层<html>→Copy outerHTML，粘贴到新文件并按前述方法保存为.html - 更彻底的方案是装
SingleFile浏览器扩展，它能把整个页面（含 JS、字体、SVG）打包进单个.html，无外部依赖，双击即开
离线能打开 ≠ 功能完整
file:// 协议下，浏览器会禁用 fetch、localStorage（部分）、跨域请求、Service Worker 等特性。你看到页面渲染出来了，不代表逻辑能跑通。
- 测试表单提交、AJAX 加载、动态图片切换等功能，必须起本地服务，比如用 VS Code 的
Live Server插件，或命令行跑npx serve - 如果源码里有
src="https://cdn.example.com/script.js"这类绝对 URL，离线时必然 404；得手动替换成本地路径或删掉——别指望「另存为」自动帮你下下来 - 路径写法优先用相对路径：
./css/style.css比css/style.css更稳妥，避免因根目录理解差异出错
