diff --git "a/\345\220\264\345\255\237\345\275\244/20240918-\350\241\250\346\240\274\346\240\207\347\255\276\350\241\250\345\215\225\346\240\207\347\255\276.md" "b/\345\220\264\345\255\237\345\275\244/20240918-\350\241\250\346\240\274\346\240\207\347\255\276\350\241\250\345\215\225\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a5c48e83d7079b8dc7dc9560dacf20e126e8cbc1
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/20240918-\350\241\250\346\240\274\346\240\207\347\255\276\350\241\250\345\215\225\346\240\207\347\255\276.md"
@@ -0,0 +1,56 @@
+## 表格标签 `<table>`
+1. 
+```
+<table>
+    <caption>表格的标题</caption>
+    <tr>
+        <th>标题一</th>
+    </tr>
+    <tr>
+        <td>内容一</td>
+    </tr>
+</table>
+1. caption：表格的标题
+2. tr：行
+3. td：列
+4. th：加粗的单元格，相当于td+b
+```
+2. `<thead>`标签，`<tbody>`标签，`<tfoot>`标签
+    * 如果写了，那么三个标签的顺序可以任意，如果不写，浏览器解析并显示的时候是按照代码的顺序从上往下
+    * 当表格内容非常大非常多的时候，如果用这三个标签，那么数据可以边获取边显示。如果不写，必须等表格的全部内容从服务器获取完成才可以显示
+3. 设置边框：border：大小 形状 颜色
+4. 删除边框中的空格：border-collapse：collapse
+5. 文本居中：text-align：center
+6. 悬停效果 ： 标签:hover{...}
+7. 跨列合并：colspan 跨行合并 ：rowspan
+## 表单标签 `<form>`
+1. 用于服务器的交互，表单就是收集用户的信息，就是让用户填写的选择的
+2. 属性：
+    + name:表单的名称，用于js来操作或者控制表单时使用
+    + id：表单的名称，用于js来操作或者控制表单时使用
+    + action：指定表单数据的处理程序，一般时PHP
+    + method：表单数据的条件方式，一般取值：get（默认）和post
+3.`<form>`中套`<table>`
+4. 输入标签（文本框）：`<input>`
++ 属性
+```
+<input type="text" />
+type="属性值"
+1. text(默认)
+2. password:密码类型
+3.radio:单选按钮,name相同为一组
+4.checkbox:多选按钮，name相同为一组
+5.checked:单选按钮/默认选中状态
+6.hidden:隐藏框
+7.button:普通按钮
+8.submit:提交按钮
+9.reset:重置按钮
+10.下拉列表：
+<select>
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+</select>
+```
\ No newline at end of file
diff --git "a/\345\220\264\345\255\237\345\275\244/20240919-\350\241\250\346\240\274\346\240\207\347\255\276H5\350\257\246\350\247\243.md" "b/\345\220\264\345\255\237\345\275\244/20240919-\350\241\250\346\240\274\346\240\207\347\255\276H5\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..54734ead97cb3d4b4e6fbe44c3d534057b686e19
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/20240919-\350\241\250\346\240\274\346\240\207\347\255\276H5\350\257\246\350\247\243.md"
@@ -0,0 +1,85 @@
+## 表单标签
+### 一.属性值
+```
+1. 提示文字：placeholder=""
+2. 电子邮箱：email
+3. 手机号码：tel
+4. 多行文本：textarea
+5. 取色器：color
+6. 日期：date
+7. 日期时间：datetime-local 
+8. 文件：file 
+9. 图片：image
+10. 年月：month
+11. 数量：number
+```
+### 二.单选点击文字选中
+`<label for="id名"><input type="radio" name="值" id="id名">zhi</label>`
+### 三.滚动字符标签
+```
+<marquee>
+1. direction="left":移动的目标方向，left从右向左；right从左向右；up从下向上；down从上向下
+2. behavior="slide":行为方式，slide移动一次，scroll循环移动（默认）
+3. scrollamount="30"：移动的速度
+4.loop="3"循环多少圈
+5. scrolldelay="100"移动一次休息多长时间，单位是毫秒
+```
+## HTML5详解
+1. 广义概念：H5代表浏览器端技术的一个发展阶段，包括H5,CSS3,Javascript API在内的一套技术组合
+2. 总结：H5是新一代开发web富客户端应用程序整体解决方案。
+3. 应用场景
+    + 极具表现力的网页：内容简约而2不简单
+    + 网页应用程序
+        - 代替PC端的软件：iCloud 百度脑图等
+        - APP端的网页：淘宝京东美团等
+        - 微信端：公众号 小程序等
+    + 混合式本地应用
+    + 简单的游戏
+4. H5中新增的语义标签
+```
+<section>:区块
+<article>:文章
+<header>:页眉
+<footer>:页脚
+<nav>:导航
+<aside>:侧边栏
+<figure>:媒介内容分组
+<mark>:标记
+<progress>:进度
+<time>:日期
+```
+5. 表单元素（标签）
+```
+<input type="text" list="a">
+<datalist id="a">
+    <option>...</option>
+</datalist>
+```
+6.表单属性
+```
+placeholder：提示文字
+autofocus:自动获取焦点
+multiple:文件上次多选或多个邮箱地址
+autocomplete:自动完成
+form:指定表单项属于哪个form。处理复杂表单式会需要
+novalidate:关闭默认验证功能（只能加给from）
+required:必填项
+pattern:自定义正则，验证表单
+```
+## 多媒体
+1. 音频`<audio>`
+```
+<audio src="" autoplay controls>dalal</audio>
+autoplay:自动播放
+controls:控制条
+```
+2. 视频`<video>`
+```
+<video src="" autoplay controls>aaa</video>
+autoplay:自动播放
+controls:控制条
+loop:循环播放
+preload：预加载，同时设置autoplay时失效
+width：宽度
+height：高度
+```
\ No newline at end of file
diff --git "a/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240918-\350\241\250\346\240\274.md" "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240918-\350\241\250\346\240\274.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9c0d002d86892855d85f553f9ce819a81f6313da
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240918-\350\241\250\346\240\274.md"
@@ -0,0 +1,60 @@
+### 效果
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-18%20172849.png)
+```
+代码
+<!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,tr,th,td,caption{
+            border: 2px solid rgb(176, 250, 192);
+            border-collapse: collapse;
+        }
+        td:hover{
+            font-size: 20px;
+            background-color: aquamarine;
+        }
+        td,th{
+            text-align: center;
+            width: 100px;
+        }
+        th{
+            background-color: pink;
+        }
+        
+    </style>
+</head>
+<body>
+    <table>
+        <caption>nice</caption>
+        <tr>
+            <th>标题1</th>
+            <th>标题2</th>
+            <th>标题3</th>
+            <th>标题4</th>
+        </tr>
+        <tr>
+            <td>内容1</td>
+            <td colspan="2">内容2</td>
+            <!-- <td>内容3</td> -->
+            <td>内容4</td>
+        </tr>
+        <tr>
+            <td>内容1</td>
+            <td>内容2</td>
+            <td>内容3</td>
+            <td>内容4</td>
+        </tr>
+        <tr>
+            <td>内容1</td>
+            <td>内容2</td>
+            <td>内容3</td>
+            <td>内容4</td>
+        </tr>
+    </table>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240921-\345\205\203\347\264\240\347\273\203\344\271\240.md" "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240921-\345\205\203\347\264\240\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b8e3796e1a781ac1547f4b9a3fc51be42ef81d76
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240921-\345\205\203\347\264\240\347\273\203\344\271\240.md"
@@ -0,0 +1,240 @@
+### 使用 `<audio>` 和 `<video>` 元素
+[效果1](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20174142.png)
+``` 
+<!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>
+    <audio src="./image/Two_Steps_From_Hell-Star_Sky.mp3" controls></audio>
+    <video width="640px" height="360px" controls>
+        <source src="./image/movie.mp4">视频
+    </video>
+</body>
+</html>
+```
+
+### 使用 `<canvas>` 元素
+[效果2](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20175109.png)
+```使用 <canvas> 元素绘制一个简单的动画，比如一个移动的方块
+<!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>
+    </style>
+</head>
+<body>
+    <canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
+<script>
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let x = 50;
+    let y = 50;
+    const squareSize = 50;
+    const speed = 2;
+
+    function drawSquare() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height); 
+        ctx.fillStyle = 'blue'; 
+        ctx.fillRect(x, y, squareSize, squareSize); 
+    }
+
+    function animate() {
+        x += speed;
+        if (x > canvas.width - squareSize || x < 0) {
+            speed = -speed;
+        }
+        drawSquare();
+        requestAnimationFrame(animate); 
+    }
+
+    animate();
+</script>
+</body>
+</html>
+```
+[效果3](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20175321.png)
+```创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。
+<!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>
+    <canvas id="drawingCanvas" width="600" height="400" style="border:1px solid #000000;"></canvas>
+
+    <script>
+        const canvas = document.getElementById('drawingCanvas');
+        const ctx = canvas.getContext('2d');
+    
+        let drawing = false;
+        let currentX = 0;
+        let currentY = 0;
+        let hue = 0;
+        const color = () => `hsl(${hue}, 100%, 75%)`;
+    
+        function draw(event) {
+            if (!drawing) return;
+    
+            ctx.lineWidth = 5;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = color();
+    
+            ctx.beginPath();
+            ctx.moveTo(currentX, currentY);
+            ctx.lineTo(event.offsetX, event.offsetY);
+            ctx.stroke();
+    
+            currentX = event.offsetX;
+            currentY = event.offsetY;
+    
+            hue += 0.1;
+        }
+    
+        function startDrawing(event) {
+            drawing = true;
+            currentX = event.offsetX;
+            currentY = event.offsetY;
+        }
+    
+        function stopDrawing() {
+            drawing = false;
+            if (hue >= 360) {
+                hue = 0;
+            } else {
+                hue += 0.1;
+            }
+        }
+    
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mouseup', stopDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseout', stopDrawing);
+    </script>  
+</body>
+</html>
+```
+### 使用 `<details>`和 `<summary>` 元素
+[效果4](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20175635.png)
+```代码
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAQ Page</title>
+    <style>
+        details summary {
+            font-weight: bold;
+        }
+        details {
+            margin-bottom: 10px;
+        }
+        summary {
+            cursor: pointer;
+            outline: none;
+        }
+    </style>
+</head>
+<body>
+    <h1>FAQ</h1>
+    <details>
+        <summary>你是谁啊？</summary>
+        <p>你猜吧！</p>
+    </details>
+</body>
+</html>
+```
+### 使用 `<datalist>` 元素
+[效果5](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20175928.png)
+```
+<!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>
+    <h2>查询城市</h2>
+
+    <form>
+        <label for="cityInput">输入城市名称:</label>
+        <input type="text" id="cityInput" name="cityName" list="cityList" placeholder="搜索的类型">
+        <datalist id="cityList">
+            <option value="北京">
+            <option value="上海">
+            <option value="深圳">
+            <option value="福建">
+            <option value="广东">
+            <option value="河北">
+            <option value="海南">
+        </datalist>
+        <input type="submit" value="提交">
+    </form>
+</body>
+</html>
+```
+### 使用 `<figure>` 和 `<figcaption>` 元素
+[效果6](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20180134.png)
+```
+<!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>
+    <figure>
+        <img src="./image/OIP-C.jpg" alt="完蛋不见啦" width="600">
+        <figcaption>这是一张图片</figcaption>
+    </figure>
+</body>
+</html>
+```
+### 使用 `<picture>` 元素
+[效果7](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-21%20180346.png)
+```
+<!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>
+        .gallery {
+            max-width: 100%;
+            margin: 0 auto;
+            padding: 10px;
+            text-align: center;
+        }
+        .gallery img {
+            max-width: 100%;
+            display: block;
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="gallery">
+        <picture>
+            <source srcset="./image/OIP-C.jpg" media="(min-width: 1000px)">
+            <source srcset="./image/OIP-C.jpg" media="(min-width: 500px)">
+            <img src="./image/OIP-C.jpg" alt="A responsive image">
+        </picture>
+        
+    </div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file