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 0000000000000000000000000000000000000000..bbbdbcbd69a26a626acd5659b2d86b1b6e816c8f
--- /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 0000000000000000000000000000000000000000..490117f8fa6daf9dbff7a106312271e654be4a1d
--- /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 0000000000000000000000000000000000000000..75265e630e60ad010f6074c86332606264ca054a
--- /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 0000000000000000000000000000000000000000..e156e85535ad6450706766c8eacba35b686861ec
--- /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 0000000000000000000000000000000000000000..3e78d5d71de3b23e4081dfc3598e81fc64c7423f
--- /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
