跳到主要内容

第二节 文件结构设计

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

一、标准文件夹结构​

为了保持项目的整洁和可维护性，前端行业约定俗成地采用分类存放的目录结构。建议大家在本地环境按照以下层级建立文件夹与文件：

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 文件”。

<link rel="stylesheet" href="styles/styles.css">

（二）引入外部 JavaScript 脚本​

在 index.html 的 <body> 标签的最底部（紧挨着 </body> 结束标签的上方），使用 <script> 标签引入外部脚本文件。

<script src="scripts/scripts.js"></script>

【实操建议】：请打开你上一节让 AI 生成的 index.html 文件，手动创建上述文件夹，将 <style> 标签内的代码剪切到 styles.css 中，将需要用到的图片移入 images 文件夹，并修改相应的引入路径。完成这一步，你就真正具备了前端工程师的项目管理思维。