单个index.html不是项目，因缺少目录结构导致资源路径失效；必须建立css/、js/、images/和根目录index.html，用utf-8编码、相对路径并下载外部资源，拖入浏览器验证200状态才算真正可运行项目。
直接保存为 index.html 不等于有了项目 —— 缺少目录结构、资源路径和可维护性，它只是个单文件，不是项目。
为什么不能只存一个 .html 文件？
单个 index.html 文件在双击打开时可能显示异常：图片不出现、样式错乱、脚本报错。根本原因是 <link href="css/style.css"> 或 <script src="js/main.js"></script> 这类路径在文件系统里找不到对应位置 —— 浏览器按当前 HTML 所在路径解析相对地址，而你没建 css/、js/ 这些子目录。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND（控制台里反复刷这个）
所以“保存为项目”的核心动作是：建目录、放文件、调路径、验效果。
必须创建的四个基础子目录
哪怕当前只有一行 CSS 和三行 JS，也建议立刻建立以下结构，避免后期重构成本飙升：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
css/：存放所有样式表，如style.css；<link rel="stylesheet" href="css/style.css"> -
js/：存放所有脚本，如main.js；<script src="js/main.js"></script> -
images/：所有<img src="...">引用的图都放这里；路径统一写成images/logo.png -
index.html必须放在最外层根目录，不可嵌套进子文件夹
别用中文或空格命名目录，例如 我的样式 或 js files 会导致部分浏览器或构建工具出错。
保存时最容易踩的三个坑
路径写错、编码选错、资源漏下载，这三项加起来占本地网页打不开问题的 80% 以上：
-
路径全用相对路径：删掉所有
https://example.com/css/这种绝对 URL；改用css/style.css或../assets/css/style.css（注意../含义） - 文本编辑器必须选 UTF-8 编码保存：记事本默认是 ANSI，中文会变乱码；VS Code 默认就是 UTF-8，但也要检查右下角状态栏是否显示 “UTF-8”
-
外部资源要手动下载再改路径：如果原 HTML 里有
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">，离线就失效 —— 得先下载该 CSS 文件到本地css/bootstrap.min.css，再把 href 改成css/bootstrap.min.css
验证是否真成了“可运行项目”
不要只双击打开看一眼就算完。真实验证方式只有这一种：
把整个文件夹拖进 Chrome 或 Edge 地址栏（地址会变成 file:///Users/xxx/my-project/index.html），然后打开开发者工具（F12），切到 Console 和 Network 面板：
- Console 无红色报错（尤其是
404） - Network 里所有
css、js、images请求状态码都是200（不是file://协议下的failed） - 页面渲染结果和线上一致（字体、间距、交互响应）
只要 Network 里出现任何 file:// 开头的 404，就说明某个路径还没对齐 —— 这是项目结构没立住最直接的信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
