HTML目录结构规范_html项目目录结构组织规范【小技巧】-html教程-PHP中文网

小项目用根目录+css/js/images/pages四文件夹，够用零配置；中大型项目必须分src/dist，否则路径混乱、协作困难。小项目指单人维护、页面≤5个、无构建需求的静态站，核心是路径稳定、一眼可定位：index.html放根目录，css/只放main.css和reset.css，js/仅存main.js和utils.js，images/按icons/banner分但不超过两层，多页面统一放pages/about.html等。

html目录结构规范_html项目目录结构组织规范【小技巧】

小项目直接用根目录 + css/、js/、images/、pages/ 四个文件夹，够用且零配置；中大型项目必须上 src/ 和 dist/，否则改两行代码就要全局修路径。

小项目怎么放文件才不翻车

所谓“小项目”，指单人维护、页面 ≤ 5 个、不用 Sass/ES6/模板语法的纯静态站。这类项目最怕路径写错导致本地双击打开白屏、上线后图片全挂、导航加载失败。

index.html 必须放在根目录，这是所有服务器默认找的首页，别挪到 pages/ 里再配重定向
css/ 下只放 main.css 和 reset.css，别建 css/base/ 或 css/v2/ —— 没构建工具时，多一层就多一个相对路径计算错误点
js/ 里只放 main.js 和 utils.js，避免 js/lib/dom.js 这种嵌套，否则 pages/about.html 里写 <script src="js/main.js"></script> 会去查 pages/js/main.js，而不是你预期的根目录下那个
images/ 可分 icons/、banner/，但别超过两层，比如 images/icons/social/twitter.svg 已经难定位、难迁移
所有内部链接用相对路径：pages/contact.html，不是 /pages/contact.html —— 后者在本地双击打开时会触发浏览器安全策略，直接 404

中大型项目为什么必须分 src 和 dist

一旦开始用 Sass、ES6 模块、Nunjucks 模板或 Vite 构建，源码和上线文件混在一起就是定时炸弹：本地跑得通，构建后 CSS 路径全错；改一个颜色变量，要手动同步三处；别人接手第一件事是删掉整个目录重来。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

src/ 存所有可编辑源码：src/html/（含 index.njk）、src/css/scss/（main.scss）、src/js/modules/（nav.js）
dist/ 是构建产物，只含最终能上线的文件：index.html、css/main.css、js/main.js，禁止手动修改
public/ 存不参与构建的静态资源：public/favicon.ico、public/robots.txt，构建时原样复制进 dist/，别丢进 src/ 里——Webpack/Vite 默认不处理 src/ 下的非源码文件
HTML 中所有资源引用必须用根相对路径：<link rel="stylesheet" href="/css/main.css">，不是 ../css/main.css —— 前者以域名根为基准，后者依赖当前 HTML 文件位置，pages/about.html 和 blog/post.html 的 .. 层数不同，极易断裂

components/ 目录能不能直接浏览器里用

不能。把 components/header.html 放进项目、再用 fetch() 加载它，在本地双击打开或某些开发服务器下会直接触发 CORS 或跨域读取失败，这不是结构问题，是浏览器安全机制。

真要组件化，只有两种落地方式：构建时合并（如 gulp-file-include），或服务端启用 SSI（）
components/header/ 下必须严格有 header.html、header.css、header.js 三件套，命名不一致会导致脚本找不到对应样式
组件内禁止用 ../../css/base.css 这类向上跳转的相对路径 —— 移动组件目录时所有引用全崩，应统一用根路径 /css/base.css
pages/about.html 引用组件时，路径计算基准是 pages/ 目录，不是项目根，所以 <script src="../components/header/header.js"></script> 才对，不是 ./components/...

多页面共用 JS 怎么避免重复执行

硬写 <script src="js/app.js"></script> 到每个 pages/*.html 里，会导致所有页面都执行全部逻辑：contact.html 初始化了代码高亮，blog.html 却绑了表单验证事件，结果点提交按钮没反应，控制台还报 Cannot read property 'addEventListener' of null。

JS 入口保持单一，但按页面条件初始化模块：if (document.body.classList.contains('page-contact')) { initFormValidation(); }
用 data-page 属性替代 class 判断更稳妥： → if (document.body.dataset.page === 'contact') { ... }
避免在 JS 里硬编码 DOM 选择器，比如 document.querySelector('#contact-form')，应先检查元素是否存在，再操作，否则其他页面因缺失该节点而报错中断
如果用了构建工具，可通过环境变量注入页面标识，比如 Vite 中在 index.html 写 <script>window.PAGE = '<%= VITE_PAGE_NAME %>'</script>，再在 main.js 里分支加载