在前端开发中，很多新手容易忽略目录结构规范，直接把 HTML、CSS、JS、图片文件全部堆在根目录，看似省时省力，实则为后续开发埋下巨大隐患：文件混乱难查找、多人协作冲突、项目迭代后难以维护。
一套标准化的 HTML 目录结构，不仅能提升开发效率、降低协作成本，还能让项目具备可扩展性，适配从小型静态页面到大型前端工程的所有场景。
本文整理了通用版、企业级、极简版三套 HTML 目录规范，覆盖 90% 前端项目场景，新手直接照搬即可使用。
一、为什么必须规范 HTML 目录结构？
- 可读性强：一眼就能找到对应文件，不用在一堆文件里反复翻找
- 协作高效：团队开发统一规范，避免文件命名、路径冲突
- 易于维护：项目迭代、功能新增时，快速定位模块，不影响其他代码
- 可扩展性高：从小页面升级为多页面、工程化项目，无需重构目录
- 符合行业标准：企业开发、开源项目通用规范，提升专业度
二、核心命名与路径规范（基础必守）
在规划目录前，先遵守前端通用命名规则，这是规范的基础：
- 全小写：目录名、文件名统一使用小写字母，禁止大小写混合
- 连接符：多单词使用短横线
-分隔（如user-info.html、common-style），禁止下划线、空格 - 语义化：命名见名知意，禁止
1.html、css2.css无意义命名 - 禁止中文：所有目录、文件不使用中文、特殊字符，避免路径报错
- 相对路径：内部资源统一使用相对路径，不使用绝对路径
三、三套实用 HTML 目录结构规范
1. 极简版（单页面 / 小 demo / 练习项目）
适合个人练习、单页面官网、小工具，结构最简，不冗余
plaintext
项目根目录/
├── index.html # 主入口文件（唯一HTML）
├── css/ # 样式文件夹
│ └── style.css # 主样式文件
├── js/ # 脚本文件夹
│ └── main.js # 主逻辑文件
├── images/ # 图片资源（图标、背景、产品图）
└── favicon.ico # 网站图标（根目录）
2. 通用标准版（多页面企业官网 / 常规前端项目）
最常用规范，适配企业官网、多页面静态项目、中小型前端项目，平衡简洁与实用
plaintext
项目根目录/
├── index.html # 项目主入口（首页）
├── about.html # 关于我们页（多页面按需添加）
├── news.html # 新闻列表页
├── contact.html # 联系我们页
├── css/ # 全局样式目录
│ ├── common.css # 公共样式（重置、布局、通用类）
│ ├── index.css # 首页专属样式
│ └── page.css # 其他页面公共样式
├── js/ # 脚本目录
│ ├── common.js # 公共JS（导航、弹窗、工具函数）
│ ├── index.js # 首页专属逻辑
│ └── utils.js # 工具函数（时间格式化、请求封装）
├── images/ # 全局图片目录
│ ├── common/ # 公共图片（logo、图标、背景）
│ ├── index/ # 首页专属图片
│ └── page/ # 其他页面图片
├── assets/ # 静态资源（非图片类）
│ ├── fonts/ # 字体文件（iconfont、自定义字体）
│ ├── icons/ # SVG图标、小图标
│ └── lib/ # 第三方库（jQuery、swiper等）
└── favicon.ico # 网站 favicon 图标
3. 企业级规范（大型多页面 / 可工程化扩展项目）
适合大型官网、复杂静态项目、未来准备接入 Vue/React 工程化的项目，完全符合企业开发标准
plaintext
项目根目录/
├── index.html # 首页入口
├── pages/ # 所有子页面统一存放（核心优化）
│ ├── about.html
│ ├── news/
│ │ └── list.html # 新闻列表
│ │ └── detail.html # 新闻详情
│ └── contact.html
├── src/ # 核心源码目录（工程化标准）
│ ├── css/
│ │ ├── base/ # 基础样式（reset.css、variable.css变量）
│ │ ├── components/ # 组件样式（导航、轮播、卡片）
│ │ └── pages/ # 页面专属样式
│ ├── js/
│ │ ├── base/ # 基础JS（全局配置、工具函数）
│ │ ├── components/ # 组件JS
│ │ └── pages/ # 页面专属JS
│ └── assets/ # 静态资源
│ ├── fonts/ # 字体
│ ├── images/ # 图片（按模块分文件夹）
│ └── icons/ # SVG图标
├── static/ # 第三方静态资源（不修改的库）
│ ├── jquery/
│ └── swiper/
├── doc/ # 项目文档（说明、接口文档）
└── favicon.ico
四、目录核心模块详解
不管使用哪套规范，核心模块的作用是固定的，新手一定要记牢：
- 根目录 HTML 文件：首页、核心页面直接放在根目录，浏览器访问最便捷
- css/：存放所有样式文件，区分公共样式和页面专属样式，避免样式冗余
- js/：公共工具函数、全局逻辑、页面专属 JS 分离，降低代码耦合
- images/：图片按「公共 + 页面」分类，避免图片混乱，支持高效管理
- assets/：统一管理字体、图标、第三方资源，和业务代码分离
- pages/（企业级）：子页面统一收纳，根目录只保留首页，清爽整洁
- lib/static/：第三方库单独存放，不与业务代码混合，方便更新
五、HTML 文件引用规范（配套使用）
目录规范后，文件引用必须使用正确的相对路径，示例：
- 首页 index.html 引用资源
html
预览
<!-- 引入公共样式 -->
<link rel="stylesheet" href="./css/common.css" rel="external nofollow" >
<!-- 引入首页样式 -->
<link rel="stylesheet" href="./css/index.css" rel="external nofollow" >
<!-- 引入第三方库 -->
<script src="./assets/lib/jquery.min.js"></script>
<!-- 引入公共JS -->
<script src="./js/common.js"></script>
<!-- 引入首页逻辑 -->
<script src="./js/index.js"></script>
- 子页面 pages/about.html 引用资源
html
预览
<!-- 子页面返回上一级目录，使用 ../ -->
<link rel="stylesheet" href="../css/common.css" rel="external nofollow" >
<link rel="stylesheet" href="../css/page.css" rel="external nofollow" >
<script src="../assets/lib/jquery.min.js"></script>
<script src="../js/common.js"></script>
六、避坑指南（新手常犯错误）
- ❌ 禁止把所有文件放在根目录，项目稍大就完全失控
- ❌ 禁止使用中文命名、空格、特殊字符，会导致路径加载失败
- ❌ 禁止图片、JS、CSS 不分类，全部堆在一个文件夹
- ✅ 公共资源（CSS/JS/ 图片）一定要单独拆分，不要每个页面重复写
- ✅ 大型项目一定要用
pages收纳子页面，根目录只留首页
七、总结
前端 HTML 目录结构没有唯一标准答案，但标准化、语义化、模块化是永恒核心：
- 个人练习 / 单页面：用极简版，快速开发
- 企业官网 / 多页面项目：用通用标准版，实用高效
- 大型项目 / 未来工程化：用企业级规范，专业可扩展
遵循这套规范，不仅能让你的项目清爽易维护，更能养成专业的前端开发习惯，快速适配企业开发要求。
建议新手直接收藏本文，新建项目时直接照搬对应目录结构，从此告别文件混乱，开发效率翻倍！
关键点回顾
- 核心原则：小写命名、语义化、分模块、相对路径
- 三套规范：极简版（单页）、通用版（多页）、企业级（大型项目）
- 核心目录：
css/、js/、images/、assets/是基础标配 - 关键习惯：公共资源与页面资源分离，子页面统一收纳
