# 第二节 文件结构设计

在上一节中，AI 程序员为我们快速生成了包含完整代码的首页。但你可能会发现，它往往会将 HTML 结构、CSS 样式和 JavaScript 脚本混杂在同一个 `index.html` 文件里。
在真实的工程化开发中，这种做法是极不规范的。**文件结构设计**是指合理规划和组织项目中的文件和文件夹，以确保项目结构清晰、易于维护和扩展。通过良好的文件结构设计，不仅可以大幅提高开发效率、便于团队协作，更能简化后续的代码管理和版本控制。我们需要学会将 AI 生成的混合代码剥离，放入它们专属的“房间”。
## 一、标准文件夹结构

为了保持项目的整洁和可维护性，前端行业约定俗成地采用分类存放的目录结构。建议大家在本地环境按照以下层级建立文件夹与文件：
Plaintext
```
my-website/             (项目根目录)
├── index.html          (首页文件)
├── list.html           (列表页文件)
├── single.html         (详情页文件)
├── styles/             (样式表文件夹，也可命名为 css)
│   └── styles.css
├── images/             (图片资源文件夹，也可命名为 img)
│   └── logo.png
└── scripts/            (脚本文件夹，也可命名为 js)
    └── scripts.js
```
## 二、文件命名规则

在计算机世界里，严格的命名规范是专业素养的体现。前端文件的命名应尽量遵循以下通用规则：
**（一）HTML 文件**
放置在项目根目录。统一使用**小写英文单词**，若包含多个单词，建议使用**连字符（-）**连接。
- 示例：`index.html`、`list.html`、`about-us.html`。

**（二）CSS 文件**
统一放置在 `styles`（或 `css`）文件夹中。同样使用小写字母和连字符。
- 示例：`styles.css`、`main-style.css`。

**（三）图片文件**
统一放置在 `images`（或 `img`）文件夹中。根据图片内容使用英文小写拼写。严禁使用中文命名，以防上传服务器后出现乱码或路径失效。
- 示例：`logo.png`、`banner-01.jpg`。

**（四）JavaScript 文件**
统一放置在 `scripts`（或 `js`）文件夹中。使用小写字母命名。
- 示例：`scripts.js`、`main.js`。

## 三、文件引用路径与代码分离

当我们将样式和脚本从 HTML 页面中抽离并存放到各自的文件夹后，原本的 HTML 就变成了没有样式的纯骨架。我们需要通过**相对路径**将它们重新建立连接。
**（一）引入外部 CSS 样式表**
在 `index.html` 的 `<head>` 标签内部，使用 `<link>` 标签引入外部样式文件。`href` 属性中填写的即为相对路径，意思是“从当前 HTML 文件出发，进入 styles 文件夹，找到 styles.css 文件”。
HTML
```
<link rel="stylesheet" href="styles/styles.css">
```
**（二）引入外部 JavaScript 脚本**
在 `index.html` 的 `<body>` 标签的最底部（紧挨着 `</body>` 结束标签的上方），使用 `<script>` 标签引入外部脚本文件。
HTML
```
<script src="scripts/scripts.js"></script>
```
**【实操建议】**：请打开你上一节让 AI 生成的 `index.html` 文件，手动创建上述文件夹，将 `<style>` 标签内的代码剪切到 `styles.css` 中，将需要用到的图片移入 `images` 文件夹，并修改相应的引入路径。完成这一步，你就真正具备了前端工程师的项目管理思维。

在上一节中，AI 程序员为我们快速生成了包含完整代码的首页。但你可能会发现，它往往会将 HTML 结构、CSS 样式和 JavaScript 脚本混杂在同一个 index.html 文件里。在真实的工程化开发中，这种做法是极不规范的。文件结构设计是指合理规划和组织项目中的文件和文件夹，以确保项目结构清晰、易于维护和扩展。通过良好的文件结构设计，不仅可以大幅提高开发效率、便于团队协作，更能简化后续的代码管理和版本控制。我们需要学会将 AI 生成的混合代码剥离，放入它们专属的“房间”。

第五章第二节 文件结构设计

在上一节中，AI 程序员为我们快速生成了包含完整代码的首页。但你可能会发现，它往往会将 HTML 结构、CSS 样式和 JavaScript 脚本混杂在同一个 index.html 文件里。在真实的工程化开发中，这种做法是极不规范的。文件结构设计是指合理规划和组织项目中的文件和文件夹，以确保项目结构清晰、易于维护和扩展。通过良好的文件结构设计，不仅可以大幅提高开发效率、便于团队协作，更能简化后续的

编程语言

学习前端工程化开发必备的文件结构设计技巧，掌握HTML、CSS、JavaScript分离存放规范。了解标准文件夹层级、命名规则及文件引用路径，提升项目可维护性和团队协作效率。从AI生成代码到工程化实践，打造专业前端项目结构。

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第五章第二节 文件结构设计-腾讯云开发者社区-腾讯云

第五章第二节文件结构设计

第五章第二节文件结构设计

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章第二节 文件结构设计

第五章第二节 文件结构设计

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章第二节文件结构设计

第五章第二节文件结构设计