HTML项目必须分目录，否则三个月后难以维护；推荐结构为根目录放HTML、css/js/assets分设子目录，统一用根相对路径（/开头）引用资源，并启用本地服务器避免file://协议问题。
直接说结论：HTML项目必须分目录，否则三个月后你自己都找不到logo.png在哪，更别说改配色或加响应式了。
为什么不能把所有文件堆在根目录
常见错误现象是：打开项目看到 index.html、style.css、script.js、1.jpg、banner2.png、about-us.html 全挤在一起。这种结构在加到第5个页面、第3版UI时就会崩溃。
根本问题不是“乱”，而是缺乏语义和职责分离——图片不是代码，样式不该和结构混着存，JS逻辑也不该和内容模板耦合。
-
assets/专放静态资源，下再分images/、fonts/、icons/ -
css/存所有样式文件，比如base.css（重置+变量）、layout.css（Grid/Flex布局）、components.css（按钮、卡片等） -
js/按功能拆，如form-validation.js、nav-toggle.js，避免全塞进一个main.js - HTML 页面统一放在根目录或
pages/，但不要混图、混CSS
推荐的最小可行目录结构（毕业设计够用）
不追求复杂，但要能支撑后续扩展。下面这个结构已通过 CodeSandbox 和本地 npx http-server 验证可用：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
my-portfolio/ ├── index.html ├── about.html ├── contact.html ├── css/ │ ├── base.css <-- :root 变量、reset、typography │ ├── layout.css <-- header/nav/main/footer 布局 │ └── components.css <-- .btn, .card, .form-group 等 ├── js/ │ ├── main.js <-- 初始化逻辑，import 其他模块 │ ├── utils.js <-- debounce、clamp 等小函数 │ └── form-handler.js <-- 表单提交 + 验证 ├── assets/ │ ├── images/ │ │ ├── logo.svg │ │ └── hero-bg.jpg │ └── icons/ │ └── github.svg └── favicon.ico
注意：base.css 里定义 --primary-color: #2563eb;，其他 CSS 文件直接 color: var(--primary-color); —— 改主题色只动一处。
容易踩的坑：路径写错、引用失效
HTML 中相对路径极易出错，尤其在多级页面间跳转时。比如 about.html 引用 css/base.css，路径是 ../css/base.css；而 index.html 是 css/base.css。硬编码会疯掉。
- 所有资源引用统一用**根相对路径**：以
/开头，如<link rel="stylesheet" href="/css/base.css"> - 启用本地服务器运行（
npx http-server或 VS Code Live Server），避免浏览器直接双击打开导致file://协议下路径失效 - 图片路径也走
/assets/images/xxx.jpg，别用../images/这种易断裂写法 - 如果用 Vite，它默认支持
/指向public/目录，此时把assets/放进public/更稳妥
要不要用构建工具？看你的交付要求
纯 HTML/CSS 毕业设计，老师只收一个压缩包？那不用构建工具，目录规范 + 语义化标签 + 响应式媒体查询就是工程化底线。
但如果要交 Git 仓库、演示热更新、或未来可能加 JS 交互逻辑，就值得加一层轻量构建：
- 用
vite build可自动哈希文件名、压缩 HTML/CSS/JS、生成dist/发布目录 - 不用配置 Webpack，Vite 默认支持
import语法、CSS 变量、.html入口，一行命令启动：npx vite - 关键提醒：Vite 的
index.html必须放在项目根目录，其他 HTML 页面（如about.html）需手动复制进dist/或用插件处理，别指望它自动编译多页
真正容易被忽略的是：目录结构定下来后，第一件事不是写代码，而是立刻在 index.html 里写好所有资源的正确路径，并用浏览器验证是否 404 —— 很多人卡在这一步，却以为是 CSS 写错了。
