diff --git a/README.md b/README.md
index 96c1187..55d9abd 100644
--- a/README.md
+++ b/README.md
@@ -1,109 +1,132 @@
-# web组件
 
+<p align="center">
+	<img alt="logo" src="./public/image/widget.png" width="300">
+</p>
+<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">H-Widget v1.0.0</h1>
 
-- 项目演示(DEMO)地址：http://widget.huanghanlian.com/
+<h4 align="center">A component library developed with native JavaScript, including components such as carousel, tab, dropdown, dialog, etc.</h4>
 
+## README.md
+- [English](README.md)
+- [简体中文](README.zh_CN.md)
+
+## Project Demo
+
+**Project Demo:**
+
+- GitHub Pages Deployment: [http://widget.huanghanlian.com/](http://widget.huanghanlian.com/)
+
+## Project Introduction
+
+**Background:**
+With the rise of various frameworks nowadays, we seldom think about how native JS works, understanding native JS is also very important～
 
 ---
 
-### 滑动条-原生js封装
-简介：进度及范围控制，支持手势操作，支持移动端+PC
-[演示](http://widget.huanghanlian.com/range/)
+## How to Use
+
+### Slider - Native JavaScript Encapsulation
+Description: Progress and range control, supports gesture operation, supports mobile and PC
+[Demonstration](http://widget.huanghanlian.com/range/)
 ```javascript
-new range("selector",options,callback(api));
+new range("selector", options, callback(api));
 ```
 
-### 滚动条-原生js封装
-简介：模拟滚动条，支持手势操作，支持移动端+PC
-[演示](http://widget.huanghanlian.com/scrollbar/)
+### Scrollbar - Native JavaScript Encapsulation
+Description: Simulated scrollbar, supports gesture operation, supports mobile and PC
+[Demonstration](http://widget.huanghanlian.com/scrollbar/)
 ```javascript
-new scrollbar("selector",options,callback(api));
+new scrollbar("selector", options, callback(api));
 ```
 
-### 日历-原生js封装
-简介：日期及日期范围选择，灵活的日期选择功能
-[演示](http://widget.huanghanlian.com/calendar/)
+### Calendar - Native JavaScript Encapsulation
+Description: Date and date range selection, flexible date selection function
+[Demonstration](http://widget.huanghanlian.com/calendar/)
 ```javascript
-new calendar("selector",options);
+new calendar("selector", options);
 ```
 
-### 无缝轮播图-原生js封装
-简介：无缝滚动、响应式、参数可调控等等
-[演示](http://widget.huanghanlian.com/bannerha/)
+### Seamless Carousel - Native JavaScript Encapsulation
+Description: Seamless scrolling, responsive, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/bannerha/)
 ```javascript
-new bannerha(selector,{options});
+new bannerha(selector, { options });
 ```
 
-
-### Tab面板-原生js封装
-简介：Tab面板、响应式、参数可调控等等
-[演示](http://widget.huanghanlian.com/tabpanel/)
+### Tab Panel - Native JavaScript Encapsulation
+Description: Tab panel, responsive, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/tabpanel/)
 ```javascript
-new tabpanel(selector,{options});
+new tabpanel(selector, { options });
 ```
 
-
-### 无缝向上滚动-原生js封装
-简介：无缝滚动、间隔滚动、响应式、参数可调控等等
-[演示](http://widget.huanghanlian.com/scrollup/)
+### Seamless Scroll Up - Native JavaScript Encapsulation
+Description: Seamless scrolling, interval scrolling, responsive, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/scrollup/)
 ```javascript
-new scrollup(selector,{options});
+new scrollup(selector, { options });
 ```
 
-
-
-### 放大镜-原生js封装
-简介：电商放大镜封装、参数可调控等等
-[演示](http://widget.huanghanlian.com/magnifier/)
+### Magnifier - Native JavaScript Encapsulation
+Description: E-commerce magnifier encapsulation, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/magnifier/)
 ```javascript
-new magnifier(selector,{options});
+new magnifier(selector, { options });
 ```
 
-### 倒计时-原生js封装
-简介：倒计时、参数可调控等等
-[演示](http://widget.huanghanlian.com/countdown/)
+### Countdown - Native JavaScript Encapsulation
+Description: Countdown, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/countdown/)
 ```javascript
-new countdown(selector,{options});
+new countdown(selector, { options });
 ```
 
-### 下拉框-原生js封装
-简介：下拉框、支持键盘事件、参数可调控等等
-[演示](http://widget.huanghanlian.com/select/)
+### Dropdown - Native JavaScript Encapsulation
+Description: Dropdown, supports keyboard events, adjustable parameters, etc.
+[Demonstration](http://widget.huanghanlian.com/select/)
 ```javascript
-new select(selector,{options});
+new select(selector, { options });
 ```
 
-### 标签页-tabs-原生js封装
-简介：简易标签切换及淡入淡出幻灯片功能
-[演示](http://widget.huanghanlian.com/tabs/)
+### Tabs - Native JavaScript Encapsulation
+Description: Simple tab switching and fade in and out slideshow functions
+[Demonstration](http://widget.huanghanlian.com/tabs/)
 ```javascript
-new tabs(selector,{options});
+new tabs(selector, { options });
 ```
 
-### 图片聚焦-imagezoom-原生js封装
-简介：图片居中及缩放处理
-[演示](http://widget.huanghanlian.com/imagezoom/)
+### Image Zoom - Native JavaScript Encapsulation
+Description: Image centering and scaling processing
+[Demonstration](http://widget.huanghanlian.com/imagezoom/)
 ```javascript
-new imagezoom(selector,{options});
+new imagezoom(selector, { options });
 ```
 
-### 弹出框-dialog-原生js封装
-简介：个性弹出层，自定义弹出位置，巧妙的定位方式
-[演示](http://widget.huanghanlian.com/dialog/)
+### Dialog - Native JavaScript Encapsulation
+Description: Personalized popup layer, custom popup position, clever positioning method
+[Demonstration](http://widget.huanghanlian.com/dialog/)
 ```javascript
-new dialog(selector,{options});
+new dialog(selector, { options });
 ```
 
-### 城市三级联动 - citys-原生js封装
-简介：最新最全的城市区划数据，自定义事件处理方式
-[演示](http://widget.huanghanlian.com/citys/)
+### City Selector - Native JavaScript Encapsulation
+Description: Latest and most complete city subdivision data, custom event handling method
+[Demonstration](http://widget.huanghanlian.com/citys/)
 ```javascript
-new citys("selector",options,callback(api));
+new citys("selector", options, callback(api));
 ```
 
-### 格式化输入框-inputFormat-原生js封装
-简介：格式化输入，方便验证
-[演示](http://widget.huanghanlian.com/inputFormat/)
+### Input Formatter - Native JavaScript Encapsulation
+Description: Input formatting for easy validation
+[Demonstration](http://widget.huanghanlian.com/inputFormat/)
 ```javascript
-new inputFormat("selector",options,callback(api));
+new inputFormat("selector", options, callback(api));
 ```
+
+## License
+
+[Apache License 2.0](https://github.com/huanghanzhilian/widget/blob/master/LICENSE)
+
+MIT License
+
+Copyright (c) 2024 Jipeng Huang
diff --git a/README.zh_CN.md b/README.zh_CN.md
new file mode 100644
index 0000000..f5b4a17
--- /dev/null
+++ b/README.zh_CN.md
@@ -0,0 +1,135 @@
+<p align="center">
+	<img alt="logo" src="./public/image/widget.png" width="300">
+</p>
+<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">H-Widget v1.0.0</h1>
+
+<h4 align="center">一个基于原生JavaScript开发的组件库，包含：轮播、标签页、下拉框、对话框等组件</h4>
+
+## README.md
+- en [English](README.md)
+- zh_CN [简体中文](README.zh_CN.md)
+
+## 项目在线演示
+
+**项目在线演示地址：**
+
+- GitHub Pages 部署地址：[http://widget.huanghanlian.com/](http://widget.huanghanlian.com/)
+
+## 项目介绍
+
+**背景：**
+随着现在各种框架的兴起，我们很少去思考用原生JS是如何工作的，了解原生JS也非常重要～
+
+---
+
+## 如何使用
+
+### 滑动条-原生js封装
+简介：进度及范围控制，支持手势操作，支持移动端+PC
+[演示](http://widget.huanghanlian.com/range/)
+```javascript
+new range("selector",options,callback(api));
+```
+
+### 滚动条-原生js封装
+简介：模拟滚动条，支持手势操作，支持移动端+PC
+[演示](http://widget.huanghanlian.com/scrollbar/)
+```javascript
+new scrollbar("selector",options,callback(api));
+```
+
+### 日历-原生js封装
+简介：日期及日期范围选择，灵活的日期选择功能
+[演示](http://widget.huanghanlian.com/calendar/)
+```javascript
+new calendar("selector",options);
+```
+
+### 无缝轮播图-原生js封装
+简介：无缝滚动、响应式、参数可调控等等
+[演示](http://widget.huanghanlian.com/bannerha/)
+```javascript
+new bannerha(selector,{options});
+```
+
+
+### Tab面板-原生js封装
+简介：Tab面板、响应式、参数可调控等等
+[演示](http://widget.huanghanlian.com/tabpanel/)
+```javascript
+new tabpanel(selector,{options});
+```
+
+
+### 无缝向上滚动-原生js封装
+简介：无缝滚动、间隔滚动、响应式、参数可调控等等
+[演示](http://widget.huanghanlian.com/scrollup/)
+```javascript
+new scrollup(selector,{options});
+```
+
+
+
+### 放大镜-原生js封装
+简介：电商放大镜封装、参数可调控等等
+[演示](http://widget.huanghanlian.com/magnifier/)
+```javascript
+new magnifier(selector,{options});
+```
+
+### 倒计时-原生js封装
+简介：倒计时、参数可调控等等
+[演示](http://widget.huanghanlian.com/countdown/)
+```javascript
+new countdown(selector,{options});
+```
+
+### 下拉框-原生js封装
+简介：下拉框、支持键盘事件、参数可调控等等
+[演示](http://widget.huanghanlian.com/select/)
+```javascript
+new select(selector,{options});
+```
+
+### 标签页-tabs-原生js封装
+简介：简易标签切换及淡入淡出幻灯片功能
+[演示](http://widget.huanghanlian.com/tabs/)
+```javascript
+new tabs(selector,{options});
+```
+
+### 图片聚焦-imagezoom-原生js封装
+简介：图片居中及缩放处理
+[演示](http://widget.huanghanlian.com/imagezoom/)
+```javascript
+new imagezoom(selector,{options});
+```
+
+### 弹出框-dialog-原生js封装
+简介：个性弹出层，自定义弹出位置，巧妙的定位方式
+[演示](http://widget.huanghanlian.com/dialog/)
+```javascript
+new dialog(selector,{options});
+```
+
+### 城市三级联动 - citys-原生js封装
+简介：最新最全的城市区划数据，自定义事件处理方式
+[演示](http://widget.huanghanlian.com/citys/)
+```javascript
+new citys("selector",options,callback(api));
+```
+
+### 格式化输入框-inputFormat-原生js封装
+简介：格式化输入，方便验证
+[演示](http://widget.huanghanlian.com/inputFormat/)
+```javascript
+new inputFormat("selector",options,callback(api));
+```
+
+## 许可证
+
+[Apache License 2.0](https://github.com/huanghanzhilian/widget/blob/master/LICENSE)
+
+MIT License
+
+Copyright (c) 2024 Jipeng Huang
\ No newline at end of file
diff --git a/accordion/index.html b/accordion/index.html
index 9b072d8..7ee7543 100644
--- a/accordion/index.html
+++ b/accordion/index.html
@@ -49,7 +49,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
 
 	<div class="main">
diff --git a/bannerha/index.html b/bannerha/index.html
index 5ec70d8..9da38f9 100644
--- a/bannerha/index.html
+++ b/bannerha/index.html
@@ -96,7 +96,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 
diff --git a/calendar/index.html b/calendar/index.html
index 4dd0272..c48c0cb 100644
--- a/calendar/index.html
+++ b/calendar/index.html
@@ -70,7 +70,7 @@
     <body>
     	<div class="header">
             <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-            <a href="/widget/">返回首页</a>
+            <a href="/">返回首页</a>
         </div>
         <div class="main">
             <div class="calendar calendar1"></div>
diff --git a/citys/index.html b/citys/index.html
index c527003..89ffc10 100644
--- a/citys/index.html
+++ b/citys/index.html
@@ -27,7 +27,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 
diff --git a/countdown/index.html b/countdown/index.html
index 183fa02..3a58487 100644
--- a/countdown/index.html
+++ b/countdown/index.html
@@ -17,7 +17,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
     	<div class="countdown">
diff --git a/dialog/index.html b/dialog/index.html
index ad78170..e96cf67 100644
--- a/dialog/index.html
+++ b/dialog/index.html
@@ -63,7 +63,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
     	<button id="btn1" class="button">打开对话框</button>
diff --git a/imagezoom/index.html b/imagezoom/index.html
index a3edeac..22cdf6a 100644
--- a/imagezoom/index.html
+++ b/imagezoom/index.html
@@ -28,7 +28,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 
diff --git a/inputFormat/index.html b/inputFormat/index.html
index 77a1473..d0627ce 100644
--- a/inputFormat/index.html
+++ b/inputFormat/index.html
@@ -17,7 +17,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 		<div class="input">
diff --git a/magnifier/index.html b/magnifier/index.html
index b74bfd9..d2e1706 100644
--- a/magnifier/index.html
+++ b/magnifier/index.html
@@ -90,7 +90,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 		<div class="magnifier-box" id="magnifier1">
diff --git a/public/image/widget.png b/public/image/widget.png
new file mode 100644
index 0000000..2d8b6e9
Binary files /dev/null and b/public/image/widget.png differ
diff --git a/scrollbar/index.html b/scrollbar/index.html
index a92c6b8..0d5d66c 100644
--- a/scrollbar/index.html
+++ b/scrollbar/index.html
@@ -78,7 +78,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 		<div class="scrollbar s1 sllb1">
diff --git a/scrollup/index.html b/scrollup/index.html
index 77b56de..6e8f6f0 100644
--- a/scrollup/index.html
+++ b/scrollup/index.html
@@ -31,7 +31,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 
diff --git a/select/index.html b/select/index.html
index 4546453..4bb712b 100644
--- a/select/index.html
+++ b/select/index.html
@@ -78,7 +78,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 
diff --git a/suggestion/index.html b/suggestion/index.html
index b0ff00b..60980c7 100644
--- a/suggestion/index.html
+++ b/suggestion/index.html
@@ -46,7 +46,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 		<div class="search">
diff --git a/tabpanel/index.html b/tabpanel/index.html
index 61c0383..a002029 100644
--- a/tabpanel/index.html
+++ b/tabpanel/index.html
@@ -73,7 +73,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">
 		<div class="tabpanel-container" id="tabpanel1">
diff --git a/tabs/index.html b/tabs/index.html
index 859a039..952c418 100644
--- a/tabs/index.html
+++ b/tabs/index.html
@@ -99,7 +99,7 @@
 <body>
 	<div class="header">
         <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
-        <a href="/widget/">返回首页</a>
+        <a href="/">返回首页</a>
     </div>
     <div class="main">