根本原因是扩展名错误（如存为index.html.txt）和编码错误（如选ansi或utf-8-bom）；须在记事本“另存为”时选utf-8编码、保存类型为“所有文件”，并确保文件名确为index.html且系统显示扩展名。
用记事本保存HTML源码时，为什么双击打不开或显示乱码？
根本原因就两个：扩展名没改对 和 编码选错了。Windows 默认把文件存成 .txt，哪怕你手动写了 index.html，系统也可能悄悄变成 index.html.txt；而编码若选了 ANSI 或 UTF-8 带 BOM，中文就会变方块或问号。
实操要点：
- 右键文件 → “属性” → 看“名称”栏是否真以
.html结尾；若看到.txt，先打开文件夹【查看】→ 勾选【文件扩展名】，再重命名删掉.txt - 在记事本“另存为”窗口里，务必点开“编码”下拉框，选
UTF-8（不是“UTF-8-BOM”） - “保存类型”必须选
所有文件 (.)，否则记事本会强制加.txt
从浏览器开发者工具复制的 HTML，为什么图片和样式不显示？
因为 Elements 面板里复制的是渲染后的 DOM，不是原始 HTML 源码——它可能已删掉 <link>、<script></script> 标签，或者图片路径被浏览器自动转成绝对 URL 但本地没对应文件。
实操建议：
- 优先用右键菜单的“查看页面源代码”，再 Ctrl+A 全选复制，这才是原始 HTML
- 如果非要用 Elements 复制，粘贴后要手动补上缺失的
结构，比如加上<meta charset="UTF-8">和基础<title></title> - 检查所有
src和href属性：以http://或https://开头的，离线时必然失效；需下载资源并改成相对路径，例如把https://example.com/style.css换成css/style.css
想永久保存网页快照，为什么别用浏览器“另存为”？
浏览器自带的“另存为 → 网页，全部”会产生一个 .html 文件 + 一个同名 _files 文件夹，里面塞满 CSS、JS、图片等碎片。只要移动、重命名或删掉这个文件夹，网页立刻“半身不遂”——标题还在，样式全丢，图片变叉。
真正可靠的离线方案只有两个：
-
SingleFile浏览器扩展：点一下图标，自动把所有资源内嵌进单个.html文件，图片转 base64，CSS/JS 直接塞进<style></style>和<script></script>标签，保存完双击就能看，断网也稳 - 命令行抓取（适合批量）：
curl https://example.com > page.html，但仅适用于静态页面；动态内容或登录后页面得配合playwright或puppeteer截图+保存 DOM
保存成项目结构时，css/js/images 文件夹该放哪？
路径错位是新手最常卡住的地方。浏览器加载资源时，是从 index.html 所在位置开始算相对路径的，不是从你电脑桌面或文档根目录算起。
标准做法：
- 建一个项目文件夹，比如
my-article-archive - 把
index.html放在该文件夹**最外层** - 在同一个文件夹里创建子目录：
css/、js/、images/ - HTML 里引用时写相对路径，例如：
<link rel="stylesheet" href="css/main.css">、<img src="images/photo.jpg"> - 千万别写成
../css/main.css或/css/main.css—— 前者跨级容易出错，后者是绝对路径，只在服务器有效
404，比背规则管用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
