把零散的HTML源码整理成规范的代码项目，是前端开发的基础操作，能让你后续的开发、维护工作更加顺畅，也能让项目结构更清晰，方便团队协作或者后续的功能迭代。
第一步：创建项目根目录
首先在本地磁盘选择一个合适的存储位置，新建一个文件夹作为项目的根目录，文件夹名称建议使用英文小写加下划线或者连字符的形式，避免使用中文和空格，比如可以命名为my_html_project。
第二步：规划基础目录结构
规范的项目结构能提升代码可维护性，对于纯HTML静态项目，基础目录结构可以参考下面的划分：
css：存放所有样式文件，比如style.css、reset.css等js：存放所有JavaScript脚本文件，比如main.js、utils.js等images：存放项目用到的所有图片资源，包括图标、背景图、内容图等fonts：如果项目用到自定义字体文件，可以放在该目录下index.html：项目的主入口文件，放在根目录下
如果你的HTML源码有多个页面，还可以在根目录下新建pages目录，用来存放其他HTML页面文件。
第三步：迁移和整理源码文件
接下来把原有的HTML源码中的各个部分拆分到对应的目录中：
处理HTML主文件
把原有的主HTML代码复制到根目录的index.html中，然后修改代码中引用的CSS、JS、图片等资源的路径，确保路径指向对应的目录。比如原来的样式引用是<link rel="stylesheet" href="style.css">，现在要改为<link rel="stylesheet" href="css/style.css">。
迁移样式文件
把HTML源码内部的<style>标签内的样式代码提取出来，保存到css目录下的对应CSS文件中，同时把外部引入的CSS文件也移动到css目录中。
迁移脚本文件
把HTML源码内部的<script>标签内的代码提取出来，保存到js目录下的对应JS文件中，同时把外部引入的JS文件也移动到js目录中。
迁移资源文件
把HTML源码中用到的所有图片、字体等资源，分别移动到images、fonts等对应目录中，然后修改HTML中对应的资源引用路径。
第四步：验证项目可用性
完成文件迁移后，用浏览器打开根目录下的index.html文件，检查页面是否正常渲染，样式、交互功能是否都能正常使用，如果有资源加载失败的情况，检查对应的路径是否正确。
下面是一个简单的项目结构示例和对应的HTML引用代码：
<!-- 项目结构示例 -->
<!-- my_html_project/ -->
<!-- ├── index.html -->
<!-- ├── css/ -->
<!-- │ └── style.css -->
<!-- ├── js/ -->
<!-- │ └── main.js -->
<!-- └── images/ -->
<!-- └── logo.png -->
<!-- index.html 内容示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的HTML项目</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<img src="images/logo.png" alt="项目logo">
<h1>欢迎来到我的项目</h1>
</header>
<main>
<p>这是整理后的HTML项目内容</p>
</main>
<script src="js/main.js"></script>
</body>
</html>
第五步：可选的项目配置
如果需要更规范的项目管理，可以添加一些配置文件：
- 添加
.gitignore文件，忽略不需要提交到版本库的文件，比如编辑器配置文件夹、临时文件等 - 如果是团队开发，可以添加
README.md文件，说明项目的启动方式、目录结构、开发规范等内容 - 如果需要使用构建工具，可以添加对应的配置文件，比如
package.json等
按照以上步骤操作，你就能把零散的HTML源码整理成规范的代码项目，后续开发和维护都会更加方便。