From 8e45abc90fac24005529f9381c40f55fee503fcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Wed, 18 Sep 2024 13:40:42 +0800
Subject: [PATCH 01/13] =?UTF-8?q?20240918=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\346\240\274\350\241\250\345\215\225.md" | 201 ++++++++++++++++++
 ...76\347\275\256\346\240\267\345\274\217.md" | 129 +++++++++++
 2 files changed, 330 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
new file mode 100644
index 00000000..bbbdbcbd
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
@@ -0,0 +1,201 @@
+# 表格（table）
+
+### 基本结构
+```html
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        table,
+        th,
+        tr,
+        td{
+            border: 1px solid;
+        }
+       table{
+          /* 合并边框*/
+            border-collapse:collapse ;
+            width: 200px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <table>
+        <!-- 标题 -->
+        <caption><h3>我是标题</h3></caption>
+        <!-- 表头 -->
+            <tr>
+                <td colspan="2">内容</td>
+                <!-- <td>内容</td> -->
+                <td rowspan="2">内容</td>
+            </tr>
+           <!-- 表格主体 -->
+            <tr>
+                <td>内容</td>
+                <td>内容</td>
+                <!-- <td>内容</td> -->
+            </tr>
+        <!-- 表尾 -->
+            <tr>
+                <td>内容</td>
+                <td>内容</td>
+                <td>内容</td>
+            </tr>
+    </table>
+</body>
+</html>
+```
+- `thead,tbody,tfoot`可省略，但添加后可以不按顺序
+- `tr`表示行，它在子元素是`th`（标题单元格）和`td`（单元格）
+- `border-collapse:collapse;`合并边框 ;
+- `border-collapse:seperate;`使边框分离
+
+
+#### 表格单元格合并
+  
+               
+ - 跨行合并：` <td rowspan="2">内容</td>` ，合并一列在单元格
+                
+ - 跨列合并： `<td colspan="2">内容</td>`,合并一行的单元格
+
+
+
+
+
+
+ ---
+
+ # 表单
+1. `<form>` 元素用于创建表单，`action` 属性定义了表单数据提交的目标 `URL，method` 属性定义了提交数据的 `HTTP` 方法（这里使用的是 `"post"`）。
+2. `<label>` 元素用于为表单元素添加标签，提高可访问性。
+3. `<input>` 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 `<label>` 元素，name 属性用于标识表单字段。
+4. `<select>` 元素用于创建下拉列表，而 `<option>` 元素用于定义下拉列表中的选项。
+
+
+### 表单内容（HTML 结构）
+
+1. `<form>`：定义表单的开始和结束
+   ```html
+   <form action="" method="post">
+     <!-- 表单元素 -->
+   </form>
+   ```
+
+2. `<input>`：用于创建各种类型的输入控件
+   - 文本输入：`<input type="text" name="username">`
+   - 密码输入：`<input type="password" name="password" >`
+   - 单选按钮：`<input type="radio" name="gender" value="male"> 性别`
+   - 复选框：`<input type="checkbox"> `
+   - 提交按钮：`<input type="submit" value="Submit">`
+        - bottom：普通按钮 ，submit：提交按钮，reset：重置
+3. `<select>`：创建下拉列表
+   ```html
+   <select name="options">
+     <option value="option1">Option 1</option>
+     <option value="option2">Option 2</option>
+   </select>
+   ```
+
+4. `<textarea>`：创建多行文本输入控件
+   ```html
+   <textarea name="message" rows="4" cols="50"></textarea>
+   ```
+
+5. `<button>`：创建一个可点击的按钮。
+   ```html
+   <button type="button" name="button">Click Me!</button>
+   ```
+
+6. `<label>`：为 `<input>` 元素定义标签。（可用在点击按钮）单选框，复选框
+   ```html
+   <label for="name">Name:</label>
+   <input type="text" id="name" name="username">
+   ```
+
+7. `<datalist>`：为 `<input>` 元素提供选项列表。
+   ```html
+   <input type="text" list="browsers">
+   <datalist id="browsers">
+     <option value="Chrome">
+     <option value="Firefox">
+     <option value="Internet Explorer">
+     <option value="Opera">
+     <option value="Safari">
+   </datalist>
+   ```
+
+### 表单样式（CSS）
+
+表单的样式可以通过 CSS 来定义，以下是一些基本的 CSS 样式示例：
+
+1. 设置输入框的样式：
+   ```css
+   input[type="text"] {
+     width: 200px;
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+2. 设置下拉列表的样式：
+   ```css
+   select {
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+3. 设置文本区域的样式：
+   ```css
+   textarea {
+     width: 300px;
+     height: 100px;
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+4. 设置按钮的样式：
+   ```css
+   button {
+     padding: 10px 20px;
+     margin: 5px;
+     background-color: #f8f8f8;
+     border: 1px solid #ddd;
+     border-radius: 5px;
+     cursor: pointer;
+   }
+   button:hover {
+     background-color: #e9e9e9;
+   }
+   ```
+
+5. 设置标签的样式：
+   ```css
+   label {
+     display: block;
+     margin: 10px 0 5px;
+   }
+   ```
+
+6. 设置整个表单的样式：
+   ```css
+   form {
+     background-color: #f8f8f8;
+     padding: 20px;
+     border-radius: 10px;
+     max-width: 400px;
+     margin: auto;
+   }
+   ```
+
diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md" "b/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
new file mode 100644
index 00000000..490117f8
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
@@ -0,0 +1,129 @@
+# 为表格中的特定单元格（行中的某一列）应用唯一的样式
+
+### 1. 使用类（Class）选择器
+
+- 特定的单元格添加一个类，并在 CSS 中定义该类的样式。
+
+```html
+<table>
+  <tr>
+    <td class="special">特定的单元格</td>
+    <td>啊哈</td>
+  </tr>
+  <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  .special {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 2. 使用 ID 选择器
+
+- 不推荐为多个单元格使用 ID（因为 ID 应该是唯一的）
+
+```html
+<table>
+  <tr>
+    <td id="specialCell">特定单元格</td>
+    <td>啊哈</td>
+  </tr>
+   <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  #specialCell {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 3. 使用属性选择器
+
+- 一个特定的属性可以区分这个单元格，可以使用属性选择器。
+
+```html
+<table>
+  <tr>
+    <td data-special="true">特定单元格</td>
+    <td>啊哈</td>
+  </tr>
+  <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  td[data-special="true"] {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 4. 使用 `:nth-child()` 伪类选择器
+
+- 样式化一行中的特定列，可以使用 `:nth-child()` 选择器。
+
+```html
+<table>
+  <tr>
+    <td>Cell 1</td>
+    <td>Special Cell 2</td>
+    <td>Cell 3</td>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+    <td>Cell 3</td>
+  </tr>
+</table>
+
+<style>
+  tr td:nth-child(2) {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+在这个例子中，每行的第二个 `<td>` 都会被样式化。
+
+### 5. 使用行和列的索引
+
+结合 `:nth-child()` 和 `:nth-of-type()` 选择器，**可以更精确地定位特定的单元格**
+
+```html
+<table>
+  <tr>
+    <td>Cell A1</td>
+    <td>Special Cell B1</td>
+    <td>Cell C1</td>
+  </tr>
+  <tr>
+    <td>Cell A2</td>
+    <td>Cell B2</td>
+    <td>Cell C2</td>
+  </tr>
+</table>
+
+<style>
+  tr:nth-child(1) td:nth-of-type(2) {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+
-- 
Gitee


From 772f2bbadf356decc12580d32acc07861f58d9e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 14:49:01 +0800
Subject: [PATCH 02/13] =?UTF-8?q?20240919=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240919-1.\350\241\250\345\215\225.md"   | 107 +++++++++++++
 ...50\345\215\225\344\275\234\344\270\232.md" | 150 ++++++++++++++++++
 2 files changed, 257 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
new file mode 100644
index 00000000..75265e63
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
@@ -0,0 +1,107 @@
+# 表单
+
+1. 解决单选框中只能点小圆圈才能选中在问题:
+ - input中在id必须与lable标签中的for表达一致
+   ```html
+    <!-- 第一种方法 -->
+    <input type="radio" name="sex" id="man"><label for="man">男</label>
+    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
+
+    <!-- 第二种方法 -->
+    <label for="man"><input type="radio" name="" id="man">男</label>
+    <label for="woman"><input type="radio" name="" id="woman">女</label>
+   ```
+
+2. `marquee`滚动字幕标签
+   - `direction="right"`:移动在目标方向，属性值：left（从右向左移动，默认值），right，up，down
+   - `behavior="slide"`:行为方式，属性值：slide（只移动一次）
+   - `scrollamount="30"`移动在速度
+   - `loop="3"`:循环多少圈，负值表示无限循环
+   ```
+    <marquee behavior="alternate" direction="down">哈哈哈</marquee>
+   ```
+
+3. H5框架
+   
+   ```html
+    <!-- 以前在框架 -->
+    <!-- 头部 -->
+    <div class="header">
+        <ul class="nav"></ul>
+    </div>
+    <!-- 主体部分 -->
+      <div class="main">
+         <!-- 文章 -->
+          <div class="article"></div>
+          <!-- 侧边栏 -->
+           <div class="aside"></div>
+      </div>
+      <!-- 底部 -->
+      <div class="footer">
+
+      </div>
+       <!-- H5现框架（新在语义标签） -->
+    <!-- 头部 -->
+      <header>
+         <ul class="nav"></ul>
+      </header>
+
+      <!-- 主体部分 -->
+       <div class="main">
+           <!-- 文章 -->
+          <article></article>
+          <!-- 侧边栏 -->
+          <aside></aside>
+       </div>
+        <!-- 底部 -->
+       <footer></footer>
+   ```
+
+4. H5新增的语义标签
+
+   - `<section>`:表示区块
+   - `<article>` ：表示文章
+   - `<header>`：表示页眉
+   - `<footer>`：表示页脚
+   - `<nav>`：表示导航
+   - `<aside>`：表示侧边栏
+   - `<figure>`：表示媒介内容分组
+   - `<mark>`：表示标记
+   - `<progress>`：表示进度
+   - `<time>`：表示日期
+
+5. H5新增在表单类型
+ - `email`:只能输入email格式。自带验证功能
+ - `tel`：手机号码
+ - `url`：只能输入url格式
+ - `number`：只能输入数字
+ - `search`：搜索框
+ - `range`：滑动条
+ - `color`：拾色器
+ - `time`：时间
+ - `date`：日期
+ - `datetime`：时间日期
+ - `month`：月份
+ - `week`：星期
+
+ 6. 表单元素（标签）
+  - `datalist`数据列表
+   ```html
+   <input type="text" list="myData">
+   <datalist id="myData">
+     <option>ha</option>
+     <option>haha</option>
+     <option>hahaha</option>
+   </datalist>
+   ```
+   - input里的list属性和datalist进行了绑定
+
+ 7. 表单属性
+  - `placeholder`:占位符（提示文字）
+  - `autofocus`：自动获取焦点
+  - `multiple`：文件上传多选或者多个邮箱地址
+  - `autocomplete`：自动完成（填充），on开启（默认），off（取消
+  - `form`：指定表单项属于哪个form，处理复杂表单时需要
+  - `novalidate`：关闭默认的验证功能（只能加给form）
+  - `required`：表示必填项
+  - `pattern`：自定义正则，验证表单
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md" "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
new file mode 100644
index 00000000..3e78d5d7
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
@@ -0,0 +1,150 @@
+### 六、使用 `<audio>` 和 `<video>` 元素
+
+- 任务：创建一个网页，使用 `<audio>` 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 `<video>` 元素嵌入一个视频文件，并添加全屏播放功能
+
+- [audio](http://sji1r5tg3.sabkt.gdipper.com/7.png)
+- [video](http://sji1r5tg3.sabkt.gdipper.com/8.png)
+```html
+<audio src="../imgs/3.mp3" controls muted autoplay loop></audio>
+<video src="../imgs/4.mp4" controls></video>
+```    
+
+
+
+### 七、使用 `<canvas>` 元素
+
+ - 任务：使用 `<canvas>` 元素绘制一个简单的动画，比如一个移动的方块。 任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
+- [canvas](http://sji1r5tg3.sabkt.gdipper.com/9.png)
+```html
+<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
+        haha
+</canvas>
+
+<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid #000000;">
+            haha
+</canvas>
+
+<script>
+                // 获取 canvas 元素和绘图上下文
+                const canvas = document.getElementById('canvas');
+                const ctx = canvas.getContext('2d');
+                
+                let x = 0;
+                let y = 0;
+                const dx = 2;
+                const dy = 2;
+                const squareSize = 50;
+                
+                function drawSquare() {
+                  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
+                  ctx.fillStyle = 'skyblue'; // 设置填充颜色
+                  ctx.fillRect(x, y, squareSize, squareSize); // 绘制方块
+                  x += dx; // 更新方块位置
+                  y += dy;
+                  if (x + squareSize > canvas.width || x < 0) dx = -dx; // 碰到边缘反弹
+                  if (y + squareSize > canvas.height || y < 0) dy = -dy; // 碰到边缘反弹
+                  requestAnimationFrame(drawSquare); // 递归调用实现动画效果
+                }
+                
+                drawSquare(); // 开始动画
+</script>
+```
+
+### 八、使用 `<details>` 和 `<summary>` 元素
+- 任务：创建一个 FAQ 页面，使用 `<details>` 和 `<summary>` 元素来组织问题和答案，使其可以折叠和展开。
+- [details](http://sji1r5tg3.sabkt.gdipper.com/10.png)
+
+```html
+<h1>问答题</h1>
+
+<details>
+  <summary>css的三大特性</summary>
+  <p>继承性、层叠性、优先级</p>
+</details>
+
+<details>
+  <summary>元素显示模式（显示方式）</summary>
+  <p> 块级元素（独占一行），行内元素（一行可显示多个）</p>
+</details>
+
+<details>
+  <summary>复合选择器有什么</summary>
+  <p>后代选择器，子代选择器，并集选择器，交集选择器</p>
+</details>
+
+<details>
+  <summary>什么是锚链接</summary>
+  <p>给链接起一个名字，作用在本页面或者其他页面的不同位置进行跳转。使用`name`属性或者`id`属性给那个特定的位置起名字</p>
+</details>
+
+<details>
+  <summary>head标签里面，表示页面的配置，有什么配置？</summary>
+  <p>字符集、关键字、页面描述、页面标题、IE适配、视口、iphone小图标等</p>
+</details>
+```
+
+### 九、使用 <datalist> 元素
+- 任务：创建一个表单，其中包含一个文本输入框，使用 元素提供自动完成建议。
+[datalist](http://sji1r5tg3.sabkt.gdipper.com/11.png)
+```html
+<form action="" method="post">
+  <label for="city">选择城市:</label>
+  <input list="cities" id="city" name="city" type="text">
+  <datalist id="cities">
+    <option value="上海">
+    <option value="北京">
+    <option value="天津">
+    <option value="福建">
+    <option value="浙江">
+    <option value="香港">
+    <option value="广东">
+    <option value="厦门">
+    <option value="湖南">
+    <option value="江西">
+  </datalist>
+  <input type="submit" value="提交">
+</form>
+```
+
+### 十、使用 <figure> 和 <figcaption> 元素
+- 任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。
+- [figure]{http://sji1r5tg3.sabkt.gdipper.com/12.png}
+```html
+<style>
+  figure {
+    margin: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: inline-block;
+  }
+  figcaption {
+    font-style: italic;
+    caption-side: bottom;
+  }
+</style>
+</head>
+<body>
+<h1>My Photo Gallery</h1>
+
+<figure>
+  <img src="../imgs/or.jpg" alt="风景图" width="600">
+  <figcaption> 2024-09-19</figcaption>
+</figure>
+</body>
+```
+
+### 十一、使用 <picture> 元素
+- 任务：创建一个图片画廊，使用 <picture> 元素来提供不同分辨率的图片，以便在不同设备上优化显示效果。
+- [picture](http://sji1r5tg3.sabkt.gdipper.com/13.png)
+```html
+<h1>Responsive Image Gallery</h1>
+
+<picture>
+  <source srcset="../imgs/or.jpg" media="(min-width: 1000px)">
+  <source srcset="../imgs/or.jpg" media="(min-width: 500px)">
+  <img src="../imgs/or.jpg" alt="A responsive image">
+</picture>
+
+<p>yeyeyeyeyeyeyeyeyeyeyeyeye</p>
+
+```
\ No newline at end of file
-- 
Gitee


From d7d74b16a09b70a4a885412524f2fa0f4c86ca88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 15:04:58 +0800
Subject: [PATCH 03/13] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...40919-2.html\350\241\250\345\215\225.html" | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html" "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
new file mode 100644
index 00000000..e156e855
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <form action="">
+        <table>
+            <tr>
+                <td>用户名</td>
+                <td>:</td>
+                <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
+            </tr>
+            <tr>
+                <td>密码</td>
+                <td>:</td>
+                <td><input type="password" placeholder="请输入密码"></td>
+            </tr>
+            <tr>
+                <td>兴趣爱好</td>
+                <td>:</td>
+                <td>
+                    <input type="checkbox" name="" id="">吃
+                    <input type="checkbox" name="" id="">喝
+                    <input type="checkbox" name="" id="">玩
+                    <input type="checkbox" name="" id="" checked>乐
+                </td>
+            </tr>
+            <tr>
+                <td>性别</td>
+                <td>:</td>
+                <td>
+                   <label for="man"> <input type="radio" name="" id="man">男</label>
+                   <label for="woman"> <input type="radio" name="" id="woman" checked>女</label>
+                </td>
+            </tr>
+            <tr>
+                <td>上传文件</td>
+                <td>:</td>
+                <td><input type="file" multiple></td>
+            </tr>
+            <tr>
+                <td>电话号码</td>
+                <td>:</td>
+                <td><input type="tel"></td>
+            </tr>
+            <tr>
+                <td>日期</td>
+                <td>:</td>
+                <td><input type="date"></td>
+            </tr>
+            <tr>
+                <td>省份</td>
+                <td>:</td>
+                <td>
+                    <select name="" id="">
+                        <option>北京</option>
+                        <option>上海</option>
+                        <option selected>福建</option>
+                        <option>浙江</option>
+                        <option>海南</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>自我介绍</td>
+                <td>:</td>
+                <td>
+                    <textarea name="" id="" cols="30" rows="10"></textarea>
+                </td>
+            </tr>
+         
+          
+            <tr>
+                <td></td>
+                <td> </td>
+                <td>
+                    <input type="reset">
+                    <input type="submit" value="按钮">
+                    <input type="button" value="普通按钮">
+                </td>
+            </tr>
+           
+        </table>
+    </form>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 4153b47484ef7701bf4b3b975d4358fbfc49be6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 07:04:31 +0000
Subject: [PATCH 04/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\345\215\225\344\275\234\344\270\232.md" | 150 ------------------
 1 file changed, 150 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md" "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
deleted file mode 100644
index 3e78d5d7..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
+++ /dev/null
@@ -1,150 +0,0 @@
-### 六、使用 `<audio>` 和 `<video>` 元素
-
-- 任务：创建一个网页，使用 `<audio>` 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 `<video>` 元素嵌入一个视频文件，并添加全屏播放功能
-
-- [audio](http://sji1r5tg3.sabkt.gdipper.com/7.png)
-- [video](http://sji1r5tg3.sabkt.gdipper.com/8.png)
-```html
-<audio src="../imgs/3.mp3" controls muted autoplay loop></audio>
-<video src="../imgs/4.mp4" controls></video>
-```    
-
-
-
-### 七、使用 `<canvas>` 元素
-
- - 任务：使用 `<canvas>` 元素绘制一个简单的动画，比如一个移动的方块。 任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
-- [canvas](http://sji1r5tg3.sabkt.gdipper.com/9.png)
-```html
-<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
-        haha
-</canvas>
-
-<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid #000000;">
-            haha
-</canvas>
-
-<script>
-                // 获取 canvas 元素和绘图上下文
-                const canvas = document.getElementById('canvas');
-                const ctx = canvas.getContext('2d');
-                
-                let x = 0;
-                let y = 0;
-                const dx = 2;
-                const dy = 2;
-                const squareSize = 50;
-                
-                function drawSquare() {
-                  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                  ctx.fillStyle = 'skyblue'; // 设置填充颜色
-                  ctx.fillRect(x, y, squareSize, squareSize); // 绘制方块
-                  x += dx; // 更新方块位置
-                  y += dy;
-                  if (x + squareSize > canvas.width || x < 0) dx = -dx; // 碰到边缘反弹
-                  if (y + squareSize > canvas.height || y < 0) dy = -dy; // 碰到边缘反弹
-                  requestAnimationFrame(drawSquare); // 递归调用实现动画效果
-                }
-                
-                drawSquare(); // 开始动画
-</script>
-```
-
-### 八、使用 `<details>` 和 `<summary>` 元素
-- 任务：创建一个 FAQ 页面，使用 `<details>` 和 `<summary>` 元素来组织问题和答案，使其可以折叠和展开。
-- [details](http://sji1r5tg3.sabkt.gdipper.com/10.png)
-
-```html
-<h1>问答题</h1>
-
-<details>
-  <summary>css的三大特性</summary>
-  <p>继承性、层叠性、优先级</p>
-</details>
-
-<details>
-  <summary>元素显示模式（显示方式）</summary>
-  <p> 块级元素（独占一行），行内元素（一行可显示多个）</p>
-</details>
-
-<details>
-  <summary>复合选择器有什么</summary>
-  <p>后代选择器，子代选择器，并集选择器，交集选择器</p>
-</details>
-
-<details>
-  <summary>什么是锚链接</summary>
-  <p>给链接起一个名字，作用在本页面或者其他页面的不同位置进行跳转。使用`name`属性或者`id`属性给那个特定的位置起名字</p>
-</details>
-
-<details>
-  <summary>head标签里面，表示页面的配置，有什么配置？</summary>
-  <p>字符集、关键字、页面描述、页面标题、IE适配、视口、iphone小图标等</p>
-</details>
-```
-
-### 九、使用 <datalist> 元素
-- 任务：创建一个表单，其中包含一个文本输入框，使用 元素提供自动完成建议。
-[datalist](http://sji1r5tg3.sabkt.gdipper.com/11.png)
-```html
-<form action="" method="post">
-  <label for="city">选择城市:</label>
-  <input list="cities" id="city" name="city" type="text">
-  <datalist id="cities">
-    <option value="上海">
-    <option value="北京">
-    <option value="天津">
-    <option value="福建">
-    <option value="浙江">
-    <option value="香港">
-    <option value="广东">
-    <option value="厦门">
-    <option value="湖南">
-    <option value="江西">
-  </datalist>
-  <input type="submit" value="提交">
-</form>
-```
-
-### 十、使用 <figure> 和 <figcaption> 元素
-- 任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。
-- [figure]{http://sji1r5tg3.sabkt.gdipper.com/12.png}
-```html
-<style>
-  figure {
-    margin: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    display: inline-block;
-  }
-  figcaption {
-    font-style: italic;
-    caption-side: bottom;
-  }
-</style>
-</head>
-<body>
-<h1>My Photo Gallery</h1>
-
-<figure>
-  <img src="../imgs/or.jpg" alt="风景图" width="600">
-  <figcaption> 2024-09-19</figcaption>
-</figure>
-</body>
-```
-
-### 十一、使用 <picture> 元素
-- 任务：创建一个图片画廊，使用 <picture> 元素来提供不同分辨率的图片，以便在不同设备上优化显示效果。
-- [picture](http://sji1r5tg3.sabkt.gdipper.com/13.png)
-```html
-<h1>Responsive Image Gallery</h1>
-
-<picture>
-  <source srcset="../imgs/or.jpg" media="(min-width: 1000px)">
-  <source srcset="../imgs/or.jpg" media="(min-width: 500px)">
-  <img src="../imgs/or.jpg" alt="A responsive image">
-</picture>
-
-<p>yeyeyeyeyeyeyeyeyeyeyeyeye</p>
-
-```
\ No newline at end of file
-- 
Gitee


From b8212afb8f43dab4d5d75f9e9a660d7621fec1bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 07:04:41 +0000
Subject: [PATCH 05/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-2.html=E8=A1=A8=E5=8D=95.h?=
 =?UTF-8?q?tml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...40919-2.html\350\241\250\345\215\225.html" | 89 -------------------
 1 file changed, 89 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html" "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
deleted file mode 100644
index e156e855..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <form action="">
-        <table>
-            <tr>
-                <td>用户名</td>
-                <td>:</td>
-                <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
-            </tr>
-            <tr>
-                <td>密码</td>
-                <td>:</td>
-                <td><input type="password" placeholder="请输入密码"></td>
-            </tr>
-            <tr>
-                <td>兴趣爱好</td>
-                <td>:</td>
-                <td>
-                    <input type="checkbox" name="" id="">吃
-                    <input type="checkbox" name="" id="">喝
-                    <input type="checkbox" name="" id="">玩
-                    <input type="checkbox" name="" id="" checked>乐
-                </td>
-            </tr>
-            <tr>
-                <td>性别</td>
-                <td>:</td>
-                <td>
-                   <label for="man"> <input type="radio" name="" id="man">男</label>
-                   <label for="woman"> <input type="radio" name="" id="woman" checked>女</label>
-                </td>
-            </tr>
-            <tr>
-                <td>上传文件</td>
-                <td>:</td>
-                <td><input type="file" multiple></td>
-            </tr>
-            <tr>
-                <td>电话号码</td>
-                <td>:</td>
-                <td><input type="tel"></td>
-            </tr>
-            <tr>
-                <td>日期</td>
-                <td>:</td>
-                <td><input type="date"></td>
-            </tr>
-            <tr>
-                <td>省份</td>
-                <td>:</td>
-                <td>
-                    <select name="" id="">
-                        <option>北京</option>
-                        <option>上海</option>
-                        <option selected>福建</option>
-                        <option>浙江</option>
-                        <option>海南</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>自我介绍</td>
-                <td>:</td>
-                <td>
-                    <textarea name="" id="" cols="30" rows="10"></textarea>
-                </td>
-            </tr>
-         
-          
-            <tr>
-                <td></td>
-                <td> </td>
-                <td>
-                    <input type="reset">
-                    <input type="submit" value="按钮">
-                    <input type="button" value="普通按钮">
-                </td>
-            </tr>
-           
-        </table>
-    </form>
-</body>
-</html>
\ No newline at end of file
-- 
Gitee


From fd749224255806fab916ef0834b7240440777763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 07:04:48 +0000
Subject: [PATCH 06/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-1.=E8=A1=A8=E5=8D=95.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240919-1.\350\241\250\345\215\225.md"   | 107 ------------------
 1 file changed, 107 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
deleted file mode 100644
index 75265e63..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
+++ /dev/null
@@ -1,107 +0,0 @@
-# 表单
-
-1. 解决单选框中只能点小圆圈才能选中在问题:
- - input中在id必须与lable标签中的for表达一致
-   ```html
-    <!-- 第一种方法 -->
-    <input type="radio" name="sex" id="man"><label for="man">男</label>
-    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
-
-    <!-- 第二种方法 -->
-    <label for="man"><input type="radio" name="" id="man">男</label>
-    <label for="woman"><input type="radio" name="" id="woman">女</label>
-   ```
-
-2. `marquee`滚动字幕标签
-   - `direction="right"`:移动在目标方向，属性值：left（从右向左移动，默认值），right，up，down
-   - `behavior="slide"`:行为方式，属性值：slide（只移动一次）
-   - `scrollamount="30"`移动在速度
-   - `loop="3"`:循环多少圈，负值表示无限循环
-   ```
-    <marquee behavior="alternate" direction="down">哈哈哈</marquee>
-   ```
-
-3. H5框架
-   
-   ```html
-    <!-- 以前在框架 -->
-    <!-- 头部 -->
-    <div class="header">
-        <ul class="nav"></ul>
-    </div>
-    <!-- 主体部分 -->
-      <div class="main">
-         <!-- 文章 -->
-          <div class="article"></div>
-          <!-- 侧边栏 -->
-           <div class="aside"></div>
-      </div>
-      <!-- 底部 -->
-      <div class="footer">
-
-      </div>
-       <!-- H5现框架（新在语义标签） -->
-    <!-- 头部 -->
-      <header>
-         <ul class="nav"></ul>
-      </header>
-
-      <!-- 主体部分 -->
-       <div class="main">
-           <!-- 文章 -->
-          <article></article>
-          <!-- 侧边栏 -->
-          <aside></aside>
-       </div>
-        <!-- 底部 -->
-       <footer></footer>
-   ```
-
-4. H5新增的语义标签
-
-   - `<section>`:表示区块
-   - `<article>` ：表示文章
-   - `<header>`：表示页眉
-   - `<footer>`：表示页脚
-   - `<nav>`：表示导航
-   - `<aside>`：表示侧边栏
-   - `<figure>`：表示媒介内容分组
-   - `<mark>`：表示标记
-   - `<progress>`：表示进度
-   - `<time>`：表示日期
-
-5. H5新增在表单类型
- - `email`:只能输入email格式。自带验证功能
- - `tel`：手机号码
- - `url`：只能输入url格式
- - `number`：只能输入数字
- - `search`：搜索框
- - `range`：滑动条
- - `color`：拾色器
- - `time`：时间
- - `date`：日期
- - `datetime`：时间日期
- - `month`：月份
- - `week`：星期
-
- 6. 表单元素（标签）
-  - `datalist`数据列表
-   ```html
-   <input type="text" list="myData">
-   <datalist id="myData">
-     <option>ha</option>
-     <option>haha</option>
-     <option>hahaha</option>
-   </datalist>
-   ```
-   - input里的list属性和datalist进行了绑定
-
- 7. 表单属性
-  - `placeholder`:占位符（提示文字）
-  - `autofocus`：自动获取焦点
-  - `multiple`：文件上传多选或者多个邮箱地址
-  - `autocomplete`：自动完成（填充），on开启（默认），off（取消
-  - `form`：指定表单项属于哪个form，处理复杂表单时需要
-  - `novalidate`：关闭默认的验证功能（只能加给form）
-  - `required`：表示必填项
-  - `pattern`：自定义正则，验证表单
\ No newline at end of file
-- 
Gitee


From cf84b2249bfa17b8bbf92ff380466429b8f514fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sat, 21 Sep 2024 15:13:57 +0800
Subject: [PATCH 07/13] =?UTF-8?q?20240921=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240919-1.\350\241\250\345\215\225.md"   | 107 +++++++++++++
 ...40919-2.html\350\241\250\345\215\225.html" |  89 +++++++++++
 ...50\345\215\225\344\275\234\344\270\232.md" | 150 ++++++++++++++++++
 3 files changed, 346 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
new file mode 100644
index 00000000..75265e63
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
@@ -0,0 +1,107 @@
+# 表单
+
+1. 解决单选框中只能点小圆圈才能选中在问题:
+ - input中在id必须与lable标签中的for表达一致
+   ```html
+    <!-- 第一种方法 -->
+    <input type="radio" name="sex" id="man"><label for="man">男</label>
+    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
+
+    <!-- 第二种方法 -->
+    <label for="man"><input type="radio" name="" id="man">男</label>
+    <label for="woman"><input type="radio" name="" id="woman">女</label>
+   ```
+
+2. `marquee`滚动字幕标签
+   - `direction="right"`:移动在目标方向，属性值：left（从右向左移动，默认值），right，up，down
+   - `behavior="slide"`:行为方式，属性值：slide（只移动一次）
+   - `scrollamount="30"`移动在速度
+   - `loop="3"`:循环多少圈，负值表示无限循环
+   ```
+    <marquee behavior="alternate" direction="down">哈哈哈</marquee>
+   ```
+
+3. H5框架
+   
+   ```html
+    <!-- 以前在框架 -->
+    <!-- 头部 -->
+    <div class="header">
+        <ul class="nav"></ul>
+    </div>
+    <!-- 主体部分 -->
+      <div class="main">
+         <!-- 文章 -->
+          <div class="article"></div>
+          <!-- 侧边栏 -->
+           <div class="aside"></div>
+      </div>
+      <!-- 底部 -->
+      <div class="footer">
+
+      </div>
+       <!-- H5现框架（新在语义标签） -->
+    <!-- 头部 -->
+      <header>
+         <ul class="nav"></ul>
+      </header>
+
+      <!-- 主体部分 -->
+       <div class="main">
+           <!-- 文章 -->
+          <article></article>
+          <!-- 侧边栏 -->
+          <aside></aside>
+       </div>
+        <!-- 底部 -->
+       <footer></footer>
+   ```
+
+4. H5新增的语义标签
+
+   - `<section>`:表示区块
+   - `<article>` ：表示文章
+   - `<header>`：表示页眉
+   - `<footer>`：表示页脚
+   - `<nav>`：表示导航
+   - `<aside>`：表示侧边栏
+   - `<figure>`：表示媒介内容分组
+   - `<mark>`：表示标记
+   - `<progress>`：表示进度
+   - `<time>`：表示日期
+
+5. H5新增在表单类型
+ - `email`:只能输入email格式。自带验证功能
+ - `tel`：手机号码
+ - `url`：只能输入url格式
+ - `number`：只能输入数字
+ - `search`：搜索框
+ - `range`：滑动条
+ - `color`：拾色器
+ - `time`：时间
+ - `date`：日期
+ - `datetime`：时间日期
+ - `month`：月份
+ - `week`：星期
+
+ 6. 表单元素（标签）
+  - `datalist`数据列表
+   ```html
+   <input type="text" list="myData">
+   <datalist id="myData">
+     <option>ha</option>
+     <option>haha</option>
+     <option>hahaha</option>
+   </datalist>
+   ```
+   - input里的list属性和datalist进行了绑定
+
+ 7. 表单属性
+  - `placeholder`:占位符（提示文字）
+  - `autofocus`：自动获取焦点
+  - `multiple`：文件上传多选或者多个邮箱地址
+  - `autocomplete`：自动完成（填充），on开启（默认），off（取消
+  - `form`：指定表单项属于哪个form，处理复杂表单时需要
+  - `novalidate`：关闭默认的验证功能（只能加给form）
+  - `required`：表示必填项
+  - `pattern`：自定义正则，验证表单
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html" "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
new file mode 100644
index 00000000..e156e855
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <form action="">
+        <table>
+            <tr>
+                <td>用户名</td>
+                <td>:</td>
+                <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
+            </tr>
+            <tr>
+                <td>密码</td>
+                <td>:</td>
+                <td><input type="password" placeholder="请输入密码"></td>
+            </tr>
+            <tr>
+                <td>兴趣爱好</td>
+                <td>:</td>
+                <td>
+                    <input type="checkbox" name="" id="">吃
+                    <input type="checkbox" name="" id="">喝
+                    <input type="checkbox" name="" id="">玩
+                    <input type="checkbox" name="" id="" checked>乐
+                </td>
+            </tr>
+            <tr>
+                <td>性别</td>
+                <td>:</td>
+                <td>
+                   <label for="man"> <input type="radio" name="" id="man">男</label>
+                   <label for="woman"> <input type="radio" name="" id="woman" checked>女</label>
+                </td>
+            </tr>
+            <tr>
+                <td>上传文件</td>
+                <td>:</td>
+                <td><input type="file" multiple></td>
+            </tr>
+            <tr>
+                <td>电话号码</td>
+                <td>:</td>
+                <td><input type="tel"></td>
+            </tr>
+            <tr>
+                <td>日期</td>
+                <td>:</td>
+                <td><input type="date"></td>
+            </tr>
+            <tr>
+                <td>省份</td>
+                <td>:</td>
+                <td>
+                    <select name="" id="">
+                        <option>北京</option>
+                        <option>上海</option>
+                        <option selected>福建</option>
+                        <option>浙江</option>
+                        <option>海南</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>自我介绍</td>
+                <td>:</td>
+                <td>
+                    <textarea name="" id="" cols="30" rows="10"></textarea>
+                </td>
+            </tr>
+         
+          
+            <tr>
+                <td></td>
+                <td> </td>
+                <td>
+                    <input type="reset">
+                    <input type="submit" value="按钮">
+                    <input type="button" value="普通按钮">
+                </td>
+            </tr>
+           
+        </table>
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md" "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
new file mode 100644
index 00000000..3e78d5d7
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
@@ -0,0 +1,150 @@
+### 六、使用 `<audio>` 和 `<video>` 元素
+
+- 任务：创建一个网页，使用 `<audio>` 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 `<video>` 元素嵌入一个视频文件，并添加全屏播放功能
+
+- [audio](http://sji1r5tg3.sabkt.gdipper.com/7.png)
+- [video](http://sji1r5tg3.sabkt.gdipper.com/8.png)
+```html
+<audio src="../imgs/3.mp3" controls muted autoplay loop></audio>
+<video src="../imgs/4.mp4" controls></video>
+```    
+
+
+
+### 七、使用 `<canvas>` 元素
+
+ - 任务：使用 `<canvas>` 元素绘制一个简单的动画，比如一个移动的方块。 任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
+- [canvas](http://sji1r5tg3.sabkt.gdipper.com/9.png)
+```html
+<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
+        haha
+</canvas>
+
+<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid #000000;">
+            haha
+</canvas>
+
+<script>
+                // 获取 canvas 元素和绘图上下文
+                const canvas = document.getElementById('canvas');
+                const ctx = canvas.getContext('2d');
+                
+                let x = 0;
+                let y = 0;
+                const dx = 2;
+                const dy = 2;
+                const squareSize = 50;
+                
+                function drawSquare() {
+                  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
+                  ctx.fillStyle = 'skyblue'; // 设置填充颜色
+                  ctx.fillRect(x, y, squareSize, squareSize); // 绘制方块
+                  x += dx; // 更新方块位置
+                  y += dy;
+                  if (x + squareSize > canvas.width || x < 0) dx = -dx; // 碰到边缘反弹
+                  if (y + squareSize > canvas.height || y < 0) dy = -dy; // 碰到边缘反弹
+                  requestAnimationFrame(drawSquare); // 递归调用实现动画效果
+                }
+                
+                drawSquare(); // 开始动画
+</script>
+```
+
+### 八、使用 `<details>` 和 `<summary>` 元素
+- 任务：创建一个 FAQ 页面，使用 `<details>` 和 `<summary>` 元素来组织问题和答案，使其可以折叠和展开。
+- [details](http://sji1r5tg3.sabkt.gdipper.com/10.png)
+
+```html
+<h1>问答题</h1>
+
+<details>
+  <summary>css的三大特性</summary>
+  <p>继承性、层叠性、优先级</p>
+</details>
+
+<details>
+  <summary>元素显示模式（显示方式）</summary>
+  <p> 块级元素（独占一行），行内元素（一行可显示多个）</p>
+</details>
+
+<details>
+  <summary>复合选择器有什么</summary>
+  <p>后代选择器，子代选择器，并集选择器，交集选择器</p>
+</details>
+
+<details>
+  <summary>什么是锚链接</summary>
+  <p>给链接起一个名字，作用在本页面或者其他页面的不同位置进行跳转。使用`name`属性或者`id`属性给那个特定的位置起名字</p>
+</details>
+
+<details>
+  <summary>head标签里面，表示页面的配置，有什么配置？</summary>
+  <p>字符集、关键字、页面描述、页面标题、IE适配、视口、iphone小图标等</p>
+</details>
+```
+
+### 九、使用 <datalist> 元素
+- 任务：创建一个表单，其中包含一个文本输入框，使用 元素提供自动完成建议。
+[datalist](http://sji1r5tg3.sabkt.gdipper.com/11.png)
+```html
+<form action="" method="post">
+  <label for="city">选择城市:</label>
+  <input list="cities" id="city" name="city" type="text">
+  <datalist id="cities">
+    <option value="上海">
+    <option value="北京">
+    <option value="天津">
+    <option value="福建">
+    <option value="浙江">
+    <option value="香港">
+    <option value="广东">
+    <option value="厦门">
+    <option value="湖南">
+    <option value="江西">
+  </datalist>
+  <input type="submit" value="提交">
+</form>
+```
+
+### 十、使用 <figure> 和 <figcaption> 元素
+- 任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。
+- [figure]{http://sji1r5tg3.sabkt.gdipper.com/12.png}
+```html
+<style>
+  figure {
+    margin: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: inline-block;
+  }
+  figcaption {
+    font-style: italic;
+    caption-side: bottom;
+  }
+</style>
+</head>
+<body>
+<h1>My Photo Gallery</h1>
+
+<figure>
+  <img src="../imgs/or.jpg" alt="风景图" width="600">
+  <figcaption> 2024-09-19</figcaption>
+</figure>
+</body>
+```
+
+### 十一、使用 <picture> 元素
+- 任务：创建一个图片画廊，使用 <picture> 元素来提供不同分辨率的图片，以便在不同设备上优化显示效果。
+- [picture](http://sji1r5tg3.sabkt.gdipper.com/13.png)
+```html
+<h1>Responsive Image Gallery</h1>
+
+<picture>
+  <source srcset="../imgs/or.jpg" media="(min-width: 1000px)">
+  <source srcset="../imgs/or.jpg" media="(min-width: 500px)">
+  <img src="../imgs/or.jpg" alt="A responsive image">
+</picture>
+
+<p>yeyeyeyeyeyeyeyeyeyeyeyeye</p>
+
+```
\ No newline at end of file
-- 
Gitee


From 38fed878e2dd8717db4980cc1d3ab1e546ca40ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 08:29:25 +0000
Subject: [PATCH 08/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240918-1.=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\346\240\274\350\241\250\345\215\225.md" | 201 ------------------
 1 file changed, 201 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
deleted file mode 100644
index bbbdbcbd..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
+++ /dev/null
@@ -1,201 +0,0 @@
-# 表格（table）
-
-### 基本结构
-```html
- <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <style>
-        table,
-        th,
-        tr,
-        td{
-            border: 1px solid;
-        }
-       table{
-          /* 合并边框*/
-            border-collapse:collapse ;
-            width: 200px;
-            text-align: center;
-        }
-    </style>
-</head>
-<body>
-    <table>
-        <!-- 标题 -->
-        <caption><h3>我是标题</h3></caption>
-        <!-- 表头 -->
-            <tr>
-                <td colspan="2">内容</td>
-                <!-- <td>内容</td> -->
-                <td rowspan="2">内容</td>
-            </tr>
-           <!-- 表格主体 -->
-            <tr>
-                <td>内容</td>
-                <td>内容</td>
-                <!-- <td>内容</td> -->
-            </tr>
-        <!-- 表尾 -->
-            <tr>
-                <td>内容</td>
-                <td>内容</td>
-                <td>内容</td>
-            </tr>
-    </table>
-</body>
-</html>
-```
-- `thead,tbody,tfoot`可省略，但添加后可以不按顺序
-- `tr`表示行，它在子元素是`th`（标题单元格）和`td`（单元格）
-- `border-collapse:collapse;`合并边框 ;
-- `border-collapse:seperate;`使边框分离
-
-
-#### 表格单元格合并
-  
-               
- - 跨行合并：` <td rowspan="2">内容</td>` ，合并一列在单元格
-                
- - 跨列合并： `<td colspan="2">内容</td>`,合并一行的单元格
-
-
-
-
-
-
- ---
-
- # 表单
-1. `<form>` 元素用于创建表单，`action` 属性定义了表单数据提交的目标 `URL，method` 属性定义了提交数据的 `HTTP` 方法（这里使用的是 `"post"`）。
-2. `<label>` 元素用于为表单元素添加标签，提高可访问性。
-3. `<input>` 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 `<label>` 元素，name 属性用于标识表单字段。
-4. `<select>` 元素用于创建下拉列表，而 `<option>` 元素用于定义下拉列表中的选项。
-
-
-### 表单内容（HTML 结构）
-
-1. `<form>`：定义表单的开始和结束
-   ```html
-   <form action="" method="post">
-     <!-- 表单元素 -->
-   </form>
-   ```
-
-2. `<input>`：用于创建各种类型的输入控件
-   - 文本输入：`<input type="text" name="username">`
-   - 密码输入：`<input type="password" name="password" >`
-   - 单选按钮：`<input type="radio" name="gender" value="male"> 性别`
-   - 复选框：`<input type="checkbox"> `
-   - 提交按钮：`<input type="submit" value="Submit">`
-        - bottom：普通按钮 ，submit：提交按钮，reset：重置
-3. `<select>`：创建下拉列表
-   ```html
-   <select name="options">
-     <option value="option1">Option 1</option>
-     <option value="option2">Option 2</option>
-   </select>
-   ```
-
-4. `<textarea>`：创建多行文本输入控件
-   ```html
-   <textarea name="message" rows="4" cols="50"></textarea>
-   ```
-
-5. `<button>`：创建一个可点击的按钮。
-   ```html
-   <button type="button" name="button">Click Me!</button>
-   ```
-
-6. `<label>`：为 `<input>` 元素定义标签。（可用在点击按钮）单选框，复选框
-   ```html
-   <label for="name">Name:</label>
-   <input type="text" id="name" name="username">
-   ```
-
-7. `<datalist>`：为 `<input>` 元素提供选项列表。
-   ```html
-   <input type="text" list="browsers">
-   <datalist id="browsers">
-     <option value="Chrome">
-     <option value="Firefox">
-     <option value="Internet Explorer">
-     <option value="Opera">
-     <option value="Safari">
-   </datalist>
-   ```
-
-### 表单样式（CSS）
-
-表单的样式可以通过 CSS 来定义，以下是一些基本的 CSS 样式示例：
-
-1. 设置输入框的样式：
-   ```css
-   input[type="text"] {
-     width: 200px;
-     padding: 5px;
-     margin: 5px;
-     border: 1px solid #ccc;
-     border-radius: 5px;
-   }
-   ```
-
-2. 设置下拉列表的样式：
-   ```css
-   select {
-     padding: 5px;
-     margin: 5px;
-     border: 1px solid #ccc;
-     border-radius: 5px;
-   }
-   ```
-
-3. 设置文本区域的样式：
-   ```css
-   textarea {
-     width: 300px;
-     height: 100px;
-     padding: 5px;
-     margin: 5px;
-     border: 1px solid #ccc;
-     border-radius: 5px;
-   }
-   ```
-
-4. 设置按钮的样式：
-   ```css
-   button {
-     padding: 10px 20px;
-     margin: 5px;
-     background-color: #f8f8f8;
-     border: 1px solid #ddd;
-     border-radius: 5px;
-     cursor: pointer;
-   }
-   button:hover {
-     background-color: #e9e9e9;
-   }
-   ```
-
-5. 设置标签的样式：
-   ```css
-   label {
-     display: block;
-     margin: 10px 0 5px;
-   }
-   ```
-
-6. 设置整个表单的样式：
-   ```css
-   form {
-     background-color: #f8f8f8;
-     padding: 20px;
-     border-radius: 10px;
-     max-width: 400px;
-     margin: auto;
-   }
-   ```
-
-- 
Gitee


From acd3cd811f7436cd0eb1b04207ac2c59ca1b0a5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 08:29:31 +0000
Subject: [PATCH 09/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\345\215\225\344\275\234\344\270\232.md" | 150 ------------------
 1 file changed, 150 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md" "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
deleted file mode 100644
index 3e78d5d7..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
+++ /dev/null
@@ -1,150 +0,0 @@
-### 六、使用 `<audio>` 和 `<video>` 元素
-
-- 任务：创建一个网页，使用 `<audio>` 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 `<video>` 元素嵌入一个视频文件，并添加全屏播放功能
-
-- [audio](http://sji1r5tg3.sabkt.gdipper.com/7.png)
-- [video](http://sji1r5tg3.sabkt.gdipper.com/8.png)
-```html
-<audio src="../imgs/3.mp3" controls muted autoplay loop></audio>
-<video src="../imgs/4.mp4" controls></video>
-```    
-
-
-
-### 七、使用 `<canvas>` 元素
-
- - 任务：使用 `<canvas>` 元素绘制一个简单的动画，比如一个移动的方块。 任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
-- [canvas](http://sji1r5tg3.sabkt.gdipper.com/9.png)
-```html
-<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
-        haha
-</canvas>
-
-<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid #000000;">
-            haha
-</canvas>
-
-<script>
-                // 获取 canvas 元素和绘图上下文
-                const canvas = document.getElementById('canvas');
-                const ctx = canvas.getContext('2d');
-                
-                let x = 0;
-                let y = 0;
-                const dx = 2;
-                const dy = 2;
-                const squareSize = 50;
-                
-                function drawSquare() {
-                  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
-                  ctx.fillStyle = 'skyblue'; // 设置填充颜色
-                  ctx.fillRect(x, y, squareSize, squareSize); // 绘制方块
-                  x += dx; // 更新方块位置
-                  y += dy;
-                  if (x + squareSize > canvas.width || x < 0) dx = -dx; // 碰到边缘反弹
-                  if (y + squareSize > canvas.height || y < 0) dy = -dy; // 碰到边缘反弹
-                  requestAnimationFrame(drawSquare); // 递归调用实现动画效果
-                }
-                
-                drawSquare(); // 开始动画
-</script>
-```
-
-### 八、使用 `<details>` 和 `<summary>` 元素
-- 任务：创建一个 FAQ 页面，使用 `<details>` 和 `<summary>` 元素来组织问题和答案，使其可以折叠和展开。
-- [details](http://sji1r5tg3.sabkt.gdipper.com/10.png)
-
-```html
-<h1>问答题</h1>
-
-<details>
-  <summary>css的三大特性</summary>
-  <p>继承性、层叠性、优先级</p>
-</details>
-
-<details>
-  <summary>元素显示模式（显示方式）</summary>
-  <p> 块级元素（独占一行），行内元素（一行可显示多个）</p>
-</details>
-
-<details>
-  <summary>复合选择器有什么</summary>
-  <p>后代选择器，子代选择器，并集选择器，交集选择器</p>
-</details>
-
-<details>
-  <summary>什么是锚链接</summary>
-  <p>给链接起一个名字，作用在本页面或者其他页面的不同位置进行跳转。使用`name`属性或者`id`属性给那个特定的位置起名字</p>
-</details>
-
-<details>
-  <summary>head标签里面，表示页面的配置，有什么配置？</summary>
-  <p>字符集、关键字、页面描述、页面标题、IE适配、视口、iphone小图标等</p>
-</details>
-```
-
-### 九、使用 <datalist> 元素
-- 任务：创建一个表单，其中包含一个文本输入框，使用 元素提供自动完成建议。
-[datalist](http://sji1r5tg3.sabkt.gdipper.com/11.png)
-```html
-<form action="" method="post">
-  <label for="city">选择城市:</label>
-  <input list="cities" id="city" name="city" type="text">
-  <datalist id="cities">
-    <option value="上海">
-    <option value="北京">
-    <option value="天津">
-    <option value="福建">
-    <option value="浙江">
-    <option value="香港">
-    <option value="广东">
-    <option value="厦门">
-    <option value="湖南">
-    <option value="江西">
-  </datalist>
-  <input type="submit" value="提交">
-</form>
-```
-
-### 十、使用 <figure> 和 <figcaption> 元素
-- 任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。
-- [figure]{http://sji1r5tg3.sabkt.gdipper.com/12.png}
-```html
-<style>
-  figure {
-    margin: 20px;
-    border: 1px solid #ccc;
-    padding: 10px;
-    display: inline-block;
-  }
-  figcaption {
-    font-style: italic;
-    caption-side: bottom;
-  }
-</style>
-</head>
-<body>
-<h1>My Photo Gallery</h1>
-
-<figure>
-  <img src="../imgs/or.jpg" alt="风景图" width="600">
-  <figcaption> 2024-09-19</figcaption>
-</figure>
-</body>
-```
-
-### 十一、使用 <picture> 元素
-- 任务：创建一个图片画廊，使用 <picture> 元素来提供不同分辨率的图片，以便在不同设备上优化显示效果。
-- [picture](http://sji1r5tg3.sabkt.gdipper.com/13.png)
-```html
-<h1>Responsive Image Gallery</h1>
-
-<picture>
-  <source srcset="../imgs/or.jpg" media="(min-width: 1000px)">
-  <source srcset="../imgs/or.jpg" media="(min-width: 500px)">
-  <img src="../imgs/or.jpg" alt="A responsive image">
-</picture>
-
-<p>yeyeyeyeyeyeyeyeyeyeyeyeye</p>
-
-```
\ No newline at end of file
-- 
Gitee


From ae1572e627909343a31cb1095e26a2352bfd9769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 08:29:39 +0000
Subject: [PATCH 10/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-2.html=E8=A1=A8=E5=8D=95.h?=
 =?UTF-8?q?tml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...40919-2.html\350\241\250\345\215\225.html" | 89 -------------------
 1 file changed, 89 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html" "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
deleted file mode 100644
index e156e855..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <form action="">
-        <table>
-            <tr>
-                <td>用户名</td>
-                <td>:</td>
-                <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
-            </tr>
-            <tr>
-                <td>密码</td>
-                <td>:</td>
-                <td><input type="password" placeholder="请输入密码"></td>
-            </tr>
-            <tr>
-                <td>兴趣爱好</td>
-                <td>:</td>
-                <td>
-                    <input type="checkbox" name="" id="">吃
-                    <input type="checkbox" name="" id="">喝
-                    <input type="checkbox" name="" id="">玩
-                    <input type="checkbox" name="" id="" checked>乐
-                </td>
-            </tr>
-            <tr>
-                <td>性别</td>
-                <td>:</td>
-                <td>
-                   <label for="man"> <input type="radio" name="" id="man">男</label>
-                   <label for="woman"> <input type="radio" name="" id="woman" checked>女</label>
-                </td>
-            </tr>
-            <tr>
-                <td>上传文件</td>
-                <td>:</td>
-                <td><input type="file" multiple></td>
-            </tr>
-            <tr>
-                <td>电话号码</td>
-                <td>:</td>
-                <td><input type="tel"></td>
-            </tr>
-            <tr>
-                <td>日期</td>
-                <td>:</td>
-                <td><input type="date"></td>
-            </tr>
-            <tr>
-                <td>省份</td>
-                <td>:</td>
-                <td>
-                    <select name="" id="">
-                        <option>北京</option>
-                        <option>上海</option>
-                        <option selected>福建</option>
-                        <option>浙江</option>
-                        <option>海南</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>自我介绍</td>
-                <td>:</td>
-                <td>
-                    <textarea name="" id="" cols="30" rows="10"></textarea>
-                </td>
-            </tr>
-         
-          
-            <tr>
-                <td></td>
-                <td> </td>
-                <td>
-                    <input type="reset">
-                    <input type="submit" value="按钮">
-                    <input type="button" value="普通按钮">
-                </td>
-            </tr>
-           
-        </table>
-    </form>
-</body>
-</html>
\ No newline at end of file
-- 
Gitee


From 00e5317c0c20ee521b9485b1b245c07ff2f5d26b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 08:29:51 +0000
Subject: [PATCH 11/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240919-1.=E8=A1=A8=E5=8D=95.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240919-1.\350\241\250\345\215\225.md"   | 107 ------------------
 1 file changed, 107 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
deleted file mode 100644
index 75265e63..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
+++ /dev/null
@@ -1,107 +0,0 @@
-# 表单
-
-1. 解决单选框中只能点小圆圈才能选中在问题:
- - input中在id必须与lable标签中的for表达一致
-   ```html
-    <!-- 第一种方法 -->
-    <input type="radio" name="sex" id="man"><label for="man">男</label>
-    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
-
-    <!-- 第二种方法 -->
-    <label for="man"><input type="radio" name="" id="man">男</label>
-    <label for="woman"><input type="radio" name="" id="woman">女</label>
-   ```
-
-2. `marquee`滚动字幕标签
-   - `direction="right"`:移动在目标方向，属性值：left（从右向左移动，默认值），right，up，down
-   - `behavior="slide"`:行为方式，属性值：slide（只移动一次）
-   - `scrollamount="30"`移动在速度
-   - `loop="3"`:循环多少圈，负值表示无限循环
-   ```
-    <marquee behavior="alternate" direction="down">哈哈哈</marquee>
-   ```
-
-3. H5框架
-   
-   ```html
-    <!-- 以前在框架 -->
-    <!-- 头部 -->
-    <div class="header">
-        <ul class="nav"></ul>
-    </div>
-    <!-- 主体部分 -->
-      <div class="main">
-         <!-- 文章 -->
-          <div class="article"></div>
-          <!-- 侧边栏 -->
-           <div class="aside"></div>
-      </div>
-      <!-- 底部 -->
-      <div class="footer">
-
-      </div>
-       <!-- H5现框架（新在语义标签） -->
-    <!-- 头部 -->
-      <header>
-         <ul class="nav"></ul>
-      </header>
-
-      <!-- 主体部分 -->
-       <div class="main">
-           <!-- 文章 -->
-          <article></article>
-          <!-- 侧边栏 -->
-          <aside></aside>
-       </div>
-        <!-- 底部 -->
-       <footer></footer>
-   ```
-
-4. H5新增的语义标签
-
-   - `<section>`:表示区块
-   - `<article>` ：表示文章
-   - `<header>`：表示页眉
-   - `<footer>`：表示页脚
-   - `<nav>`：表示导航
-   - `<aside>`：表示侧边栏
-   - `<figure>`：表示媒介内容分组
-   - `<mark>`：表示标记
-   - `<progress>`：表示进度
-   - `<time>`：表示日期
-
-5. H5新增在表单类型
- - `email`:只能输入email格式。自带验证功能
- - `tel`：手机号码
- - `url`：只能输入url格式
- - `number`：只能输入数字
- - `search`：搜索框
- - `range`：滑动条
- - `color`：拾色器
- - `time`：时间
- - `date`：日期
- - `datetime`：时间日期
- - `month`：月份
- - `week`：星期
-
- 6. 表单元素（标签）
-  - `datalist`数据列表
-   ```html
-   <input type="text" list="myData">
-   <datalist id="myData">
-     <option>ha</option>
-     <option>haha</option>
-     <option>hahaha</option>
-   </datalist>
-   ```
-   - input里的list属性和datalist进行了绑定
-
- 7. 表单属性
-  - `placeholder`:占位符（提示文字）
-  - `autofocus`：自动获取焦点
-  - `multiple`：文件上传多选或者多个邮箱地址
-  - `autocomplete`：自动完成（填充），on开启（默认），off（取消
-  - `form`：指定表单项属于哪个form，处理复杂表单时需要
-  - `novalidate`：关闭默认的验证功能（只能加给form）
-  - `required`：表示必填项
-  - `pattern`：自定义正则，验证表单
\ No newline at end of file
-- 
Gitee


From 951f57f568a0394475ee5504af09f4f7d71fd525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 08:29:59 +0000
Subject: [PATCH 12/13] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20?=
 =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7/20240918-2.=E5=A6=82=E4=BD=95?=
 =?UTF-8?q?=E4=B8=BA=E8=A1=A8=E6=A0=BC=E4=B8=AD=E7=9A=84=E7=89=B9=E5=AE=9A?=
 =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E8=AE=BE=E7=BD=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...76\347\275\256\346\240\267\345\274\217.md" | 129 ------------------
 1 file changed, 129 deletions(-)
 delete mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md" "b/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
deleted file mode 100644
index 490117f8..00000000
--- "a/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
+++ /dev/null
@@ -1,129 +0,0 @@
-# 为表格中的特定单元格（行中的某一列）应用唯一的样式
-
-### 1. 使用类（Class）选择器
-
-- 特定的单元格添加一个类，并在 CSS 中定义该类的样式。
-
-```html
-<table>
-  <tr>
-    <td class="special">特定的单元格</td>
-    <td>啊哈</td>
-  </tr>
-  <tr>
-    <td>哦吼</td>
-    <td>行动</td>
-  </tr>
-</table>
-
-<style>
-  .special {
-    background-color: #ccc; /* 背景颜色 */
-    font-weight: bold; /* 加粗文字 */
-  }
-</style>
-```
-
-### 2. 使用 ID 选择器
-
-- 不推荐为多个单元格使用 ID（因为 ID 应该是唯一的）
-
-```html
-<table>
-  <tr>
-    <td id="specialCell">特定单元格</td>
-    <td>啊哈</td>
-  </tr>
-   <tr>
-    <td>哦吼</td>
-    <td>行动</td>
-  </tr>
-</table>
-
-<style>
-  #specialCell {
-    background-color: #ccc; /* 背景颜色 */
-    font-weight: bold; /* 加粗文字 */
-  }
-</style>
-```
-
-### 3. 使用属性选择器
-
-- 一个特定的属性可以区分这个单元格，可以使用属性选择器。
-
-```html
-<table>
-  <tr>
-    <td data-special="true">特定单元格</td>
-    <td>啊哈</td>
-  </tr>
-  <tr>
-    <td>哦吼</td>
-    <td>行动</td>
-  </tr>
-</table>
-
-<style>
-  td[data-special="true"] {
-    background-color: #ccc; /* 背景颜色 */
-    font-weight: bold; /* 加粗文字 */
-  }
-</style>
-```
-
-### 4. 使用 `:nth-child()` 伪类选择器
-
-- 样式化一行中的特定列，可以使用 `:nth-child()` 选择器。
-
-```html
-<table>
-  <tr>
-    <td>Cell 1</td>
-    <td>Special Cell 2</td>
-    <td>Cell 3</td>
-  </tr>
-  <tr>
-    <td>Cell 1</td>
-    <td>Cell 2</td>
-    <td>Cell 3</td>
-  </tr>
-</table>
-
-<style>
-  tr td:nth-child(2) {
-    background-color: #ccc; /* 背景颜色 */
-    font-weight: bold; /* 加粗文字 */
-  }
-</style>
-```
-
-在这个例子中，每行的第二个 `<td>` 都会被样式化。
-
-### 5. 使用行和列的索引
-
-结合 `:nth-child()` 和 `:nth-of-type()` 选择器，**可以更精确地定位特定的单元格**
-
-```html
-<table>
-  <tr>
-    <td>Cell A1</td>
-    <td>Special Cell B1</td>
-    <td>Cell C1</td>
-  </tr>
-  <tr>
-    <td>Cell A2</td>
-    <td>Cell B2</td>
-    <td>Cell C2</td>
-  </tr>
-</table>
-
-<style>
-  tr:nth-child(1) td:nth-of-type(2) {
-    background-color: #ccc; /* 背景颜色 */
-    font-weight: bold; /* 加粗文字 */
-  }
-</style>
-```
-
-
-- 
Gitee


From ba5248dcf2494313e563ae7e60fff247f90ba5fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 22 Sep 2024 16:38:18 +0800
Subject: [PATCH 13/13] =?UTF-8?q?20240922=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\346\240\274\350\241\250\345\215\225.md" | 201 ++++++++++++++++++
 ...76\347\275\256\346\240\267\345\274\217.md" | 129 +++++++++++
 .../20240919-1.\350\241\250\345\215\225.md"   | 107 ++++++++++
 ...40919-2.html\350\241\250\345\215\225.html" |  89 ++++++++
 ...50\345\215\225\344\275\234\344\270\232.md" | 150 +++++++++++++
 5 files changed, 676 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
new file mode 100644
index 00000000..bbbdbcbd
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240918-1.\350\241\250\346\240\274\350\241\250\345\215\225.md"
@@ -0,0 +1,201 @@
+# 表格（table）
+
+### 基本结构
+```html
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        table,
+        th,
+        tr,
+        td{
+            border: 1px solid;
+        }
+       table{
+          /* 合并边框*/
+            border-collapse:collapse ;
+            width: 200px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <table>
+        <!-- 标题 -->
+        <caption><h3>我是标题</h3></caption>
+        <!-- 表头 -->
+            <tr>
+                <td colspan="2">内容</td>
+                <!-- <td>内容</td> -->
+                <td rowspan="2">内容</td>
+            </tr>
+           <!-- 表格主体 -->
+            <tr>
+                <td>内容</td>
+                <td>内容</td>
+                <!-- <td>内容</td> -->
+            </tr>
+        <!-- 表尾 -->
+            <tr>
+                <td>内容</td>
+                <td>内容</td>
+                <td>内容</td>
+            </tr>
+    </table>
+</body>
+</html>
+```
+- `thead,tbody,tfoot`可省略，但添加后可以不按顺序
+- `tr`表示行，它在子元素是`th`（标题单元格）和`td`（单元格）
+- `border-collapse:collapse;`合并边框 ;
+- `border-collapse:seperate;`使边框分离
+
+
+#### 表格单元格合并
+  
+               
+ - 跨行合并：` <td rowspan="2">内容</td>` ，合并一列在单元格
+                
+ - 跨列合并： `<td colspan="2">内容</td>`,合并一行的单元格
+
+
+
+
+
+
+ ---
+
+ # 表单
+1. `<form>` 元素用于创建表单，`action` 属性定义了表单数据提交的目标 `URL，method` 属性定义了提交数据的 `HTTP` 方法（这里使用的是 `"post"`）。
+2. `<label>` 元素用于为表单元素添加标签，提高可访问性。
+3. `<input>` 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 `<label>` 元素，name 属性用于标识表单字段。
+4. `<select>` 元素用于创建下拉列表，而 `<option>` 元素用于定义下拉列表中的选项。
+
+
+### 表单内容（HTML 结构）
+
+1. `<form>`：定义表单的开始和结束
+   ```html
+   <form action="" method="post">
+     <!-- 表单元素 -->
+   </form>
+   ```
+
+2. `<input>`：用于创建各种类型的输入控件
+   - 文本输入：`<input type="text" name="username">`
+   - 密码输入：`<input type="password" name="password" >`
+   - 单选按钮：`<input type="radio" name="gender" value="male"> 性别`
+   - 复选框：`<input type="checkbox"> `
+   - 提交按钮：`<input type="submit" value="Submit">`
+        - bottom：普通按钮 ，submit：提交按钮，reset：重置
+3. `<select>`：创建下拉列表
+   ```html
+   <select name="options">
+     <option value="option1">Option 1</option>
+     <option value="option2">Option 2</option>
+   </select>
+   ```
+
+4. `<textarea>`：创建多行文本输入控件
+   ```html
+   <textarea name="message" rows="4" cols="50"></textarea>
+   ```
+
+5. `<button>`：创建一个可点击的按钮。
+   ```html
+   <button type="button" name="button">Click Me!</button>
+   ```
+
+6. `<label>`：为 `<input>` 元素定义标签。（可用在点击按钮）单选框，复选框
+   ```html
+   <label for="name">Name:</label>
+   <input type="text" id="name" name="username">
+   ```
+
+7. `<datalist>`：为 `<input>` 元素提供选项列表。
+   ```html
+   <input type="text" list="browsers">
+   <datalist id="browsers">
+     <option value="Chrome">
+     <option value="Firefox">
+     <option value="Internet Explorer">
+     <option value="Opera">
+     <option value="Safari">
+   </datalist>
+   ```
+
+### 表单样式（CSS）
+
+表单的样式可以通过 CSS 来定义，以下是一些基本的 CSS 样式示例：
+
+1. 设置输入框的样式：
+   ```css
+   input[type="text"] {
+     width: 200px;
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+2. 设置下拉列表的样式：
+   ```css
+   select {
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+3. 设置文本区域的样式：
+   ```css
+   textarea {
+     width: 300px;
+     height: 100px;
+     padding: 5px;
+     margin: 5px;
+     border: 1px solid #ccc;
+     border-radius: 5px;
+   }
+   ```
+
+4. 设置按钮的样式：
+   ```css
+   button {
+     padding: 10px 20px;
+     margin: 5px;
+     background-color: #f8f8f8;
+     border: 1px solid #ddd;
+     border-radius: 5px;
+     cursor: pointer;
+   }
+   button:hover {
+     background-color: #e9e9e9;
+   }
+   ```
+
+5. 设置标签的样式：
+   ```css
+   label {
+     display: block;
+     margin: 10px 0 5px;
+   }
+   ```
+
+6. 设置整个表单的样式：
+   ```css
+   form {
+     background-color: #f8f8f8;
+     padding: 20px;
+     border-radius: 10px;
+     max-width: 400px;
+     margin: auto;
+   }
+   ```
+
diff --git "a/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md" "b/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
new file mode 100644
index 00000000..490117f8
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240918-2.\345\246\202\344\275\225\344\270\272\350\241\250\346\240\274\344\270\255\347\232\204\347\211\271\345\256\232\345\215\225\345\205\203\346\240\274\350\256\276\347\275\256\346\240\267\345\274\217.md"
@@ -0,0 +1,129 @@
+# 为表格中的特定单元格（行中的某一列）应用唯一的样式
+
+### 1. 使用类（Class）选择器
+
+- 特定的单元格添加一个类，并在 CSS 中定义该类的样式。
+
+```html
+<table>
+  <tr>
+    <td class="special">特定的单元格</td>
+    <td>啊哈</td>
+  </tr>
+  <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  .special {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 2. 使用 ID 选择器
+
+- 不推荐为多个单元格使用 ID（因为 ID 应该是唯一的）
+
+```html
+<table>
+  <tr>
+    <td id="specialCell">特定单元格</td>
+    <td>啊哈</td>
+  </tr>
+   <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  #specialCell {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 3. 使用属性选择器
+
+- 一个特定的属性可以区分这个单元格，可以使用属性选择器。
+
+```html
+<table>
+  <tr>
+    <td data-special="true">特定单元格</td>
+    <td>啊哈</td>
+  </tr>
+  <tr>
+    <td>哦吼</td>
+    <td>行动</td>
+  </tr>
+</table>
+
+<style>
+  td[data-special="true"] {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+### 4. 使用 `:nth-child()` 伪类选择器
+
+- 样式化一行中的特定列，可以使用 `:nth-child()` 选择器。
+
+```html
+<table>
+  <tr>
+    <td>Cell 1</td>
+    <td>Special Cell 2</td>
+    <td>Cell 3</td>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Cell 2</td>
+    <td>Cell 3</td>
+  </tr>
+</table>
+
+<style>
+  tr td:nth-child(2) {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+在这个例子中，每行的第二个 `<td>` 都会被样式化。
+
+### 5. 使用行和列的索引
+
+结合 `:nth-child()` 和 `:nth-of-type()` 选择器，**可以更精确地定位特定的单元格**
+
+```html
+<table>
+  <tr>
+    <td>Cell A1</td>
+    <td>Special Cell B1</td>
+    <td>Cell C1</td>
+  </tr>
+  <tr>
+    <td>Cell A2</td>
+    <td>Cell B2</td>
+    <td>Cell C2</td>
+  </tr>
+</table>
+
+<style>
+  tr:nth-child(1) td:nth-of-type(2) {
+    background-color: #ccc; /* 背景颜色 */
+    font-weight: bold; /* 加粗文字 */
+  }
+</style>
+```
+
+
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md" "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
new file mode 100644
index 00000000..75265e63
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-1.\350\241\250\345\215\225.md"
@@ -0,0 +1,107 @@
+# 表单
+
+1. 解决单选框中只能点小圆圈才能选中在问题:
+ - input中在id必须与lable标签中的for表达一致
+   ```html
+    <!-- 第一种方法 -->
+    <input type="radio" name="sex" id="man"><label for="man">男</label>
+    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
+
+    <!-- 第二种方法 -->
+    <label for="man"><input type="radio" name="" id="man">男</label>
+    <label for="woman"><input type="radio" name="" id="woman">女</label>
+   ```
+
+2. `marquee`滚动字幕标签
+   - `direction="right"`:移动在目标方向，属性值：left（从右向左移动，默认值），right，up，down
+   - `behavior="slide"`:行为方式，属性值：slide（只移动一次）
+   - `scrollamount="30"`移动在速度
+   - `loop="3"`:循环多少圈，负值表示无限循环
+   ```
+    <marquee behavior="alternate" direction="down">哈哈哈</marquee>
+   ```
+
+3. H5框架
+   
+   ```html
+    <!-- 以前在框架 -->
+    <!-- 头部 -->
+    <div class="header">
+        <ul class="nav"></ul>
+    </div>
+    <!-- 主体部分 -->
+      <div class="main">
+         <!-- 文章 -->
+          <div class="article"></div>
+          <!-- 侧边栏 -->
+           <div class="aside"></div>
+      </div>
+      <!-- 底部 -->
+      <div class="footer">
+
+      </div>
+       <!-- H5现框架（新在语义标签） -->
+    <!-- 头部 -->
+      <header>
+         <ul class="nav"></ul>
+      </header>
+
+      <!-- 主体部分 -->
+       <div class="main">
+           <!-- 文章 -->
+          <article></article>
+          <!-- 侧边栏 -->
+          <aside></aside>
+       </div>
+        <!-- 底部 -->
+       <footer></footer>
+   ```
+
+4. H5新增的语义标签
+
+   - `<section>`:表示区块
+   - `<article>` ：表示文章
+   - `<header>`：表示页眉
+   - `<footer>`：表示页脚
+   - `<nav>`：表示导航
+   - `<aside>`：表示侧边栏
+   - `<figure>`：表示媒介内容分组
+   - `<mark>`：表示标记
+   - `<progress>`：表示进度
+   - `<time>`：表示日期
+
+5. H5新增在表单类型
+ - `email`:只能输入email格式。自带验证功能
+ - `tel`：手机号码
+ - `url`：只能输入url格式
+ - `number`：只能输入数字
+ - `search`：搜索框
+ - `range`：滑动条
+ - `color`：拾色器
+ - `time`：时间
+ - `date`：日期
+ - `datetime`：时间日期
+ - `month`：月份
+ - `week`：星期
+
+ 6. 表单元素（标签）
+  - `datalist`数据列表
+   ```html
+   <input type="text" list="myData">
+   <datalist id="myData">
+     <option>ha</option>
+     <option>haha</option>
+     <option>hahaha</option>
+   </datalist>
+   ```
+   - input里的list属性和datalist进行了绑定
+
+ 7. 表单属性
+  - `placeholder`:占位符（提示文字）
+  - `autofocus`：自动获取焦点
+  - `multiple`：文件上传多选或者多个邮箱地址
+  - `autocomplete`：自动完成（填充），on开启（默认），off（取消
+  - `form`：指定表单项属于哪个form，处理复杂表单时需要
+  - `novalidate`：关闭默认的验证功能（只能加给form）
+  - `required`：表示必填项
+  - `pattern`：自定义正则，验证表单
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html" "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
new file mode 100644
index 00000000..e156e855
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-2.html\350\241\250\345\215\225.html"
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <form action="">
+        <table>
+            <tr>
+                <td>用户名</td>
+                <td>:</td>
+                <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
+            </tr>
+            <tr>
+                <td>密码</td>
+                <td>:</td>
+                <td><input type="password" placeholder="请输入密码"></td>
+            </tr>
+            <tr>
+                <td>兴趣爱好</td>
+                <td>:</td>
+                <td>
+                    <input type="checkbox" name="" id="">吃
+                    <input type="checkbox" name="" id="">喝
+                    <input type="checkbox" name="" id="">玩
+                    <input type="checkbox" name="" id="" checked>乐
+                </td>
+            </tr>
+            <tr>
+                <td>性别</td>
+                <td>:</td>
+                <td>
+                   <label for="man"> <input type="radio" name="" id="man">男</label>
+                   <label for="woman"> <input type="radio" name="" id="woman" checked>女</label>
+                </td>
+            </tr>
+            <tr>
+                <td>上传文件</td>
+                <td>:</td>
+                <td><input type="file" multiple></td>
+            </tr>
+            <tr>
+                <td>电话号码</td>
+                <td>:</td>
+                <td><input type="tel"></td>
+            </tr>
+            <tr>
+                <td>日期</td>
+                <td>:</td>
+                <td><input type="date"></td>
+            </tr>
+            <tr>
+                <td>省份</td>
+                <td>:</td>
+                <td>
+                    <select name="" id="">
+                        <option>北京</option>
+                        <option>上海</option>
+                        <option selected>福建</option>
+                        <option>浙江</option>
+                        <option>海南</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>自我介绍</td>
+                <td>:</td>
+                <td>
+                    <textarea name="" id="" cols="30" rows="10"></textarea>
+                </td>
+            </tr>
+         
+          
+            <tr>
+                <td></td>
+                <td> </td>
+                <td>
+                    <input type="reset">
+                    <input type="submit" value="按钮">
+                    <input type="button" value="普通按钮">
+                </td>
+            </tr>
+           
+        </table>
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md" "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
new file mode 100644
index 00000000..3e78d5d7
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20240919-\350\241\250\345\215\225\344\275\234\344\270\232.md"
@@ -0,0 +1,150 @@
+### 六、使用 `<audio>` 和 `<video>` 元素
+
+- 任务：创建一个网页，使用 `<audio>` 元素嵌入一个音乐文件，并允许用户控制播放、暂停和音量调节。 任务：使用 `<video>` 元素嵌入一个视频文件，并添加全屏播放功能
+
+- [audio](http://sji1r5tg3.sabkt.gdipper.com/7.png)
+- [video](http://sji1r5tg3.sabkt.gdipper.com/8.png)
+```html
+<audio src="../imgs/3.mp3" controls muted autoplay loop></audio>
+<video src="../imgs/4.mp4" controls></video>
+```    
+
+
+
+### 七、使用 `<canvas>` 元素
+
+ - 任务：使用 `<canvas>` 元素绘制一个简单的动画，比如一个移动的方块。 任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
+- [canvas](http://sji1r5tg3.sabkt.gdipper.com/9.png)
+```html
+<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;">
+        haha
+</canvas>
+
+<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid #000000;">
+            haha
+</canvas>
+
+<script>
+                // 获取 canvas 元素和绘图上下文
+                const canvas = document.getElementById('canvas');
+                const ctx = canvas.getContext('2d');
+                
+                let x = 0;
+                let y = 0;
+                const dx = 2;
+                const dy = 2;
+                const squareSize = 50;
+                
+                function drawSquare() {
+                  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
+                  ctx.fillStyle = 'skyblue'; // 设置填充颜色
+                  ctx.fillRect(x, y, squareSize, squareSize); // 绘制方块
+                  x += dx; // 更新方块位置
+                  y += dy;
+                  if (x + squareSize > canvas.width || x < 0) dx = -dx; // 碰到边缘反弹
+                  if (y + squareSize > canvas.height || y < 0) dy = -dy; // 碰到边缘反弹
+                  requestAnimationFrame(drawSquare); // 递归调用实现动画效果
+                }
+                
+                drawSquare(); // 开始动画
+</script>
+```
+
+### 八、使用 `<details>` 和 `<summary>` 元素
+- 任务：创建一个 FAQ 页面，使用 `<details>` 和 `<summary>` 元素来组织问题和答案，使其可以折叠和展开。
+- [details](http://sji1r5tg3.sabkt.gdipper.com/10.png)
+
+```html
+<h1>问答题</h1>
+
+<details>
+  <summary>css的三大特性</summary>
+  <p>继承性、层叠性、优先级</p>
+</details>
+
+<details>
+  <summary>元素显示模式（显示方式）</summary>
+  <p> 块级元素（独占一行），行内元素（一行可显示多个）</p>
+</details>
+
+<details>
+  <summary>复合选择器有什么</summary>
+  <p>后代选择器，子代选择器，并集选择器，交集选择器</p>
+</details>
+
+<details>
+  <summary>什么是锚链接</summary>
+  <p>给链接起一个名字，作用在本页面或者其他页面的不同位置进行跳转。使用`name`属性或者`id`属性给那个特定的位置起名字</p>
+</details>
+
+<details>
+  <summary>head标签里面，表示页面的配置，有什么配置？</summary>
+  <p>字符集、关键字、页面描述、页面标题、IE适配、视口、iphone小图标等</p>
+</details>
+```
+
+### 九、使用 <datalist> 元素
+- 任务：创建一个表单，其中包含一个文本输入框，使用 元素提供自动完成建议。
+[datalist](http://sji1r5tg3.sabkt.gdipper.com/11.png)
+```html
+<form action="" method="post">
+  <label for="city">选择城市:</label>
+  <input list="cities" id="city" name="city" type="text">
+  <datalist id="cities">
+    <option value="上海">
+    <option value="北京">
+    <option value="天津">
+    <option value="福建">
+    <option value="浙江">
+    <option value="香港">
+    <option value="广东">
+    <option value="厦门">
+    <option value="湖南">
+    <option value="江西">
+  </datalist>
+  <input type="submit" value="提交">
+</form>
+```
+
+### 十、使用 <figure> 和 <figcaption> 元素
+- 任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。
+- [figure]{http://sji1r5tg3.sabkt.gdipper.com/12.png}
+```html
+<style>
+  figure {
+    margin: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: inline-block;
+  }
+  figcaption {
+    font-style: italic;
+    caption-side: bottom;
+  }
+</style>
+</head>
+<body>
+<h1>My Photo Gallery</h1>
+
+<figure>
+  <img src="../imgs/or.jpg" alt="风景图" width="600">
+  <figcaption> 2024-09-19</figcaption>
+</figure>
+</body>
+```
+
+### 十一、使用 <picture> 元素
+- 任务：创建一个图片画廊，使用 <picture> 元素来提供不同分辨率的图片，以便在不同设备上优化显示效果。
+- [picture](http://sji1r5tg3.sabkt.gdipper.com/13.png)
+```html
+<h1>Responsive Image Gallery</h1>
+
+<picture>
+  <source srcset="../imgs/or.jpg" media="(min-width: 1000px)">
+  <source srcset="../imgs/or.jpg" media="(min-width: 500px)">
+  <img src="../imgs/or.jpg" alt="A responsive image">
+</picture>
+
+<p>yeyeyeyeyeyeyeyeyeyeyeyeye</p>
+
+```
\ No newline at end of file
-- 
Gitee

