如何组织 HTML 文档的目录结构-html教程-PHP中文网

小项目应根目录起步，index.html置于根目录，css/、js/、images/平铺，用根相对路径引用资源，避免嵌套过深导致路径错乱。

如何组织 html 文档的目录结构

小项目直接根目录起步最稳，中大型项目必须拆 src 和 dist，否则三个月后改个颜色都要手动同步三处。

单人维护、≤5 个页面、不用构建工具的静态站，核心是路径稳定、一眼能猜到文件在哪。

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

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

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 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 的 .. 层数不同，极易断裂

常见错误是以为 pages/about.html 里写 js/main.js 就能加载根目录的脚本，其实浏览器会按当前 HTML 位置解析路径，去找 pages/js/main.js。

用根相对路径：<script src="/js/main.js"></script>，无论 HTML 在哪层都能命中根目录下的 js/main.js
如果用了构建工具，确保开发服务器（如 Vite）服务的是 dist/ 目录，而不是 src/ 或根目录——否则控制台报 404，实际是因为请求 URL 指向了错误位置
多页面共用 JS 但需差异化初始化时，别把所有逻辑塞进 main.js 全局作用域；可用 data-module 属性驱动：，再让 JS 自动扫描加载对应模块
硬编码 <script src="js/app.js"></script> 在每个页面里，等于把重复逻辑复制 N 次，改一个功能就得开 N 个文件

不是“项目变大了就拆”，而是当你反复复制粘贴同一段 HTML（比如页头、卡片、表单）超过三次时，才值得引入组件化组织。

每个组件单独一个文件夹，如 components/header/，内含 header.html、header.css、header.js，命名必须一致，否则脚本引用断裂
纯静态 HTML 场景下，fetch() 加载 components/header.html 会触发 CORS，本地双击打开直接失败；真正能落地的方式只有两种：构建时用 gulp-file-include 合并，或后端启用 SSI（）
避免在 components/ 里用相对路径引用上级资源，比如 ../../css/base.css——移动组件目录时全挂
一个只有 <nav><ul></ul></nav> 的 nav.html，不如直接写在 index.html 里——抽象成本高于收益