diff --git a/README.md b/README.md
index 5dae338..420f60c 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,63 @@
-# js-review
+# 前端知识仓库
 
-一个有关前端复习的仓库
\ No newline at end of file
+欢迎来到前端知识仓库！这个仓库致力于提供常用的前端资源，包括常用样式、代码片段以及各种实用工具的实现。旨在为前端开发者提供全面的指南，以提高编码效率并保持最佳实践。
+
+## 目录
+
+- [前端知识仓库](#前端知识仓库)
+  - [目录](#目录)
+  - [介绍](#介绍)
+  - [常用样式](#常用样式)
+  - [代码片段](#代码片段)
+  - [工具实现](#工具实现)
+  - [服务器](#服务器)
+  - [提交信息规范](#提交信息规范)
+    - [类型](#类型)
+    - [示例](#示例)
+
+## 介绍
+
+该仓库旨在为前端开发者提供宝贵的资源。包括一系列常用的样式、便捷的代码片段以及各种自定义实用工具的实现（也称为“造轮子”）。
+
+## 常用样式
+
+在 `css-demos/` 目录包含一些css效果实现，比如动画、布局、新特性等，每一个html文件表示一个效果展示，如果效果复杂需抽离css时，因另起一个和原本html同名的目录，把资源文件都放到这个目录下。
+
+## 代码片段
+
+`js/` 目录包含各种用途的代码片段。这些片段按功能组织，可以方便地复制粘贴到你的项目中。
+
+## 工具实现
+
+`html/` 目录包括前端大量最佳实践，每个html都代表一个demo，彼此之间是独立的。
+
+## 服务器
+
+`server` web服务器相关实现，用于demo的前后端交互。
+
+## 提交信息规范
+
+我们遵循 Vue 提交信息规范以保持一致的提交历史。每个提交信息由类型、可选范围和主题组成：
+
+### 类型
+
+类型表示更改的性质。以下是支持的类型：
+
+- `feat`: 新功能
+- `fix`: 修复 Bug
+- `docs`: 仅文档更改
+- `style`: 不影响代码含义的更改（空格、格式、缺少分号等）
+- `refactor`: 既不是修复 Bug 也不是添加功能的代码更改
+- `perf`: 提高性能的代码更改
+- `test`: 添加缺失的测试或纠正现有测试
+- `chore`: 构建过程或辅助工具和库（如文档生成）的更改
+- `revert`: 恢复先前的提交
+
+### 示例
+
+以下是一些提交信息的示例：
+
+* feat(styles): 添加新的响应式网格系统
+* fix(snippets): 修正 JavaScript 片段中的语法错误
+* docs: 更新 README 中的贡献指南
+* style: 重新格式化 CSS 文件以保持一致性