diff --git a/readme.md b/readme.md
deleted file mode 100644
index 832ffa0e1d904b133839c92ee55a26596a963dca..0000000000000000000000000000000000000000
--- a/readme.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## 23级软件3班 H5&CSS3课堂笔记
-
-上课录屏地址：https://www.alipan.com/s/9LLqP6n5JjF
-
-PS：天下之事常成于困约，而败于奢靡。——陆游
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7a708b04a2309960bd1d2012a2d309591d888427
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/20240920\347\231\273\345\275\225\357\274\214\350\267\221\351\251\254\347\201\257.md"
@@ -0,0 +1,146 @@
+# 效果图
+
+
+
+<img src="https://pic.imgdb.cn/item/66efb042f21886ccc0423923.gif" alt="GIF 2024-9-22 13-46-59.gif">
+<img src="https://pic.imgdb.cn/item/66efb068f21886ccc04262a2.png" alt="屏幕截图 2024-09-22 131115.png">
+
+
+
+
+# 代码
+
+```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>
+            .dl{
+            height: 200px;
+            width: 400px;
+            border: 1px black solid;
+            border-radius: 360px;
+            margin: auto;
+            
+            
+            }
+            .a{
+                background-image: url(./img/浅蓝色圆圈.jpg);
+            background-size: cover;
+            width: 500px;
+            height: 500px;
+            display: grid;  
+            place-items: center;
+            }
+            .zhanghao{
+                /* float: right; */
+                /* text-align: center; */
+                width: 251px;
+                padding-left: 70px;
+
+            }
+            table{text-align: center;}
+            .xlr{
+                width: 30px;
+                height: 30px;
+                
+                margin-right: 15px;
+            }
+           
+            
+    </style>
+</head>
+<body style="height: 100vh; display: grid;  
+  place-items: center; ">
+    
+        
+        <div class="a">
+    <div class="dl">
+        
+        <h1 style="text-align: center; width: 360px; margin: 0px; color: #5ab9f8;;"><img src="./笑脸人.png" alt="" class="xlr">元玖网</h1>
+        
+            <div class="zhanghao">
+                <table>
+                    <tr>
+                        <td>
+                            用户名：
+                        </td>
+                        <td>
+                            <input type="text" name="yhm">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            密码：
+                        </td>
+                        <td>
+                            <input type="password">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+
+                        </td>
+                        <td>
+                            <input type="button" value="登录">
+                        </td>
+                    </tr>
+                </table>
+                
+                
+            </div>
+        
+    </div>
+</div>
+</body>
+</html>
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>跑马灯特效</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        .marquee {  
+    width: 100%; /* 容器宽度 */  
+    overflow: hidden; /* 隐藏超出部分 */  
+    white-space: nowrap; /* 文本不换行 */  
+      
+}  
+  
+.marquee span {  
+    display: inline-block;  
+    padding-left: 100%; /* 初始时，文本完全在容器右侧外 */  
+    animation: marquee 10s linear infinite; /* 应用动画 */  
+}  
+  
+@keyframes marquee {  
+    from {  
+        transform: translateX(0);  
+    }  
+    to {  
+        transform: translateX(-100%); /* 向左移动至完全在容器左侧外 */  
+    }  
+}
+    </style>
+</head>
+
+<body>
+
+    <div class="marquee">
+        <span>这是一个跑马灯效果的文本，它会在容器内从左到右滚动。</span>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
\ No newline at end of file
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..4d01d128f1a780b85101f9577bde485a2db68472
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/GIF 2024-9-22 13-46-59.gif" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d7a4eba0449977707f0a250e1b99c95e54d4aaf6
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/img/\346\265\205\350\223\235\350\211\262\345\234\206\345\234\210.jpg" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png" "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d710a175bd632fff79a93a14aa68c8a10065bb43
Binary files /dev/null and "b/\350\224\241\345\234\243\346\201\251/\344\275\234\344\270\232/\347\254\221\350\204\270\344\272\272.png" differ
diff --git "a/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\347\254\224\350\256\260.md" "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c597bb141fdcd9af6f4d556968e04dfafdb93789
--- /dev/null
+++ "b/\350\224\241\345\234\243\346\201\251/\347\254\224\350\256\260/20240918\347\254\224\350\256\260.md"
@@ -0,0 +1,142 @@
+## 笔记
+### 表单标签
+>表单标签用`form`表示，用于与服务器交互
+
+**属性值：**
+`name` ,`id`
+`action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+`method`：表单数据的提交方式，一般取值：get(默认)和post
+
+ **get提交和post提交的区别：**
+GET方式：
+将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
+特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
+
+POST方式：
+将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
+特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
+
+
+
+## `<input>`：输入标签（文本框）
+>用于接收用户输入
+eg:
+```html
+<input type="text" />
+```
+
+**属性（`type="属性值"`）**
+`text`（默认）:文本类型
+`password`：密码类型
+`radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，若互斥，则具有相同属性name）。
+`checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
+`checked`：`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可用这个属性
+`hidden`：隐藏框
+`button`：普通按钮
+`submit`：提交按钮
+`reset`：重置按钮
+`image`：图片按钮
+`file`：文件选择框
+
+**`value="内容"`**：文本框里的默认内容（已填好的）
+**`size="50"`：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。**
+
+`readonly`和`disabled`：文本框只读，不能编辑,属性值可不写。
+
+
+
+## `<select>`：下拉列表标签
+>`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
+
+**`<select>`标签的属性：**
+`multiple`：可以对下拉列表中的选项进行多选。既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
+`size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
+
+**`<option>`标签的属性：**
+`selected`：预选中。没有属性值。
+
+
+
+## `<textarea>`标签：多行文本输入框
+>text 就是“文本”，area 就是“区域”。
+
+**属性：**
+`rows="4"`：指定文本区域的行数。
+`cols="20"`：指定文本区域的列数。
+`readonly`：只读
+
+
+## 表单的语义化
+>在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
+
+
+
+## `<label>`标签
+>label标签是为了解决单击男和女时可以选中单选框(小圆圈)。
+>eg:
+```html
+<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
+<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
+```
+
+**让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。**
+
+
+### 注意：
+1.表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。
+2.action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
+3.name属性可以相同，但*id的属性值必须是唯一的*。
+4.size属性值的单位不是像素哦
+5.任何表单元素都有label
+
+
+
+
+
+# 多媒体标签
+>多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
+.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
+上述格式视频一般文件较大，不利于网络下载播放。
+一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
+Flash格式的视频兼容性非常好，Flash格式的文件很小
+
+
+## `<bgsound>`标签：播放背景音乐
+>eg：
+```html
+ <body>
+	<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
+ </body>
+```
+**属性：**
+`src="音乐文件的路径"`
+`loop="-1"`：属性值代表播放次数，-1代表循环播放。
+
+
+
+## `<embed>`标签：播放多媒体文件（音频、视频等）
+主要应用Netscape浏览器，它不是W3C规范。
+>eg：`<embed>`标签播放音频
+```html
+ <body>
+	<embed src="王菲 - 清风徐来.mp3"></embed>
+ </body>
+```
+
+*备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。*
+
+
+## `<object>`标签：播放多媒体文件（音频、视频等）
+>eg:
+```html
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
+  <param name="movie" value="images/banner.swf">
+  <param name="quality" value="high">
+  <param name="wmode" value="transparent">
+  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
+</object>
+```
+**属性：**
+`classid`：指定Flash插件的ID号，一般存在于注册表中。
+`codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
+`<param>`标签的主要作用：设置具体的详细参数。
