直接保存为index.html双击打开常因编码、路径或资源引用问题导致空白或样式丢失；须用utf-8编码保存，修正相对路径，避免cdn依赖，并通过浏览器“另存为→网页，全部”快速获取可运行副本。
直接保存为 index.html 文件就能双击打开，但多数人卡在编码、路径或资源引用上，导致打开空白或样式丢失。
用记事本保存时必须选 UTF-8 编码
Windows 自带记事本默认用 ANSI 编码，一旦 HTML 里有中文、emoji 或特殊符号，保存后打开就是乱码或渲染失败。
- 复制完整 HTML 源码（含
开头） - 粘贴进记事本 → “文件” → “另存为”
- 在保存窗口中：文件名填
index.html，编码下拉选UTF-8，保存类型选所有文件 - 不要点“保存”前漏掉任一选项，否则系统可能自动加 .txt 后缀
用 VS Code 保存要关掉自动格式化干扰
VS Code 默认启用 Prettier 或内置格式化，可能把 <script></script> 块里的内联 JS 或模板字符串改坏，尤其含转义字符或注释时。
- 粘贴源码后，先按
Ctrl+Shift+P打开命令面板，输入Format Document并禁用 - 保存前检查右下角状态栏显示的编码是否为
UTF-8（不是 UTF-8 with BOM） - 文件 → 另存为 → 路径选好，文件名输
index.html，确认扩展名没被覆盖 - 保存后右键文件 → “在浏览器中打开”，别用 VS Code 内置预览，它不模拟真实加载逻辑
保存后页面空白？重点查三类路径问题
开发者工具里看到大量 404，基本是 CSS/JS 图片路径没适配本地环境。线上页面用绝对 URL，本地双击打开时协议是 file://，相对路径规则完全不同。
- 删掉所有以
https://或http://开头的href和src，比如<link href="https://cdn.example.com/style.css"> - 把
<script src="js/main.js"></script>这类相对路径，确认js/文件夹已和index.html在同一级目录下 - 图片路径如
<img src="/assets/logo.png">中的开头斜杠会指向磁盘根目录，改成./assets/logo.png或直接拖图到同目录后用logo.png - 如果原页面依赖 CDN 字体（如 Google Fonts），离线时需注释掉或替换为本地
@font-face
想一键下载整个登录页（含 CSS/JS/图片）？用浏览器“另存为”最稳
这个功能不是保存源码，而是让浏览器自动抓取并组织所有资源——适合快速备份可运行副本，但不适用于二次开发。
- 在目标登录页按
Ctrl+S（Windows）或Cmd+S（Mac） - 保存类型选
网页，全部 (*.htm; *.html)，别选“网页，仅 HTML” - 浏览器会生成一个
index.html+ 一个同名文件夹（如index_files/），里面塞满提取出的资源 - 该方式不能保留动态渲染后的 DOM（比如 JS 插入的表单校验提示），只保存初始 HTML + 静态资源
真正麻烦的从来不是“怎么存”，而是存完之后发现按钮点击没反应、输入框不聚焦、密码框没隐藏——那大概率是 JS 依赖了未下载的远程库，或者事件监听器绑定逻辑被路径改动破坏了。动手前先看一眼控制台报错，比重存十次都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
