diff --git "a/\351\203\221\345\212\233\350\261\252/20240904--md\350\257\255\346\263\225.md" "b/\351\203\221\345\212\233\350\261\252/20240904--md\350\257\255\346\263\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6afaeff9d58e5f9b406f14cca9df535d2eb11458
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240904--md\350\257\255\346\263\225.md"
@@ -0,0 +1,60 @@
+# md语法
+## 一、标题
+1. #一级标题
+2. ##二级标题
+
+## 二、引用及链接
+1. ！[] () ----引用图片
++ []中括号中填写图片消失时的提示
++ ()小括号中写图片的相对位置或绝对位置
+
+2. [] () ------引用链接
++ eg : [百度](http://baidu.com)
+
+3. “>”引用符号
++ > 我是引用
+
+4. ``反引号
++ eg : 我是`引用`
+
+5. “```”段落引用
+```
+大不列颠及
+北爱尔兰
+联合王国
+```
+
+6. js高亮
+```js
+console.log("泰勒斯威夫特的1989专辑是最棒的")
+```
+
+## 三、字体
+1. **斜体 ：
+*斜体*
+2. ** **粗体 ：
+**粗体**
+3. *** ***粗斜体 ：
+***粗斜体***
+
+## 四、列表
+1. 有序列表一
+ 1. a
+ 2. b
+ 3. c
+2. 有序列表二
+ 1) a
+ 2) b
+ 3) c
+3. 无序列表：+、-、*
+ + 你好
+ - 新
+ * 世界
+
+## 五、表格
+| 左对齐 | 居中 | 右对齐 |
+| :- | :-: | -: |
+| 单元格1 | 单元格2 | 单元格3 |
+| 单元格4 | 单元格5 | 单元格6 |
+
+
diff --git "a/\351\203\221\345\212\233\350\261\252/20240911--\346\265\217\350\247\210\345\231\250\347\233\270\345\205\263.md" "b/\351\203\221\345\212\233\350\261\252/20240911--\346\265\217\350\247\210\345\231\250\347\233\270\345\205\263.md"
new file mode 100644
index 0000000000000000000000000000000000000000..13fb5a62a238654cf34fda39183b0e85dc85dfe0
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240911--\346\265\217\350\247\210\345\231\250\347\233\270\345\205\263.md"
@@ -0,0 +1,56 @@
+
+## 浏览器
+**浏览器**:浏览器是网页运行的平台
+浏览器的组成：
+1、渲染引擎 （浏览器内核）
+2、JS引擎
+常用浏览器及内核：
+1、谷歌（Chrome）:Blink
+2、Safari：Webkit
+3、火狐（Firefox）：Gecko
+4、IE：Trident
+5、Edge：Blink
+6、Opera：Presto
+
+常用浏览器及JS引擎：
+1、谷歌（Chrome）:V8
+2、Safari：Nitro
+3、火狐（Firefox）：SpiderMonkey、 TraceMonkey、JaegerMonkey、IonMonkey和OdinMonkey
+4、IE：Trident
+5、Edge：Blink
+6、Opera：Carakan、 Blink
+## HTML （HyperText Markup Language）超文本标记语言
+
+#### HTML的概念：HTML 不是一种编程语言，是一种描述性的标记语言。
+作用：HTML是负责描述文档语义的语言。
+__超文本含义：__
+1、超出了文本的限制，有图片、视频等
+2、超级链接文本
+HTML格式的文件是一个**纯本文文件**（txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
+例如：\标签的作用：给文本增加主标题的语义
+### html专有名词
+1、网页 ：由各种标记组成的一个页面就叫网页。
+2、主页(首页) : 一个网站的起始页面或者导航页面。
+3、标记： 比如\
称为开始标记 ，\
称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
+4、元素：比如\内容\
称为元素，也叫dom元素，也叫节点.
+5、属性：给每一个标签所做的辅助信息。
+XHTML：符合XML语法标准的HTML。
+DHTML
+HTTP：超文本传输协议、SMTP：邮件传输协议、FTP：文件传输协议。
+
+#### 新建HTML文件
+1、打开VSCOde的，新建一个文件，名叫test.html，文件名是test，后缀名是html
+2、在页面中 ，输入html:5，然后按一下键盘上的Tab键 或者感叹号加回车键
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+```
diff --git "a/\351\203\221\345\212\233\350\261\252/20240913--\346\240\207\347\255\276.md" "b/\351\203\221\345\212\233\350\261\252/20240913--\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..770b8e8ef5eb785de33f8cdc4ff0005f43251237
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240913--\346\240\207\347\255\276.md"
@@ -0,0 +1,66 @@
+### HTML标签
+**html标签**： 通常成对出现
+1、双边标记
+2、单边标记
+
+**HTML骨架标签：**
+1、\\ HTML标签
+2、\\ 文档的头部
+3、\\ 文档的标题
+4、\\ 文档的主体
+
+ #### 骨架标签分析：
+1、文档声明：告知浏览器文档使用哪种 HTML 或 XHTML 规范
+\
+
+2、页面语言：lang
+指定页面的语言类型
+常见的页面语言类型：en：定义页面语言为英语。
+zh-CN：定义页面语言为中文。
+***语法：*
+\
+
+3、头标签：\\
+>\：指定整个网页的标题，在浏览器最上方显示。
+\<base>：为页面上的所有链接规定默认地址或默认目标。
+\<meta>：提供有关页面的基本信息
+\<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
+\<link>：定义文档与外部资源的关系。
+
+4、meta 标签：
+基本的配置项目
+常见的meta标签：字符集 charset、视口 viewport、定义“关键词”、定义“页面描述
+
+5、title标签：有助于SEO搜索引擎优化的、设置网页标题
+
+6、base标签：指定基础的路径，之后a 链接都是以这个路径为基准
+语法：\<base href="/">
+
+7、\<body>标签:有bgcolor、background、text、leftmargin、topmargin、rightmargin、bottommargin等属性
+
+### HTML的基本语法特性
+**1、HTML对换行不敏感，对tab不敏感**
+**2、空白折叠现象：HTML文字之间有空格、回车换行、tab都是一个空格显示**
+**3、标签要严格封闭**，否则将导致改标签后的内容都是该标签
+
+### 排版标签：
+1、标题标签：\<h1>
+2、段落标签：\<p>,属性：align="属性值"
+3、水平线标签\<hr />
+属性：align="属性值"线条置放位置、size="2" ：设定线条粗细、width="500"或width="70%"：设定线条长度、color="#0000FF"：设置线条颜色、noshade：不要阴影
+4、换行标签\<br />
+5、\<div>和\<span>标签
+div是块级标签、span是文本级标签
+6、容居中标签 \<center>,在改标签的内容，在浏览器中间
+7、预定义（预格式化）标签\<pre>
+保留所有空白字符输出在浏览器
+>文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
+容器级标签：div、h系列、li、dt、dd。
+容器级标签里可以放置任何东西。
+
+
+
+
+
+
+
diff --git "a/\351\203\221\345\212\233\350\261\252/20240914--\345\210\227\350\241\250\350\241\250\346\240\274\346\240\207\347\255\276 (1).md" "b/\351\203\221\345\212\233\350\261\252/20240914--\345\210\227\350\241\250\350\241\250\346\240\274\346\240\207\347\255\276 (1).md"
new file mode 100644
index 0000000000000000000000000000000000000000..57ccb10cdb95fdb7223201cde6505eb7764f0efa
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240914--\345\210\227\350\241\250\350\241\250\346\240\274\346\240\207\347\255\276 (1).md"
@@ -0,0 +1,159 @@
+## 列表标签：`<ul>`、`<ol>`、`<dl>`
+1、无序列表`<ul>`
+语法：
+```html
+<ul>
+ <li>苹果</li>
+ <li>桃子</li>
+ <li>水蜜桃</li>
+</ul>
+```
+>li不能单独存在，必须包裹在ul里面
+>ul的作用，不是给文字增加小圆点，而是增加无序列表的“语义”。
+`属性`：可写在ul标签与li标签里`原因：ul的儿子，只能是li。但li是一个容器级标签`
+`type="属性值"`，属性值：`disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
+`嵌套`：
+```html
+ <ul>
+ <li><b>北京市</b>
+ <ul>
+ <li>海淀区</li>
+ <li>朝阳区</li>
+ </ul>
+ </li>
+ <li><b>广州市</b>
+ <ul>
+ <li>天河区</li>
+ <li>越秀区</li>
+ </ul>
+ </li>
+ </ul>
+```
+`css属性`：给 ul 设置这个属性后，将小圆点包含在 li 元素的内部
+语法：list-style-position: inside
+
+2、有序列表`<ol>`
+```html
+<ol >
+ <li>熊大</li>
+ <li>熊二</li>
+ <li>光头强</li>
+</ol>
+```
+`属性`：`type="属性值"`，属性值：1(阿拉伯数字，默认)、a、A、i、I，结合`start`属性表示`从几开始`。
+```html
+<ol type="1">
+ <li>翠花</li>
+ <li>嘟嘟</li>
+ <li>老鳄</li>
+</ol>
+<ol type="i" start="4">
+ <li>西光</li>
+ <li>哈密瓜</li>
+ <li>芒果</li>
+</ol>
+```
+`嵌套`：与无序列表相同
+
+3、定义列表`<dl>`
+1）`<dl>`的子元素：dt、dd
+`dt`:列表的标题，这个标签是必须的
+`dd`:列表的表项，可有可无
+
+定义列表语义：
+`（1）是一个列表，列出了几个dd项目
+（2）每一个词儿都有自己的描述项`
+`dd是对dt的描述,dt、dd都是容器级标签`
+
+### 表格标签：`<table>`
+`表格是由行组成的（行是由列组成的），而不是由行和列组成的。`
+`表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。`
+一行的单元格：
+```html
+<table>
+ <tr>
+ <td></td>
+ <td></td>
+ </tr>
+</table>
+```
+`<table>`的属性：
+`border`：边框。像素为单位。
+`style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
+`width`：宽度。像素为单位。
+`height`：高度。像素为单位。
+`bordercolor`：表格的边框颜色。
+`align`：**表格**的`水平对齐方式`。属性值：left right center。
+`cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即`默认情况下的值为0`。
+注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。
+`cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
+`bgcolor="#99cc66(颜色数值)"`：表格的背景颜色。
+`background="路径src/..."`：背景图片。
+背景图片的优先级大于背景颜色。
+`bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
+`bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
+`这两个属性的目的是为了设置3D的效果。`
+`dir`：公有属性，单元格内容的排列方式(direction)。取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
+
+`<tr>`：行
+
+一个表格由一行一行组成的。
+
+**属性：**
+
+`dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：`ltr`：从左到右（left to right，默认） `rtl`：从右到左（right to left）
+`bgcolor`：设置这一行的单元格的背景色。
+注：没有`background属性`，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
+`height`：一行的高度
+`align="center"`：一行的内容水平居中显示，取值：left、center、right
+`valign="center"`：一行的内容垂直居中，取值：top、middle、bottom
+
+`<td>`：单元格
+`属性：`align、valign、width、height、bgcolor、background
+
+#### 单元格的属性：
+`colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
+`rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
+>例如
+```html
+<table>
+ <tr>
+ <td></td> //合并时,这行的单元格要删除
+ <td colspan="2"></td>
+ </tr>
+ <tr>
+ <td></td> //合并时,这行的单元格要删除
+ <td rowspan="2"></td>
+ </tr>
+</table>
+```
+>`<th>`：加粗的单元格。相当于`<td>` + `<b>`
+属性同`<td>`标签。
+
+`<caption>`：表格的标题。使用时和`tr`标签并列
+
+#### 表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签
+`写了`这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容
+`不写`那么浏览器解析并显示表格内容的时是从按照代码的从上到下的顺序来显示
+
+```html
+ <table border="1">
+
+ <tbody>
+ <tr>
+ <td>性别</td>
+ <td>男</td>
+ <td>地址</td>
+ <td>黄冈</td>
+ </tr>
+ </tbody>
+
+ <tfoot>
+ <tr>
+ <td>霉霉</td>
+ <td>女</td>
+ <td>美国</td>
+ </tr>
+ </tfoot>
+ .......
+```
\ No newline at end of file
diff --git "a/\351\203\221\345\212\233\350\261\252/20240917--\346\240\207\347\255\276\350\241\245\345\205\205\357\274\210\345\255\227\347\254\246\357\274\211.md" "b/\351\203\221\345\212\233\350\261\252/20240917--\346\240\207\347\255\276\350\241\245\345\205\205\357\274\210\345\255\227\347\254\246\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4257d86e46ed9f7acc7400a7bb9f358f7ed1f21d
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240917--\346\240\207\347\255\276\350\241\245\345\205\205\357\274\210\345\255\227\347\254\246\357\274\211.md"
@@ -0,0 +1,96 @@
+## 字体标签：\<font>、\<b>、\<u> 、\<sup> 、\<sub>
+特殊字符（转义字符）：
+\ ：空格 （non-breaking spacing，不断打空格）
+\<：小于号<（less than）
+\>：大于号>（greater than）
+\&：符号&
+\"：双引号
+\'：单引号
+\©：版权©
+\™：商标™
+\绐：文字“绐”，是汉字“绐”的unicode编码。
+
+## 转义字符的运用：
+1、页面显示**p**标签 :\<\>
+<
+body>
+这是一个<p>标签
+</body>
+
+2、常见的特殊字符：
+| 特殊字符 | 名称 |字符的代码 |
+|:-------------|:-------------|:-----|
+||空格符|` `|
+|<|小于号|`<`|
+|> |大于号|`>`|
+|&|和号|`&`|
+|￥|人民币|`¥`|
+|©|版权|`©`|
+|®|注册商标|`®`|
+|°|摄氏度|`°`|
+|±|正负号|`±`|
+|×|乘号|`×`|
+|÷|除号|`÷`|
+|²|平方2（上标2）|`²`|
+|³|立方3（上标3）|`³`|
+
+## 下划线、中划线、斜体
+
+ `<u>`：下划线标记
+
+ `<s>`或`<del>`：中划线标记（删除线）
+
+`<i>`或`<em>`：斜体标记
+
+### 粗体标签`<b>`或`<strong>`（已废弃）字体标签`<font>`（已废弃）
+属性：
+
+`color`：设置字体颜色。
+设置方式：单词 : #ff00cc 、
+单词：rgb(0,0,255)
+
+`size`：设置字体大小。
+`face="微软雅黑"`：设置字体类型。
+
+## a标签
+跳转方式 ：
+1、\<a href="./9.4--markdom笔记.md">跳转项目内部文件\</a>
+2、\<a href="./9.4--markdom笔记.md">跳转外部文件\</a>
+
+## 锚链接：在本页面或者其他页面的的不同位置进行跳转
+回顶部操作：创建锚点，使用name属性、或者ID属性起名
+做法1：\<a href="top">顶部\</a>
+\<pre>空格\<pre>
+\<a href="#top">回到顶部\</a>
+#### 超链接的属性
+ `href`：目标URL
+`title`：悬停文本。
+`name`：主要用于设置一个锚点的名称。
+`target`：告诉浏览器用什么方式来打开目标页面。
+`target`属性有以下几个值：
+`_self`：在同一个网页中显示（默认值）
+`_blank`：**在新的窗口中打开**。
+`_parent`：在父窗口中显示
+`_top`：在顶级窗口中显示
+
+
+
+## 图片img
+1、单标签
+语法\<img src="地址"/>
+2、插入的图片类型：jpg(jpeg)、gif、png、bmp等
+不能插入~：psd、ai
+3、属性：src 、width、height、Alt、title、align、
+写法：相对路径：相对当前页面所在的路径。
+两个标记 `.` 和 `..` 分表代表当前目录和上一层目录。
+绝对路径：
+（1）以盘符开始的绝对路径
+（2）网络路径
+
+## 其他已废弃的属性
+
+`Align`：指图片的水平对齐方式，替换为 `vertical-align`CSS属性。
+`border`：给图片加边框，单位是像素，边框的颜色默认黑色。替换为
+`border`CSS属性。
+`Hspace`：指图片左右的边距。
+`Vspace`：指图片上下的边距。
diff --git "a/\351\203\221\345\212\233\350\261\252/20240919--\346\214\211\351\222\256\345\217\212\346\240\207\347\255\276.md" "b/\351\203\221\345\212\233\350\261\252/20240919--\346\214\211\351\222\256\345\217\212\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..77f5e1f59ec66451b74659507c4c0d71b334e77a
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240919--\346\214\211\351\222\256\345\217\212\346\240\207\347\255\276.md"
@@ -0,0 +1,204 @@
+
+## 示例：
+<style>
+ table{
+ border: 1px;
+ background-color: blanchedalmond;
+ }
+ table tr:hover{
+ background-color: pink;
+ }
+ table td:hover{
+ background-color: #a7d0f7;
+ }
+
+</style>
+<style>
+.button1{
+ background-color: #1890ff;
+ border: none;
+ color: #FFF;
+ border-radius: 5px;
+
+}
+.button2{
+background-color:#FFF;
+ border-radius: 5px;
+ border-color: gray;
+}
+.button3{
+ background-color: #FFF;
+ color: gray;
+ border-radius: 5px;
+ border: none;
+ border: 1px dashed gray;
+}
+.button4{
+ background-color:#FF4D4F;
+ color: #FFF;
+ border-radius: 5px;
+ border: none;
+}
+.button5{
+ border: none;
+ background-color: #1890ff;
+ color: #FFF;
+ border-radius: 5px;
+}
+.button6{
+ border: none;
+ color: #1890ff;
+ background-color: #fff;
+}
+</style>
+<body>
+ <input type="button" class="button1" value="Primary">
+ <input type="button" class="button2" value="Default">
+ <input type="button" class="button3" value="Dashed">
+ <input type="button" class="button4" value="Danger">
+ <input type="button" class="button5" value="按钮">
+ <input type="button" class="button6" value="Link">
+</body>
+
+
+## 表单标签
+>表单标签用`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="XXX.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>`标签的主要作用：设置具体的详细参数。
diff --git "a/\351\203\221\345\212\233\350\261\252/20240922--html5.md" "b/\351\203\221\345\212\233\350\261\252/20240922--html5.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7c4b75696d1056a2103c8a253465d81bcc1575b4
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240922--html5.md"
@@ -0,0 +1,51 @@
+## 广义概念
+包括：HTML5、CSS3、Javascript API在内的一套技术组合。
+
+
+## H5中新增的语义标签
+1、`<section>` 表示区块
+2、`<article>` 表示文章。如文章、评论、帖子、博客
+3、`<header>` 表示页眉
+4、`<footer>` 表示页脚
+5、`<nav>` 表示导航
+6、`<aside>` 表示侧边栏。如文章的侧栏
+7、`<figure>` 表示媒介内容分组。
+8、`<mark>` 表示标记
+9、`<progress>` 表示进度
+10、`<time>` 表示日期
+
+
+## H5中新增的表单类型
+1、`email` 只能输入email格式。自动带有验证功能。
+2、`tel` 手机号码。
+3、`url` 只能输入url格式。
+4、`number` 只能输入数字。
+5、`search` 搜索框
+6、`range` 滑动条
+7、`color` 拾色器
+8、`time` 时间
+9、`date` 日期
+10、`datetime` 时间日期
+11、`month` 月份
+12、`week` 星期
+
+## 媒体
+### 1.音频
+`<audio>`标签
+```html
+ <audio src="music/yinyue.mp3" autoplay controls> </audio>
+```
+#### 属性：
+`autoplay` 自动播放
+`controls` 控制条
+`loop` 循环播放
+`preload` 预加载，同时设置`autoplay` 时，此属性将失效。
+
+### 2.视频
+`<video>`标签
+
+```html
+ <video src="video/movie.mp4" controls autoplay></video>
+```
+`width`：设置播放窗口宽度
+`height`：设置播放窗口的高度
\ No newline at end of file
diff --git "a/\351\203\221\345\212\233\350\261\252/20240928--H5\350\241\245\345\205\205\357\274\210\345\255\227\344\275\223\345\217\212CSS\357\274\211.md" "b/\351\203\221\345\212\233\350\261\252/20240928--H5\350\241\245\345\205\205\357\274\210\345\255\227\344\275\223\345\217\212CSS\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1890788b01d17d5c08b7d767c4a2b8cb778d7a56
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240928--H5\350\241\245\345\205\205\357\274\210\345\255\227\344\275\223\345\217\212CSS\357\274\211.md"
@@ -0,0 +1,148 @@
+# 拖拽
+ 1. 拖拽元素
+ draggable="true"
+ 2. 事件
+ + ondragstart ：当拖拽开始时调用
+ + ondragleave : 当鼠标离开拖拽元素时调用
+ + ondragend ：当拖拽结束时调用
+ + ondrag ：整个拖拽过程都会调用
+eg:
+```js
+ <style>
+ .box {
+ width: 150px;
+ height: 150px;
+ background-color: skyblue;
+ }
+ </style>
+</head>
+<body>
+ <!--将div属性设置为draggable="true"-->
+ <div class="box" draggable="true"></div>
+ <script>
+ // 绑定拖拽事件
+ var box = document.querySelector('.box');
+ // 拖拽开始
+ box.ondragstart = function () {
+ console.log('1.开始');
+ }
+ // 鼠标拖拽时离开被拖拽的元素时触发
+ box.ondragleave = function () {
+ console.log('2.离开');
+ }
+ // 拖拽结束
+ box.ondragend = function () {
+ console.log('3.结束');
+ }
+ box.ondrag = function () {
+ console.log('4.整个');
+ }
+ </script>
+</body>
+```
+
+## 目标元素
+
+1. 目标元素的事件监听:
+
++ ondragenter： 当拖拽元素进入时调用
+
++ ondragover： 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
++ ondrop： 当在目标元素上松开鼠标时调用
+
++ ondragleave： 当鼠标离开目标元素时调用
+## 获取地理信息
+1. IP 地址
+2. 三维坐标
+ 1. GPS
+ 2. WI-Fi定位
+ 3. 手机信号定位
+3. 用户自定义数据
+ 1. 具有保护用户隐私的机制，必须先得到用户明确许可
+ 2. API详解：
+ 1. 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
+ - position.coords.latitude纬度
+ - position.coords.longitude经度
+ 2. 当获取地理信息失败后，会调用errorCallback，并返回错误信息error
+ 3. 可选参数 options 对象可以调整位置信息数据收集方式
+
+## 历史
+HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态，可用于单页面应用
+1. window.history.forward(); ：前进
+2. window.history.back(); ：后退
+3. window.history.go(); ：刷新
+ + 括号里填写数字，1 表示前进；-1 后退；0s 刷新。如果移动的位置超出了访问历史的边界，会静默失 败，但不会报错。
+4. history.pushState; ：放入历史中的状态数据, 设置title
+
+## 全屏
+1. 开启/关闭全屏显示
+```js
+ //开启全屏显示
+ requestFullscreen()
+ //关闭全屏显示
+ cancleFullscreen()
+```
+2. 检测当前是否处于全屏状态
+```js
+ document.fullScreen
+```
+
+## 存储
+一、`window.sessionStorage` 会话存储：
+1. 保存在内存中。
+2. 生命周期为关闭浏览器窗口。当窗口关闭时数据销毁。
+3. 在同一个窗口下数据可以共享。
+二、`window.localStorage` 本地存储：
+1. 有可能保存在浏览器内存里，有可能在硬盘里。
+2. 永久生效，除非手动删除（比如清理垃圾的时候）。
+3. 可以多窗口共享。
+# Web存储的特性
+1. 设置、读取方便。
+2. 容量较大，sessionStorage 约5M、localStorage 约20M。
+3. 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
+
+## CSS属性
+### 1.绝对单位
+1. `in`：英寸Inches (1 英寸 = 2.54 厘米)
+2. `cm`：厘米Centimeters
+3. `mm`：毫米Millimeters
+4. `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+5. `pc`：皮卡Picas (1 皮卡 = 12 点)
+
+## 2.相对单位
+1. `px`：像素
+2. `em`：印刷单位相当于12个点
+3. `%` ：百分比，相对周围的文字的大小
+
+## 3.常见属性
+```js
+p{
+ /*字体大小*/
+ font-size: 50px;
+ /*行高*/
+ line-height: 30px;
+ /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
+ font-family: 幼圆,黑体;
+ /*italic表示斜体，normal表示不倾斜*/
+ font-style: italic ;
+ /*粗体*/
+ font-weight: bold;
+ /*小写变大写*/
+ font-variant: small-caps;
+}
+```
++ vertical-align:可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+```js
+ <style>
+ div{
+ vertical-align: auto;
+ }
+ </style>
+</head>
+<body>
+ <div>
+
+ </div>
+</body>
+```
\ No newline at end of file
diff --git "a/\351\203\221\345\212\233\350\261\252/20240928--\345\276\205\346\225\264\347\220\206.md" "b/\351\203\221\345\212\233\350\261\252/20240928--\345\276\205\346\225\264\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4fef378a01a60c4246c9bdad2427a6ffe331f4e8
--- /dev/null
+++ "b/\351\203\221\345\212\233\350\261\252/20240928--\345\276\205\346\225\264\347\220\206.md"
@@ -0,0 +1,128 @@
+## 20240911--红色18px(1)
+```js
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document
+
+
+
+
+