HTML工程目录规划：构建清晰、可拓展的静态项目目录结构的方法-html教程-PHP中文网

小项目用根目录+css/js/images/pages四文件夹，中大型项目必须分src/dist；小项目指单人维护、≤5页、无构建工具的静态站，index.html须在根目录，资源路径要稳定，避免嵌套过深导致404。

html工程目录规划：构建清晰、可拓展的静态项目目录结构的方法

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

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

index.html 必须放在根目录——所有服务器默认找它，挪到 pages/ 就得配重定向，本地双击直接 404
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

常见错误现象是：打开项目看到 index.html、style.css、script.js、1.jpg、banner2.png、about-us.html 全挤在一起。这种结构在加到第5个页面、第3版UI时就会崩溃。

根本问题不是“乱”，而是缺乏语义和职责分离——图片不是代码，样式不该和结构混着存，JS逻辑也不该和内容模板耦合。

html-deploy

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

下载

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

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

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 资源引用必须用根相对路径，如 /css/main.css；常见错误是 HTML 位置决定相对路径基准点，pages/about.html 中 "js/main.js" 会找 pages/js/main.js，应改用 /js/main.js

纯静态 HTML 模板里，“组件化”只是组织习惯，不是运行时能力。直接在浏览器里用 fetch() 加载 components/header.html 会触发 CORS，本地双击打开更会直接失败。

header.html、header.css、header.js 三件套，命名不一致会导致脚本引用断裂
避免在 components/ 里用相对路径引用上级资源，比如 ../../css/base.css——移动组件目录时全挂
如果用 pages/home.html 引用组件，路径要基于 pages 目录算，不是根目录
多页面 HTML 项目，pages/ 里的 HTML 不该直接引用 js/app.js；所有页面共用同一份 JS，但不同页面需要初始化不同模块（比如 contact.html 要加载表单验证，而 blog.html 要初始化代码高亮）
硬编码 <script src="js/app.js"></script> 会导致无效执行或重复绑定；可在 app.js 开头加判断：if (document.body.id === 'contact-page') { initContactForm(); }，或者用 data-module 属性驱动，再让 JS 自动扫描加载对应模块