小项目用assets/+pages/两层结构最稳，中大型必须src/dist分离；根目录仅放index.html，assets下固定css/js/images三层，pages放页面，全部使用相对路径确保稳定加载。
直接从根目录开始，别堆文件、别乱建嵌套，小项目用 assets/ + pages/ 两层分法最稳；中大型必须上 src/dist 分离，否则改个颜色都要全局修路径。
小项目：5页以内、单人维护、不编译的纯静态站
适合企业官网初版、作品集、落地页。核心是路径稳定、本地双击能打开、上线不挂图。
- 根目录只放 index.html——所有服务器和浏览器默认找它，挪走就 404
-
建 assets/ 文件夹，里面固定三层：
assets/css/（放 main.css、responsive.css）、assets/js/（放 main.js、nav-toggle.js）、assets/images/（可再分 icons/、banner/，但不超过两层） -
页面统一放 pages/，比如
pages/about.html、pages/contact.html，不要嵌套子目录（如 pages/company/team.html），除非真有 SEO 或语义需求 -
所有引用写相对路径：比如
<link href="assets/css/main.css" rel="stylesheet">，这样 pages/about.html 和 index.html 都能正确加载资源
中大型项目：要用 Sass/ES6/Vite、多人协作、后续要迭代
一旦加构建工具，源码和上线文件混在一起就是灾难。必须物理隔离，避免“本地跑通、构建后白屏”。
-
src/ 存所有可编辑源码：
src/html/（含 index.njk 或 .html 模板）、src/css/scss/（main.scss + partials/）、src/js/modules/（nav.js、form.js 等按功能拆）、src/assets/（原始图片、SVG、字体） -
dist/ 只放最终产物：构建后生成的
index.html、css/main.8a2f.css、js/main.3b9c.js、压缩图等，这个目录直接扔服务器 - public/ 存免处理资源：favicon.ico、robots.txt、manifest.json 这类不参与构建的文件，配置构建工具自动复制进 dist/
- 别在 src/ 里写死 dist/ 路径：所有引用用相对路径或构建工具变量（如 Vite 的 @alias），确保开发与构建环境一致
HTML 页面结构怎么配合目录一起设计
目录只是容器，页面本身得有清晰骨架，才能让 CSS 和 JS 容易对接。
-
强制用语义化标签：
<header></header>放 logo 和主导航，<nav></nav>单独包菜单，<main></main>包全部业务内容，<footer></footer>放版权和联系方式 -
导航复用靠脚本或模板：小项目可用
nav-loader.js动态注入；中大型用 Nunjucks/EJS，在src/html/_includes/nav.html统一维护，构建时自动插入各页面 -
响应式基础提前埋点：在
加<meta name="viewport" content="width=device-width, initial-scale=1">，CSS 里用@media (max-width: 768px)做断点，别等写完再补 -
图片加载兼顾性能：
<img src="assets/images/banner.webp" srcset="assets/images/banner@2x.webp 2x">，优先 WebP，fallback 到 JPG
容易踩坑的细节提醒
很多问题不是技术难，而是路径或命名没想清楚，一出错就全链路崩。
-
别用绝对路径 /css/main.css：本地双击直接被浏览器拦截，必须用
assets/css/main.css这种相对路径 -
images/ 下别建太多层级：比如
images/icons/social/twitter.svg看似清晰，但迁移时容易漏，两层足够（images/icons/、images/banners/） - js/ 里别塞第三方库：jQuery、Swiper 这类用 CDN 引入，或通过构建工具管理，别手动丢进 js/ 文件夹导致版本混乱
-
字体文件统一放 assets/fonts/，用
@font-face加载，别用在线服务链接——避免上线后字体失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
