小项目用基础静态网站结构，够用且零配置；中大型项目必须分src/dist。小项目指单人维护、页面≤5个、无构建需求的展示型站点，核心是路径稳定、一眼能猜到文件在哪：index.html放根目录，css/下只放main.css和reset.css，js/里放main.js和utils.js，images/按用途分icons/、banner/但不超过两层，多页面统一放pages/about.html等。中大型项目一旦用Sass、ES6模块等，源码必须与构建产物分离：src/存可编辑源码，dist/为构建产物（禁止手动修改），public/存不参与构建的静态资源；所有HTML资源引用必须用根相对路径如"/css/main.css"；常见错误是HTML位置决定相对路径基准点，如pages/about.html中"js/main.js"会找pages/js/main.js而非根目录，应改用"/js/main.js"。
直接说结论：小项目用基础静态网站结构，够用且零配置；中大型项目必须分 src/dist，否则后期改不动、协作必乱。
小项目该用什么目录结构
指单人维护、页面 ≤ 5 个、无构建需求的展示型站点。核心是“路径稳定、一眼能猜到文件在哪”。
-
index.html必须放在根目录，这是所有 Web 服务器默认找的首页 -
css/下只放main.css和reset.css这类全局样式，别建多层子目录 -
js/里放main.js和utils.js，避免出现js/lib/dom.js这种嵌套过深的路径 -
images/可按用途分icons/、banner/，但别超过两层——images/icons/social/twitter.svg已经难维护 - 多页面时统一放
pages/about.html、pages/contact.html，不要散在根目录
中大型项目必须区分 src 和 dist
一旦开始用 Sass、ES6 模块、HTML 模板语法（如 Nunjucks），源码就不能和上线文件混在一起。否则你会遇到：本地开发正常，上线后 CSS 路径全错；修改一个变量要手动改 3 个地方；别人接手第一件事是重写目录。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
src/存所有可编辑源码：src/html/、src/css/scss/、src/js/modules/ -
dist/是构建产物，只含index.html、css/main.css、js/main.js等最终文件，禁止手动修改 -
public/存不参与构建的静态资源，比如favicon.ico、robots.txt，构建时原样复制进dist/ - 所有 HTML 中的资源引用必须用根相对路径，例如
，而不是../css/main.css
常见路径错误和调试方法
浏览器控制台报 404 Not Found 不一定是路径写错，很可能是服务器没配对或构建未触发。
- 检查网络面板里的请求 URL：如果显示
http://localhost:5000/js/main.js但实际文件在dist/js/main.js，说明服务没指向dist/ - 用
./表示同级、../表示上一级，但 HTML 中优先用以/开头的根路径，避免嵌套页面跳转失效 - 图片路径写成
index.html里能跑，在pages/about.html里就会 404——改成
- 构建工具（Vite/Webpack）默认不处理
src/html/*.html中的href或src属性，需插件（如html-webpack-plugin）才能自动修正路径
最容易被忽略的是：HTML 文件自身的位置决定了相对路径的基准点。哪怕你把所有 CSS/JS 都放进 dist/，只要 about.html 放在 pages/ 里，它里面的 src="js/main.js" 就是在找 pages/js/main.js，而不是根目录下的 js/main.js。这点不厘清，改十次路径都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
