diff --git "a/\347\277\201\344\277\241\346\240\213/1.md" "b/\347\277\201\344\277\241\346\240\213/1.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a3fc2a9a79fa11afa09584dd45b54f8bff3a0f95
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/1.md"
@@ -0,0 +1,2 @@
+[1](http://sjsclg9ls.hn-bkt.clouddn.com/20240914124640.png)
+![20240914124820](http://sjsclg9ls.hn-bkt.clouddn.com/20240914124820.png)
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" "b/\347\277\201\344\277\241\346\240\213/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7420c6a5846815539807f15a00aff09886c0bec9
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md"
@@ -0,0 +1,46 @@
+## git流程图，图如下
+![](./imgs/img1.jpg)
+# 一级标题
+## 二级标题
+*斜体*
+**粗体**
+***粗斜体***
+
+>引用
+
+比如我这里需要使用一个`dom`标签，这个`dom`标签是指`font`
+
+如下代码可以说明若干问题：
+
+```js
+console.log('我是女生，爱哭的女生')
+
+```
+
+
+
+有序列表
+  1. 有序
+  2. 有序
+  3. 有序
+
+  1) 有序
+  2) 有序
+  3) 有序
+  4) 有序
+
+无须列表
+  + 无序
+  + 无序
+  + 无序
+
+  - 无序
+  - 无序
+  - 无序
+
+表格
+| 左对齐 | 居中  | 右对齐 |
+| :- | :-: | -: |
+| 单元格1 | 单元格2 | 单元格3 |
+| 单元格4 | 单元格5 | 单元格6 |
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20240909-\347\233\256\345\211\215\344\270\273\346\265\201\346\265\217\350\247\210\345\231\250\346\270\262\346\237\223\345\222\214\345\274\225\346\223\216.md" "b/\347\277\201\344\277\241\346\240\213/20240909-\347\233\256\345\211\215\344\270\273\346\265\201\346\265\217\350\247\210\345\231\250\346\270\262\346\237\223\345\222\214\345\274\225\346\223\216.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0cbd4a08623b9e2ccb2b1a91d7f37fac97fc4a37
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240909-\347\233\256\345\211\215\344\270\273\346\265\201\346\265\217\350\247\210\345\231\250\346\270\262\346\237\223\345\222\214\345\274\225\346\223\216.md"
@@ -0,0 +1,17 @@
+常见浏览器的内核和JS 引擎如下：
+| 浏览器            | 渲染内核         | JavaScript引擎 | 市场份额 | 备注 |
+|-----------------|----------------|----------------|----------|------|
+| QQ浏览器          | Trident + Blink | V8             | -        | 双核浏览器，支持兼容模式和高速模式 |
+| 360安全浏览器      | Trident + Blink | V8             | -        | 双核浏览器，兼容模式使用Trident，高速模式使用Blink |
+| 搜狗高速浏览器      | Trident + Webkit | V8             | -        | 双核浏览器，兼容模式使用Trident，高速模式使用Webkit |
+| UC浏览器          | Blink           | V8             | -        | 以移动浏览器为主，也支持桌面平台 |
+| 浏览器            | 渲染内核         | JavaScript引擎 | 市场份额 | 备注 |
+| Opera            | Blink           | V8             | -        | 采用Blink内核，支持Web标准和快速浏览 |
+| Microsoft Edge    | Blink           | V8             | -        | 微软开发的浏览器，支持跨平台使用 |
+| Google Chrome    | Blink          | V8             | 65%      |
+| Apple Safari     | WebKit         | JavaScriptCore | 18.57%   |
+| Microsoft Edge   | Blink          | V8             | 5.01%    |
+| Firefox          | Gecko          | SpiderMonkey   | 2.79%    |
+| Opera            | Blink          | V8             | -        |
+
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20240911-HTML\347\273\223\346\236\204\350\257\246\350\247\243.md" "b/\347\277\201\344\277\241\346\240\213/20240911-HTML\347\273\223\346\236\204\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea0c7fe9c6081a79e6e4e6333dfc153846543f07
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240911-HTML\347\273\223\346\236\204\350\257\246\350\247\243.md"
@@ -0,0 +1,124 @@
+## HTML结构详解
+
+HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>），比如 `<div>` 和 `</div>`；也有少部分单标签（<font color="blue">**单边标记**</font>），如：`<br />`、`<hr />`和`<img src="images/1.jpg" />`等。
+
+属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
+
+
+#### html骨架标签分类
+
+| 标签名              |   定义   | 说明                             |
+| ---------------- | :----: | :----------------------------- |
+| `<html></html>`    | HTML标签 | 页面中最大的标签，我们成为根标签             |
+| `<head></head>`    | 文档的头部  | 注意在head标签中我们必须要设置的标签是title     |
+| `<title></title>` | 文档的标题  | 让页面拥有一个属于自己的网页标题               |
+| `<body></body>`    | 文档的主体  | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
+
+### 文档声明头
+
+任何一个标准的HTML页面，第一行一定是一个以`<!DOCTYPE ……>`开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。
+
+**DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范**。
+
+
+（1）字符集 charset：
+
+```html
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+```
+ss
+字符集用meta标签中的`charset`定义，charset就是character set（即“字符集”），即**网页的编码方式**。
+
+**字符集**(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
+
+上面这行代码非常关键， 是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
+
+utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”，我们在下一段会详细介绍。
+
+（2）视口 viewport：
+
+```html
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
+
+`width=device-width` ：表示视口宽度等于屏幕宽度。
+
+viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
+
+（3）定义“关键词”：
+
+举例如下：
+
+```html
+<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
+```
+
+这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
+
+（4）定义“页面描述”：
+
+meta除了可以设置字符集，还可以设置关键字和页面描述。
+
+只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
+
+设置页面描述的举例：
+
+```html
+<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
+```
+
+
+
+### `<body>`标签
+
+`<body>`标签的属性有：
+
+ - `bgcolor`：设置整个网页的背景颜色。
+ - `background`：设置整个网页的背景图片。
+ - `text`：设置网页中的文本颜色。
+ - `leftmargin`：网页的左边距。IE浏览器默认是8个像素。
+ - `topmargin`：网页的上边距。
+ - `rightmargin`：网页的右边距。
+ - `bottommargin`：网页的下边距。
+
+
+## 计算机编码介绍
+
+计算机，不能直接存储文字，存储的是编码。
+
+计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。假如：A用110表示，B用111表示等。
+
+**GBK：**
+对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
+
+**Unicode编码(统一编码)：**
+用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
+
+**UTF-8(Unicode Transform Format)编码：**
+根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
+
+毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
+
+**重点1：避免乱码**
+
+我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。
+
+
+**重点2：UTF-8和gb2312的比较**
+
+保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
+
+总结：
+- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
+- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
+
+
+## HTML的规范
+
+- HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
+- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
+
+
+
+
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20240913-\347\211\271\346\256\212\345\255\227\347\254\246(\350\275\254\344\271\211\345\255\227\347\254\246)\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" "b/\347\277\201\344\277\241\346\240\213/20240913-\347\211\271\346\256\212\345\255\227\347\254\246(\350\275\254\344\271\211\345\255\227\347\254\246)\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3319a2cd150ad842426b6234a00770e9cf6de94f
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240913-\347\211\271\346\256\212\345\255\227\347\254\246(\350\275\254\344\271\211\345\255\227\347\254\246)\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md"
@@ -0,0 +1,123 @@
+## 特殊字符（转义字符）
+- `&nbsp;`：空格	（non-breaking spacing，不断打空格）
+- `&lt;`：小于号`<`（less than）
+-  `&gt;`：大于号`>`（greater than）
+- `&amp;`：符号`&`
+- `&quot;`：双引号
+- `&apos;`：单引号
+- `&copy;`：版权`©`
+- `&trade;`：商标`™`
+-  `&#32464;`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+
+## 下划线、中划线、斜体
+
+- `<u>`：下划线标记
+
+- `<s>`或`<del>`：中划线标记（删除线）
+
+- `<i>`或`<em>`：斜体标记
+
+## css 下划线、中划线、斜体、上划线
+- `text-decoration: overline`:上划线
+- `text-decoration: underline`:下划线
+- `text-decoration: line-through`:删除线
+- `font-style:italic`:斜体
+## 上标`<sup>`   下标`<sub>`
+
+上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
+举例：
+```html
+O<sup>2</sup>    5<sub>3</sub>
+```
+## 1、外部链接：链接到外部文件
+
+举例：
+```html
+<a href="02页面.html">点击进入另外一个文件</a>
+```
+## 2、锚链接
+```html
+<a href="a.html#name1">回到顶部</a>
+```
+## img标签介绍
+
+### 介绍
+
+img: 英文全称 image（图像），代表的是一张图片。
+
+如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
+
+```html
+<img src="图片的URL" />
+```
+## 能插入的图片类型
+
+- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
+
+- 不能往网页中插入的图片格式是：psd、ai等。
+
+## img标签的`src`属性
+这里涉及到图片的一个属性：
+
+- `src`属性：指图片的路径。英文名称 source。
+## 水平居中，水平线html代码和效果图如下
+![20240918145440](http://sjsclg9ls.hn-bkt.clouddn.com/20240918145440.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>
+        hr{
+            background-color: red;
+            height: 18px;
+            border: none;
+        }
+        body{
+            margin: 0;
+        }
+        div{
+            width: 80px;
+            margin: auto;
+            
+        }
+    </style>
+</head>
+<body>
+    <hr>
+    <div>文字居中</div>
+</body>
+</html>
+```
+## 图片水平垂直居中html代码和效果图如下
+![20240918165522](http://sjsclg9ls.hn-bkt.clouddn.com/20240918165522.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>
+        body{
+            margin: auto;
+            width: 100px;
+        }
+        
+       
+        img{
+            margin: auto;
+            width: 80px;
+           padding-top: 350px;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <img src="./imgs/img2.jpg" alt="">  
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240913\347\211\271\346\256\212\345\255\227\347\254\246\357\274\210\350\275\254\344\271\211\345\255\227\347\254\246\357\274\211\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md" "b/\347\277\201\344\277\241\346\240\213/20240913\347\211\271\346\256\212\345\255\227\347\254\246\357\274\210\350\275\254\344\271\211\345\255\227\347\254\246\357\274\211\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3319a2cd150ad842426b6234a00770e9cf6de94f
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240913\347\211\271\346\256\212\345\255\227\347\254\246\357\274\210\350\275\254\344\271\211\345\255\227\347\254\246\357\274\211\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255.md"
@@ -0,0 +1,123 @@
+## 特殊字符（转义字符）
+- `&nbsp;`：空格	（non-breaking spacing，不断打空格）
+- `&lt;`：小于号`<`（less than）
+-  `&gt;`：大于号`>`（greater than）
+- `&amp;`：符号`&`
+- `&quot;`：双引号
+- `&apos;`：单引号
+- `&copy;`：版权`©`
+- `&trade;`：商标`™`
+-  `&#32464;`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+
+## 下划线、中划线、斜体
+
+- `<u>`：下划线标记
+
+- `<s>`或`<del>`：中划线标记（删除线）
+
+- `<i>`或`<em>`：斜体标记
+
+## css 下划线、中划线、斜体、上划线
+- `text-decoration: overline`:上划线
+- `text-decoration: underline`:下划线
+- `text-decoration: line-through`:删除线
+- `font-style:italic`:斜体
+## 上标`<sup>`   下标`<sub>`
+
+上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
+举例：
+```html
+O<sup>2</sup>    5<sub>3</sub>
+```
+## 1、外部链接：链接到外部文件
+
+举例：
+```html
+<a href="02页面.html">点击进入另外一个文件</a>
+```
+## 2、锚链接
+```html
+<a href="a.html#name1">回到顶部</a>
+```
+## img标签介绍
+
+### 介绍
+
+img: 英文全称 image（图像），代表的是一张图片。
+
+如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
+
+```html
+<img src="图片的URL" />
+```
+## 能插入的图片类型
+
+- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
+
+- 不能往网页中插入的图片格式是：psd、ai等。
+
+## img标签的`src`属性
+这里涉及到图片的一个属性：
+
+- `src`属性：指图片的路径。英文名称 source。
+## 水平居中，水平线html代码和效果图如下
+![20240918145440](http://sjsclg9ls.hn-bkt.clouddn.com/20240918145440.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>
+        hr{
+            background-color: red;
+            height: 18px;
+            border: none;
+        }
+        body{
+            margin: 0;
+        }
+        div{
+            width: 80px;
+            margin: auto;
+            
+        }
+    </style>
+</head>
+<body>
+    <hr>
+    <div>文字居中</div>
+</body>
+</html>
+```
+## 图片水平垂直居中html代码和效果图如下
+![20240918165522](http://sjsclg9ls.hn-bkt.clouddn.com/20240918165522.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>
+        body{
+            margin: auto;
+            width: 100px;
+        }
+        
+       
+        img{
+            margin: auto;
+            width: 80px;
+           padding-top: 350px;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <img src="./imgs/img2.jpg" alt="">  
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240914-\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md" "b/\347\277\201\344\277\241\346\240\213/20240914-\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e62d8dfc63ad538398bb1ef01498653b8b8f2387
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240914-\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md"
@@ -0,0 +1,134 @@
+## 列表标签
+
+列表标签分为三种。
+
+### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
+
+英文单词解释如下：
+
+- ul：unordered list，“无序列表”的意思。
+- li：list item，“列表项”的意思。
+
+例如：
+
+```html
+<ul>
+	<li>默认1</li>
+	<li>默认2</li>
+	<li>默认3</li>
+</ul>
+注意：
+
+- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
+- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
+**css 属性**：
+
+```css
+list-style-position: inside   /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
+```
+### 2、定义列表`<dl>`
+
+> 定义列表的作用非常大。
+
+`<dl>`英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
+
+ - `<dt>`：definition title 列表的标题，这个标签是必须的
+ - `<dd>`：definition description 列表的列表项，如果不需要它，可以不加
+
+备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
+## 表格标签
+
+表格标签用`<table>`表示。
+一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
+所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
+在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
+## img标签的`src`属性
+这里涉及到图片的一个属性：
+
+- `src`属性：指图片的路径。英文名称 source。
+### 单元格的合并
+单元格的属性：
+
+- `colspan`：横向合并。
+- `rowspan`：纵向合并。
+
+### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
+属性同`<td>`标签。
+
+### `<caption>`：表格的标题。使用时和`tr`标签并列
+属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
+## apple导航html代码和效果图如下
+![20240918165301](http://sjsclg9ls.hn-bkt.clouddn.com/20240918165301.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>
+        #nav{
+            
+            background-color:bisque;
+            height: 50px;
+            width: 100%;
+
+        }
+       #nav>ul{
+            list-style-type: none;
+            display: flex;justify-content: space-between;
+            position: relative;
+      
+        }
+      #nav li{
+            padding: 0px 8px;
+            float: left;
+            width: 120px;
+            height: 50px;
+            text-align: center;
+            vertical-align: top;
+            line-height: 50px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="nav">
+        <ul>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z">
+                    </path>
+                </svg>
+            </li>
+            <li>商城</li>
+            <li>Mac</li>
+            <li>iPad</li>
+            <li>iPhone</li>
+            <li>Watch</li>
+            <li>Vison</li>
+            <li>AirPods</li>
+            <li>家居</li>
+            <li>娱乐</li>
+            <li>配件</li>
+            <li>技术支持</li>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m16.2294 29.9556-4.1755-4.0821a6.4711 6.4711 0 1 0 -1.2839 1.2625l4.2005 4.1066a.9.9 0 1 0 1.2588-1.287zm-14.5294-8.0017a5.2455 5.2455 0 1 1 5.2455 5.2527 5.2549 5.2549 0 0 1 -5.2455-5.2527z">
+                    </path>
+                </svg>
+            </li>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m13.4575 16.9268h-1.1353a3.8394 3.8394 0 0 0 -7.6444 0h-1.1353a2.6032 2.6032 0 0 0 -2.6 2.6v8.9232a2.6032 2.6032 0 0 0 2.6 2.6h9.915a2.6032 2.6032 0 0 0 2.6-2.6v-8.9231a2.6032 2.6032 0 0 0 -2.6-2.6001zm-4.9575-2.2768a2.658 2.658 0 0 1 2.6221 2.2764h-5.2442a2.658 2.658 0 0 1 2.6221-2.2764zm6.3574 13.8a1.4014 1.4014 0 0 1 -1.4 1.4h-9.9149a1.4014 1.4014 0 0 1 -1.4-1.4v-8.9231a1.4014 1.4014 0 0 1 1.4-1.4h9.915a1.4014 1.4014 0 0 1 1.4 1.4z">
+                    </path>
+                </svg>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>
+```
diff --git "a/\347\277\201\344\277\241\346\240\213/20240914\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md" "b/\347\277\201\344\277\241\346\240\213/20240914\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e62d8dfc63ad538398bb1ef01498653b8b8f2387
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240914\345\210\227\350\241\250\351\241\271\345\222\214apple\345\257\274\350\210\252.md"
@@ -0,0 +1,134 @@
+## 列表标签
+
+列表标签分为三种。
+
+### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
+
+英文单词解释如下：
+
+- ul：unordered list，“无序列表”的意思。
+- li：list item，“列表项”的意思。
+
+例如：
+
+```html
+<ul>
+	<li>默认1</li>
+	<li>默认2</li>
+	<li>默认3</li>
+</ul>
+注意：
+
+- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
+- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
+**css 属性**：
+
+```css
+list-style-position: inside   /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
+```
+### 2、定义列表`<dl>`
+
+> 定义列表的作用非常大。
+
+`<dl>`英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
+
+ - `<dt>`：definition title 列表的标题，这个标签是必须的
+ - `<dd>`：definition description 列表的列表项，如果不需要它，可以不加
+
+备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
+## 表格标签
+
+表格标签用`<table>`表示。
+一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
+所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
+在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
+## img标签的`src`属性
+这里涉及到图片的一个属性：
+
+- `src`属性：指图片的路径。英文名称 source。
+### 单元格的合并
+单元格的属性：
+
+- `colspan`：横向合并。
+- `rowspan`：纵向合并。
+
+### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
+属性同`<td>`标签。
+
+### `<caption>`：表格的标题。使用时和`tr`标签并列
+属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
+## apple导航html代码和效果图如下
+![20240918165301](http://sjsclg9ls.hn-bkt.clouddn.com/20240918165301.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>
+        #nav{
+            
+            background-color:bisque;
+            height: 50px;
+            width: 100%;
+
+        }
+       #nav>ul{
+            list-style-type: none;
+            display: flex;justify-content: space-between;
+            position: relative;
+      
+        }
+      #nav li{
+            padding: 0px 8px;
+            float: left;
+            width: 120px;
+            height: 50px;
+            text-align: center;
+            vertical-align: top;
+            line-height: 50px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="nav">
+        <ul>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m15.5752 19.0792a4.2055 4.2055 0 0 0 -2.01 3.5376 4.0931 4.0931 0 0 0 2.4908 3.7542 9.7779 9.7779 0 0 1 -1.2755 2.6351c-.7941 1.1431-1.6244 2.2862-2.8878 2.2862s-1.5883-.734-3.0443-.734c-1.42 0-1.9252.7581-3.08.7581s-1.9611-1.0589-2.8876-2.3584a11.3987 11.3987 0 0 1 -1.9373-6.1487c0-3.61 2.3464-5.523 4.6566-5.523 1.2274 0 2.25.8062 3.02.8062.734 0 1.8771-.8543 3.2729-.8543a4.3778 4.3778 0 0 1 3.6822 1.841zm-6.8586-2.0456a1.3865 1.3865 0 0 1 -.2527-.024 1.6557 1.6557 0 0 1 -.0361-.337 4.0341 4.0341 0 0 1 1.0228-2.5148 4.1571 4.1571 0 0 1 2.7314-1.4078 1.7815 1.7815 0 0 1 .0361.373 4.1487 4.1487 0 0 1 -.9867 2.587 3.6039 3.6039 0 0 1 -2.5148 1.3236z">
+                    </path>
+                </svg>
+            </li>
+            <li>商城</li>
+            <li>Mac</li>
+            <li>iPad</li>
+            <li>iPhone</li>
+            <li>Watch</li>
+            <li>Vison</li>
+            <li>AirPods</li>
+            <li>家居</li>
+            <li>娱乐</li>
+            <li>配件</li>
+            <li>技术支持</li>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m16.2294 29.9556-4.1755-4.0821a6.4711 6.4711 0 1 0 -1.2839 1.2625l4.2005 4.1066a.9.9 0 1 0 1.2588-1.287zm-14.5294-8.0017a5.2455 5.2455 0 1 1 5.2455 5.2527 5.2549 5.2549 0 0 1 -5.2455-5.2527z">
+                    </path>
+                </svg>
+            </li>
+            <li>
+                <svg height="48" viewBox="0 0 17 48" width="17" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="m13.4575 16.9268h-1.1353a3.8394 3.8394 0 0 0 -7.6444 0h-1.1353a2.6032 2.6032 0 0 0 -2.6 2.6v8.9232a2.6032 2.6032 0 0 0 2.6 2.6h9.915a2.6032 2.6032 0 0 0 2.6-2.6v-8.9231a2.6032 2.6032 0 0 0 -2.6-2.6001zm-4.9575-2.2768a2.658 2.658 0 0 1 2.6221 2.2764h-5.2442a2.658 2.658 0 0 1 2.6221-2.2764zm6.3574 13.8a1.4014 1.4014 0 0 1 -1.4 1.4h-9.9149a1.4014 1.4014 0 0 1 -1.4-1.4v-8.9231a1.4014 1.4014 0 0 1 1.4-1.4h9.915a1.4014 1.4014 0 0 1 1.4 1.4z">
+                    </path>
+                </svg>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>
+```
diff --git "a/\347\277\201\344\277\241\346\240\213/20240918-\350\241\250\345\215\225\346\240\207\347\255\276.md" "b/\347\277\201\344\277\241\346\240\213/20240918-\350\241\250\345\215\225\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9369c9b4b16f0942359150c7c04e744e28a6a990
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240918-\350\241\250\345\215\225\346\240\207\347\255\276.md"
@@ -0,0 +1,89 @@
+## 表单标签
+
+表单标签用`<form>`表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
+
+**属性：**
+ - `name`：表单的名称，用于JS来操作或控制表单时使用；
+ - `id`：表单的名称，用于JS来操作或控制表单时使用；
+ - `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+ - `method`：表单数据的提交方式，一般取值：get(默认)和post
+
+注意：表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。
+### `<input>`：输入标签（文本框）
+
+用于接收用户输入。
+
+```html
+<input type="text" />
+```
+
+** 属性：**
+
+- **`type="属性值"`**：文本类型。属性值可以是：
+	- `text`（默认）
+	- `password`：密码类型
+	- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
+	）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
+	- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
+	- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。
+	- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
+	- `button`：普通按钮，结合js代码进行使用。
+	- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
+	- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
+	- `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
+	- `file`：文件选择框。
+    ### 表单按钮改样式html代码和效果图如下###
+	![20240919185543](http://sjsclg9ls.hn-bkt.clouddn.com/20240919185543.png)
+	``` html
+	 <style>
+        #tab tr td{
+            border: 1px solid black ;
+            text-align: center;
+        }
+        #tab{
+            width: 100%;
+            border-collapse:collapse;
+        }
+        #tab tr:hover{
+            background-color: aquamarine;
+        }
+        #tab tr td:hover{
+            background-color: rgb(140, 127, 255);
+            font-size: 25px;
+        }
+        #but1{
+            background-color: blue;
+            color: white;
+        }
+        #but2{
+            border-color: silver;
+            border-style: solid;
+        }
+        #but3{
+            border-color: silver;
+            border-style: dashed;
+        }
+        #but4{
+            border-color: red;
+            color: red;
+            border-style: solid;
+        }
+    </style>
+	<table id="tab" >
+        <tr>
+            <td>单元格1</td>
+            <td>单元格2</td>
+            <td>单元格3</td>
+        </tr>
+        <tr>
+            <td>单元格4</td>
+            <td>单元格5</td>
+            <td>单元格6</td>
+        </tr>
+        
+    </table>
+    <input type="button" value="按钮1" id="but1">
+    <input type="button" value="按钮2" id="but2">
+    <input type="button" value="按钮3" id="but3">
+    <input type="button" value="按钮3" id="but4">
+	```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240920-html5\346\226\260\345\242\236\345\206\205\345\256\271.md" "b/\347\277\201\344\277\241\346\240\213/20240920-html5\346\226\260\345\242\236\345\206\205\345\256\271.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d3125728892e98cd58f7ec5066079bb2057d491c
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240920-html5\346\226\260\345\242\236\345\206\205\345\256\271.md"
@@ -0,0 +1,153 @@
+### 什么是 HTML5
+
+HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
+
+HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
+
+
+**`HTML5`的广义概念**：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
+
+`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
+
+**总结**：`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。
+
+
+**富客户端**：具有很强的**交互性**和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。
+
+**PS：**
+
+单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。
+
+如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。
+## H5中新增的语义标签
+
+- `<section>` 表示区块
+
+- `<article>` 表示文章。如文章、评论、帖子、博客
+
+- `<header>` 表示页眉
+
+- `<footer>` 表示页脚
+
+- `<nav>` 表示导航
+
+- `<aside>` 表示侧边栏。如文章的侧栏
+
+- `<figure>` 表示媒介内容分组。
+
+- `<mark>` 表示标记 (用得少)
+
+- `<progress>` 表示进度 (用得少)
+
+- `<time>` 表示日期
+
+本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
+### H5中新增的表单类型
+
+- `email` 只能输入email格式。自动带有验证功能。
+
+- `tel` 手机号码。
+
+- `url` 只能输入url格式。
+
+- `number` 只能输入数字。
+
+- `search` 搜索框
+
+- `range` 滑动条
+
+- `color` 拾色器
+
+- `time`	时间
+
+- `date` 日期
+
+- `datetime` 时间日期
+
+- `month` 月份
+
+- `week` 星期
+### 音频
+
+HTML5通过`<audio>`标签来解决音频播放的问题。
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+
+- `loop` 循环播放。
+
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+### 登录界面html代码和效果图如下
+![20240922134815](http://sjsclg9ls.hn-bkt.clouddn.com/20240922134815.png)
+```html
+<style>
+        body{
+            background-color:#ffbb00;
+        }
+        .box{
+            width: 400px;
+            height: 400px;
+            background-color: #fff;
+            margin: auto;
+            margin-top: 150px;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .dl{
+            text-align: center;
+            font-size: 28px;
+            color: #000;
+            margin-top: 80px;
+            margin-bottom: 10px;
+            letter-spacing: 3px;
+            font-family: sans-serif;
+        }
+        .ipt{
+            width: 300px;
+            height: 30px;
+            width: 300px;
+            height: 40px;
+            padding-left: 10px;
+            margin-top: 20px;
+            margin-left: 50px;
+        }
+        .but{
+            width: 300px;
+            height: 35px;
+            width: 300px;
+            height: 40px;
+            margin-top: 20px;
+            margin-left: 50px;
+            border-radius: 5px;
+            background-color: #64a9d9;
+            cursor: pointer;
+            color: #fff;
+        }
+    </style>
+    <div class="box">
+        <h1 class="dl">欢迎登录</h1>
+        <input type="text" placeholder="用户名" class="ipt">
+        <input type="password" placeholder="密码" class="ipt">
+        <input type="button" value="登录" class="but">
+    </div>
+```
+### 滚动文字html代码和效果图如下
+![2024-09-22134915-ezgif.com-video-to-gif-converter](http://sjsclg9ls.hn-bkt.clouddn.com/2024-09-22134915-ezgif.com-video-to-gif-converter.gif)
+```html
+ <style>
+        div{
+            overflow: hidden;
+            box-sizing: border-box;
+            animation: scrill 10s linear infinite;
+        }
+        
+        @keyframes scrill{
+            0%{
+                transform: translateX(100%);
+            }
+            100%{
+                transform: translateX(-100%);
+            }
+        }
+    </style>
+```
diff --git "a/\347\277\201\344\277\241\346\240\213/20240923-html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md" "b/\347\277\201\344\277\241\346\240\213/20240923-html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md"
new file mode 100644
index 0000000000000000000000000000000000000000..bbead1f9fc84fb8b79f07cadbee36f23bf15d97c
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240923-html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md"
@@ -0,0 +1,58 @@
+## 拖拽
+在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
+
+### 拖拽元素
+
+页面中设置了 `draggable="true"` 属性的元素。
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+## 地理定位
+
+在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
+
+### 获取地理信息的方式
+
+#### 1、IP地址
+
+
+#### 2、三维坐标：
+
+
+（1）**GPS**（Global Positioning System，全球定位系统）。
+
+目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
+
+- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
+
+- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
+
+- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
+
+- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
+
+- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
+
+- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
+
+
+## 全屏
+
+>  HTML5规范允许用户自定义网页上**任一元素**全屏显示。
+
+### 开启/关闭全屏显示
+
+方法如下：（注意 screen 是小写）
+
+```javascript
+	requestFullscreen()   //让元素开启全屏显示
+
+	cancleFullscreen()    //让元素关闭全屏显示
+```
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20240923html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md" "b/\347\277\201\344\277\241\346\240\213/20240923html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md"
new file mode 100644
index 0000000000000000000000000000000000000000..bbead1f9fc84fb8b79f07cadbee36f23bf15d97c
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240923html5\346\226\260\345\242\236\345\206\205\345\256\271(\344\272\214).md"
@@ -0,0 +1,58 @@
+## 拖拽
+在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
+
+### 拖拽元素
+
+页面中设置了 `draggable="true"` 属性的元素。
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+## 地理定位
+
+在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
+
+### 获取地理信息的方式
+
+#### 1、IP地址
+
+
+#### 2、三维坐标：
+
+
+（1）**GPS**（Global Positioning System，全球定位系统）。
+
+目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
+
+- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
+
+- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
+
+- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
+
+- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
+
+- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
+
+- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
+
+
+## 全屏
+
+>  HTML5规范允许用户自定义网页上**任一元素**全屏显示。
+
+### 开启/关闭全屏显示
+
+方法如下：（注意 screen 是小写）
+
+```javascript
+	requestFullscreen()   //让元素开启全屏显示
+
+	cancleFullscreen()    //让元素关闭全屏显示
+```
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20240925-\345\255\227\344\275\223\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\347\277\201\344\277\241\346\240\213/20240925-\345\255\227\344\275\223\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..dce23722c10f6155108d9f90440bf65cd857fba9
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240925-\345\255\227\344\275\223\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md"
@@ -0,0 +1,46 @@
+## font 字体属性
+line-height :行高
+font-size:字体大小
+font-family:字体类型
+font-style:italic:字体倾斜
+font-weight: bold：粗体
+font-variant: small-caps：小写变大写
+## 文本属性
+
+CSS样式中，常见的文本属性有以下几种：
+
+- `letter-spacing: 0.5cm ;`  单个字母之间的间距
+- `word-spacing: 1cm;`   单词之间的间距
+- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
+- `color:red;` 字体颜色
+- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
+- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
+### 博客园导航栏html代码和效果图如下
+![20240928172400](http://sjsclg9ls.hn-bkt.clouddn.com/20240928172400.png)
+``` html
+<style>
+        #nav>ul{
+            list-style-type: none;
+        }
+        #nav>ul li{
+            float: left;
+            margin-left: 50px;
+            color: #696767;
+        }
+    </style>
+</head>
+<body>
+    <div id="nav">
+        <ul>
+            <li>首页</li>
+            <li>新闻</li>
+            <li>博问</li>
+            <li>会员</li>
+            <li>闪存</li>
+            <li>班级</li>
+        </ul>
+    </div>
+   
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471.md" "b/\347\277\201\344\277\241\346\240\213/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471.md"
new file mode 100644
index 0000000000000000000000000000000000000000..23731733791dd73d92bca0176132d0e712bb2b0f
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471.md"
@@ -0,0 +1,177 @@
+# background 的常见背景属性
+常见的背景属性有以下几种：
+- `background-color:#ff99ff;`  设置元素的背景颜色。
+- `background-image:url(images/2.gif);` 将图像设置为背景。
+-  `background-repeat: no-repeat;`  设置背景图片是否重复及如何重复，默认平铺满。
+	- `no-repeat`不要平铺；
+	- `repeat-x`横向平铺；
+	- `repeat-y`纵向平铺。
+
+- `background-position:center top;` 设置背景图片在当前容器中的位置。
+- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
+属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
+
+- 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
+
+
+
+## background-color：背景颜色的表示方法
+
+比如红色可以有下面的三种表示方法：
+
+```css
+	background-color: red;
+	background-color: rgb(255,0,0);
+	background-color: #ff0000;
+```
+### RGB 表示法
+
+RGB 表示三原色“红”red、“绿”green、“蓝”blue
+
+比如红色：
+```css
+background-color: rgb(255,0,0);
+```
+黑色：
+
+```css
+background-color: rgb(0,0,0);
+```
+
+颜色可以叠加，比如黄色就是红色和绿色的叠加：
+
+```css
+background-color: rgb(255,255,0);
+```
+
+### RGBA 表示法
+
+```javascript
+    background-color: rgba(0, 0, 255, 0.3);
+
+    border: 30px solid rgba(0, 255, 0, 0.3);
+```
+
+**代码解释**：
+
+- RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
+
+- R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
+
+### HSLA 表示法
+
+举例：
+
+```javascript
+	background-color: hsla(240,50%,50%,0.4);
+```
+
+解释：
+
+- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
+
+- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
+
+- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
+
+- `A` 透明度，取值范围 0~1。
+
+
+**关于设置透明度的其他方式：**
+
+（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
+
+（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
+
+## `background-repeat`属性
+
+`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
+
+- `no-repeat`（不要平铺）
+- `repeat-x`（横向平铺）
+- `repeat-y`（纵向平铺）
+
+## `background-position`属性
+
+`background-position`属性指的是**背景定位**属性。公式如下：
+
+**1、用像素值描述属性值：**
+
+格式如下：
+
+```
+	background-position:向右偏移量 向下偏移量;
+```
+
+属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
+
+**2、用单词描述属性值：**
+
+格式如下：
+
+```
+	background-position: 描述左右的词 描述上下的词;
+```
+
+- 描述左右的词：left、center、right
+- 描述上下的词：top 、center、bottom
+
+比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
+
+## background-attachment 属性
+
+- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
+	- `fixed`（背景就会被固定住，不会被滚动条滚走）。
+	- `scroll`（与fixed属性相反，默认属性）
+
+## background 综合属性
+
+background属性和border一样，是一个综合属性，可以将多个属性写在一起
+
+例:
+```css
+	background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+等价于：
+```css
+	background-color:red;
+	background-image:url(1.jpg);
+	background-repeat:no-repeat;
+	background-position:100px 100px;
+	background-attachment:fixed;
+```
+### background属性基础练习html代码和效果图如下
+[基础练习](http://sjsclg9ls.hn-bkt.clouddn.com/2024-10-01204449-ezgif.com-video-to-gif-converter.gif)
+```html
+<style>
+        .box{
+            background-color: blue;
+            width: 100px;
+            height: 100px;
+        }
+       .image-background{
+        background-image: url(./background.jpg);
+        height: 500px;
+        background-repeat: no-repeat;
+       }
+       .cover-image{
+        background-image: url(./background.jpg);
+        height: 500px;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+       }
+       .header{
+        background-image: url(./background.jpg);
+        height: 500px;
+        background-position: right bottom;
+        background-repeat: no-repeat;
+       }
+       .pattern{
+        background-image: url(./background.jpg);
+        height: 2000px;
+        background-repeat:repeat-y;
+       }
+       
+    </style>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20240930-\350\203\214\346\231\257\345\261\236\346\200\2472.md" "b/\347\277\201\344\277\241\346\240\213/20240930-\350\203\214\346\231\257\345\261\236\346\200\2472.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ca64c68d9708cc3ada1920139b937c7e78d09fa9
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20240930-\350\203\214\346\231\257\345\261\236\346\200\2472.md"
@@ -0,0 +1,342 @@
+## background-attachment 属性
+
+- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
+	- `fixed`（背景就会被固定住，不会被滚动条滚走）。
+	- `scroll`（与fixed属性相反，默认属性）
+
+### background 综合属性
+
+background属性和border一样，是一个综合属性，可以将多个属性写在一起。
+
+举例1:
+
+```css
+	background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+
+等价于：
+
+```css
+	background-color:red;
+	background-image:url(1.jpg);
+	background-repeat:no-repeat;
+	background-position:100px 100px;
+	background-attachment:fixed;
+```
+
+
+上面的属性中，可以任意省略其中的一部分。
+
+比如说，对于下面这样的属性：
+
+```css
+	background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
+```
+
+## `background-size`属性：背景尺寸
+
+`background-size`属性：设置背景图片的尺寸。
+
+格式举例：
+
+```javascript
+	/* 宽、高的具体数值 */
+	background-size: 500px 500px;
+
+	/* 宽高的百分比（相对于容器的大小） */
+	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;
+
+	background-size: 100% auto;  //这个属性可以自己试验一下。
+
+	/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
+	background-size: cover;
+
+	/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
+	background-size: contain;
+```
+
+这里我们对属性值 `cover` 和 `contain` 进行再次强调：
+
+- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。
+
+- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。
+
+## 背景原点：`background-origin` 属性
+
+`background-origin` 属性：控制背景从什么地方开始显示。
+
+格式举例：
+
+```javascript
+
+	/* 从 padding-box 内边距开始显示背景图 */
+	background-origin: padding-box;           //默认值
+
+	/* 从 border-box 边框开始显示背景图  */
+	background-origin: border-box;
+
+	/* 从 content-box 内容区域开始显示背景图  */
+	background-origin: content-box;
+
+```
+
+如果属性值设置成了`border-box`，边框部分也会显示图片。
+
+
+## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
+
+格式举例：
+
+`background-clip: content-box;`   超出的部分，将裁剪掉。属性值可以是：
+
+ - `border-box` 超出 border-box 的部分，将裁剪掉
+
+ - `padding-box` 超出 padding-box 的部分，将裁剪掉
+
+ - `content-box` 超出 content-box 的部分，将裁剪掉
+
+假设现在有这样的属性设置：
+
+```javascript
+	background-origin: border-box;
+
+	background-clip: content-box;
+```
+
+上方代码的意思是，背景图片从**边框部分**开始加载，但是超出**内容区域**的部分将被裁减掉。
+
+## 同时设置多个背景
+
+可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
+
+
+## 渐变：background-image
+
+渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
+
+渐变分为：
+
+- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+
+- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
+
+- 重复渐变。
+
+
+### 线性渐变
+
+格式：
+
+```javascript
+
+    background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+    background-image: linear-gradient(to right, yellow, green);
+```
+格式举例：
+
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        div {
+            width: 500px;
+            height: 100px;
+            margin: 10px auto;
+            border: 1px solid #000;
+        }
+
+        /* 语法：
+            linear-gradient(方向，起始颜色，终止颜色);
+            方向：to left   to right  to top   to bottom 　角度　30deg
+            起始颜色
+            终止颜色
+        */
+        div:nth-child(1) {
+            background-image: linear-gradient(to right, yellow, green);
+        }
+
+        /* 不写方向，表示默认的方向是：从上往下 */
+        div:nth-child(2) {
+            background-image: linear-gradient(yellow, green);
+        }
+
+        /* 方向可以指定角度 */
+        div:nth-child(3) {
+            width: 100px;
+            height: 100px;
+            background-image: linear-gradient(135deg, yellow, green);
+        }
+
+        /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
+        div:nth-child(4) {
+            background-image: linear-gradient(to right,
+            yellow 0%,
+            red 40%,
+            green 70%,
+            blue 100%);
+
+        }
+
+        /* 颜色之间，出现突变 */
+        div:nth-child(5) {
+            background-image: linear-gradient(45deg,
+            yellow 0%,
+            yellow 25%,
+            blue 25%,
+            blue 50%,
+            red 50%,
+            red 75%,
+            green 75%,
+            green 100%
+            );
+        }
+
+        div:nth-child(6) {
+            background-image: linear-gradient(to right,
+            #000 0%,
+            #000 25%,
+            #fff 25%,
+            #fff 50%,
+            #000 50%,
+            #000 75%,
+            #fff 75%,
+            #fff 100%
+            );
+
+        }
+
+    </style>
+</head>
+<body>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+</body>
+</html>
+```
+### background进阶练习和滚动视差线性渐变html代码和效果图如下
+[进阶练习](http://sjsclg9ls.hn-bkt.clouddn.com/2024-10-01201741-ezgif.com-video-to-gif-converter.gif)
+```html
+ <style>
+         div{
+            margin-bottom: 2px;
+        }
+         .multi-background{
+            width: 650px;
+            height: 500px;
+            background-image: url(./头像.png),url(./background2.jpg);
+            background-repeat: no-repeat;
+         }
+         .gradient-box{
+            width: 200px;
+            height: 200px;
+            background-image: linear-gradient(to right ,blue,red );
+         }
+         .cropped-background{
+            background-image: url(./头像.png);
+            background-size: 50px 50px;
+            background-position: center;
+            width: 200px;
+            height:200px;
+            overflow: hidden;
+        }
+        .responsive-background{
+            background-image: url(./头像.png);
+            background-size: 100% 100%;
+            width: 500px;
+            height: 500px;
+        }
+        .sticky-footer{
+            width: 500px;
+            height: 500px;
+            background-image: url(./background2.jpg);
+            background-size: contain;
+            background-attachment: fixed;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="multi-background"></div>
+    <div class="gradient-box"></div>
+    <div class="cropped-background"></div>
+    <div class="responsive-background"></div>
+    <div class="sticky-footer"></div>
+</body>
+```
+[滚动视差线](http://sjsclg9ls.hn-bkt.clouddn.com/2024-10-01204011-ezgif.com-video-to-gif-converter.gif)
+```html
+   <style>
+          * {
+      margin: 0px;
+      padding: 0px;
+  }
+
+  div {
+      height: 100vh;
+      background: rgba(0, 0, 0, .7);
+      color: #fff;
+      line-height: 100vh;
+      text-align: center;
+      font-size: 20vh;
+  }
+  .img1 {
+      background-image: url(https://oss.9ihub.com/test/20240929172229.png);
+      background-attachment: fixed;
+      background-size: cover;
+      background-position:  center center;
+  }
+
+  .img2 {
+      background-image: url(https://oss.9ihub.com/test/20240929172249.png);
+      background-attachment: fixed;
+      background-size: cover;
+      background-position:  center center;
+  }
+
+  .img3 {
+      background-image: url(https://oss.9ihub.com/test/20240929172304.png);
+      background-attachment: fixed;
+      background-size: cover;
+      background-position:  center center;
+  }
+    </style>
+</head>
+<body>
+    <div class="txt1">头部</div>
+    <div class="bg img1"></div>
+    <div class="txt1">内容</div>
+    <div class="bg img2"></div>
+    <div class="txt1">底部</div>
+    <div class="bg img3"></div>
+</body>
+```
+[线性渐变](http://sjsclg9ls.hn-bkt.clouddn.com/20241001203828.png)
+```html
+<style>
+        div{
+            width: 500px;s
+            height: 100px;
+            margin: 10px auto;
+            border: 1px solid #000;
+        }
+        .d1{
+            background-image: linear-gradient(45deg,red 0%,red 25%,aqua 25%,aqua 50%,chartreuse 50%,chartreuse 75%,blue 75%,blue 100%);
+        }
+        .d2{
+            background-image: linear-gradient(to right,#000 0%,#000 25%,#fff 25%,#fff 50%,#000 50%,#000 75%,#fff 75%,#fff 100%);
+        }
+    </style>
+</head>
+<body>
+        <div class="d1"></div>
+        <div class="d2"></div>
+</body>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20241009-CSS\346\240\267\345\274\217\350\241\250\357\274\214\351\200\211\346\213\251\345\231\250.md" "b/\347\277\201\344\277\241\346\240\213/20241009-CSS\346\240\267\345\274\217\350\241\250\357\274\214\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ef9221ee0de3566e16a5014230c14f7dba2e8e04
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241009-CSS\346\240\267\345\274\217\350\241\250\357\274\214\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,168 @@
+## CSS 概述
+CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。
+
+## CSS 的一些简单常见的属性
+
+**字体颜色：**（c）
+
+```html
+color:red;
+```
+
+color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制
+
+**字号大小：**（fos）
+
+```html
+font-size:40px;
+```
+
+font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行
+
+**背景颜色：**（bgc）
+
+```html
+background-color: blue;
+```
+
+background 就是“背景”。
+
+**加粗：**（fwb）
+
+```html
+font-weight: bold;
+```
+
+font 是“字体” weight 是“重量”的意思，bold 粗。
+
+**不加粗：**（fwn）
+
+```html
+font-weight: normal;
+```
+
+normal 就是正常的意思。
+
+**斜体：**（fsi）
+
+```html
+font-style: italic;
+```
+
+italic 就是“斜体”。
+
+**不斜体：**（fsn）
+
+```html
+font-style: normal;
+```
+
+**下划线：**（tdu）
+
+```html
+text-decoration: underline;
+```
+
+decoration 就是“装饰”的意思。
+
+**没有下划线：**（tdn）
+
+```html
+text-decoration:none;
+```
+
+## CSS 的书写方式
+
+CSS 的书写方式有三种：
+
+1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签。
+
+2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用`<style>`**标签**。范围针对此页面。
+3. **外链样式**：引入外部样式表 CSS **文件**。这种引入方式又分为两种：
+   - 3.1 采用`<link>`标签。
+   - 3.2 采用 import 导入，必须写在`<style>`标签中。
+
+
+### 行内样式
+
+采用 style 属性。范围只针对此标签适用。
+
+该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
+
+### 内嵌样式表
+
+在 head 标签中加入`<style>`标签，对多个标签进行统一修改，范围针对此页面。
+
+该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
+
+### 引入外部样式表 css 文件
+
+**引入样式表文件**的方式又分为两种：
+
+-   （1）**采用`<link>`标签**
+
+-   （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。
+
+> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
+
+## CSS 选择器
+
+CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。
+
+CSS 的选择器分为两大类：基本选择器和扩展选择器。
+
+## CSS 的几种高级选择器
+
+**高级选择器：**
+
+-   后代选择器：用空格隔开
+-   交集选择器：选择器之间紧密相连
+-   并集选择器（分组选择器）：用逗号隔开
+-   伪类选择器
+
+### 后代选择器: 定义的时候用空格隔开
+
+对于`E F`这种格式，表示**所有属于 E 元素后代的 F 元素**，有这个样式。空格就表示后代。
+
+后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
+
+后代选择器，描述的是祖先结构。
+
+VS Code 的快捷键：
+
+在 VS Code 中输入`p#haha`，按 tab 键后，会生成`<p id="haha"></p>`。
+
+在 VS Code 中输入`p.haha`，按 tab 键后，会生成`<p class="haha"></p>`。
+
+###  交集选择器：定义的时候紧密相连
+
+
+定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
+
+如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器 id 选择器，则写为`div#special`。
+
+选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。
+
+### 线性渐变专项练习html代码和效果图如下
+[效果图](http://sjsclg9ls.hn-bkt.clouddn.com/20241010202107.png)
+```html
+    <style>
+        .kz{
+            width: 700px;
+            height: 500px;
+            background-color: white;
+            background-image: linear-gradient(
+            90deg,
+            rgba(0, 255, 0, 0.5) 50%,
+            transparent 50%),
+            linear-gradient(
+            rgba(0, 255, 0, 0.5) 50%,
+            transparent 50%);
+            background-size: 30px 30px; 
+        } 
+    </style>
+</head>
+<body>
+    <div class="kz"></div>
+</body>
+```
diff --git "a/\347\277\201\344\277\241\346\240\213/20241011-CSS\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\347\277\201\344\277\241\346\240\213/20241011-CSS\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9ed449288729e7004dbff35f95f533ab7a007d78
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241011-CSS\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,41 @@
+## 伪类（伪类选择器）
+
+
+**伪类**：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。
+
+
+比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
+
+
+
+### 静态伪类选择器、动态伪类选择器
+
+
+伪类选择器分为两种。
+
+（1）**静态伪类**：只能用于**超链接**的样式。如下：
+
+- `:link` 超链接点击之前
+- `:visited` 链接被访问过之后
+
+PS：以上两种样式，只能用于超链接。
+
+（2）**动态伪类**：针对**所有标签**都适用的样式。如下：
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+## 超链接a标签
+
+### 超链接的四种状态
+
+
+a标签有4种伪类（即对应四种状态）如下：
+
+- `:link`  	“链接”：超链接点击之前
+- `:visited` “访问过的”：链接被访问过之后
+- `:hover`	“悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+
diff --git "a/\347\277\201\344\277\241\346\240\213/20241012-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md" "b/\347\277\201\344\277\241\346\240\213/20241012-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..82d92068fc3917b69653f4ca674364320c6a2321
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241012-CSS\347\273\247\346\211\277\346\200\247\345\222\214\345\261\202\345\217\240\346\200\247.md"
@@ -0,0 +1,41 @@
+## CSS 继承性
+继承是CSS的一个重要特性，它允许一些属性值从父元素传递到子元素。这意味着子元素可以自动继承父元素的一些样式，而无需为每个子元素单独设置。
+
+### 继承的属性
+并非所有CSS属性都是可继承的。一些常见的继承属性包括：
+
+- `: color：文本颜色
+- `: font-family：字体系列
+- `: font-size：字体大小
+- `: line-height：行高
+- `: text-align：文本对齐方式
+- `: list-style：列表样式
+### 非继承的属性
+大多数的盒模型属性（如width, height, padding, margin等）、背景属性（如background-color, background-image等）以及定位属性（如position, top, left等）不会被继承。
+
+控制继承
+CSS提供了一些关键字来控制继承行为：
+inherit：强制继承父元素的值
+initial：将属性值设置为初始值
+unset：如果属性是可继承的，则行为类似于inherit；如果属性不可继承，则行为类似于initial
+CSS 层叠性
+层叠性是指当多个选择器应用到同一个元素上时，CSS如何决定最终的样式。
+
+## 层叠规则
+### 层叠规则基于以下三个主要因素：
+
+1. 重要性（!important）：使用!important声明的规则优先级最高。
+2. 选择器特异性：选择器的特异性决定了其优先级。特异性由选择器类型和数量决定，如内联样式 > ID选择器 > 类选择器 > 元素选择器。
+3. 源代码顺序：如果两个规则的特异性相同，则后出现的规则将覆盖先前的规则。
+### 计算特异性
+特异性是通过计算选择器中不同组件的数量来确定的，通常表示为四个部分的元组（a, b, c, d）：
+
+- a：如果声明来自style属性（即内联样式），则计为1，否则为0。
+- b：选择器中ID选择器的数量。
+- c：选择器中类选择器、属性选择器和伪类的数量。
+- d：选择器中元素选择器和伪元素的数量。
+### 解决冲突
+当多个规则应用于同一元素时，按照以下顺序解决冲突:
+1. 检查是否使用了!important，并优先应用。
+2. 比较特异性，选择特异性高的规则。
+3. 如果特异性相同，则根据源代码中的顺序应用最后出现的规则。
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20241014-CSS\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\347\277\201\344\277\241\346\240\213/20241014-CSS\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0f1eb80ecb95e89290b9990eb9d6b7e986433fd1
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241014-CSS\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,34 @@
+## 盒子模型
+盒子模型，英文即box model。无论是div、span、还是a都是盒子。
+
+但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
+
+### 盒子模型的组成部分
+#### 内容（Content）
+- 盒子的中心部分，显示文本、图片等元素。
+- 可以设置宽度（width）和高度（height）。
+#### 内边距（Padding）
+- 内容区域与边框之间的空间。
+- 可以单独设置四个方向的内边距（padding-top, padding-right, padding-bottom, padding-left）。
+#### 边框（Border）
+- 包围内容和内边距的线框。
+- 可以设置边框的宽度、样式和颜色。
+#### 外边距（Margin）
+- 边框外的空间，用于创建元素之间的间隔。
+- 可以单独设置四个方向的外边距（margin-topmargin-right, margin-bottom, margin-left）。
+#### 盒子模型的尺寸计算
+- 总宽度 = 左外边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右外边距 
+- 总高度 = 上外边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下外边距
+#### 盒子模型的视觉表现
+- 内容区域是实际显示内容的地方。
+- 内边距区域是透明的，背景色或背景图片会延伸到这个区域。
+- 边框区域是不可见的，但可以设置样式来显示。
+- 外边距区域是完全透明的，不包含任何内容，用于元素之间的间隔。
+#### 相关CSS属性
+- width 和 height 控制内容区域的尺寸。
+- padding-top, padding-right, padding-bottom, padding-left 控制内边距。
+- border-width, border-style, border-color 控制边框的宽度、样式和颜色。
+- margin-top, margin-right, margin-bottom, margin-left 控制外边距。
+### 注意事项
+- 盒子模型的尺寸计算方式对布局有重要影响，特别是在响应式设计中。
+- CSS3引入了box-sizing属性，允许开发者改变盒模型的计算方式（默认为content-box，可以改为border-box）
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20241016-CSS\346\265\256\345\212\250..md" "b/\347\277\201\344\277\241\346\240\213/20241016-CSS\346\265\256\345\212\250..md"
new file mode 100644
index 0000000000000000000000000000000000000000..77b6994db4531ce120ed35c281c58439fea7b8f0
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241016-CSS\346\265\256\345\212\250..md"
@@ -0,0 +1,160 @@
+
+## 行内元素和块级元素
+
+***行内元素和块级元素的区别：***
+
+行内元素：
+
+- 与其他行内元素并排
+- 不能设置宽、高。默认的宽度，就是文字的宽度
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%
+
+
+### 行内元素和块级元素的分类：
+
+从HTML的角度来讲，标签分为文本级、容器级：
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+- 行内元素
+
+   - `span`标签是行内元素，只占据内容这一部分
+
+   - 除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素
+- 块级元素
+
+   - `h1`标签是块级元素，占据了整行，宽高属性只对块级元素`h1`生效
+   - 所有的容器级标签都是块级元素，还有p标签
+
+
+### 行内元素和块级元素的相互转换
+
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+#### 块级元素可以转换为行内元素：
+
+给一个块级元素（比如div）设置：
+
+```css
+display: inline;
+```
+这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+#### 行内元素转换为块级元素：
+
+同样的道理，一旦给一个行内元素（比如span）设置：
+
+```css
+display: block;
+```
+
+那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+！**脱离标准流**！
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
+- （1）浮动
+- （2）绝对定位
+- （3）固定定位
+
+## 浮动的性质
+
+> 浮动是css里面布局用的最多的属性。
+
+给这两个div增加一个浮动属性，比如`float: left;`,此时两个元素并排了，并且两个元素都能够设置宽度、高度了
+
+***浮动的三个性质***
+### 性质1：浮动的元素脱标
+
+脱标即脱离标准流
+
+span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
+
+**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。
+
+
+### 性质2：浮动的元素互相贴靠
+
+给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果
+
+同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。
+
+
+### 性质3：浮动的元素有“字围”效果
+**标准流中的文字不会被浮动的盒子遮挡住**
+
+关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
+
+
+### 性质4：收缩
+
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
+
+
+
+### clear:both方法;
+
+可以使用`clear:both;`这个属性,可以不写height，也把浮动清除
+
+```css
+clear:both;
+```
+
+clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思就是：**不允许左侧和右侧有浮动对象。**
+
+这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**
+
+### overflow:hidden方法;
+
+```css
+overflow:hidden;
+```
+overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”，所有溢出边框的内容，都要隐藏掉
+###　作业代码和效果图 
+```html
+    <style>
+        .aaa{
+            width: 700px;
+            height: 400px;
+        }
+        .bbb{
+            width: 700px;
+            border-top: 2px lightgrey dashed;
+            margin-top: 10px 0;
+        }
+        .b{
+            float: right;
+        }
+        a{
+            text-decoration: none;
+        }
+        .ccc{
+            width: 700px; 
+            height: 2px;  
+            background: linear-gradient(to right, blue, red); 
+            margin: 10px 0; 
+        }
+        .c{
+            float: right;
+        }
+        .d{
+            color: blue;
+        }
+        .ddd{
+            border-top: 5px solid transparent; 
+        }
+    </style>
+```
diff --git "a/\347\277\201\344\277\241\346\240\213/20241018-\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\347\277\201\344\277\241\346\240\213/20241018-\345\256\232\344\275\215\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..34d4c64493384d225a8ea294dbb6054501bf6f9a
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241018-\345\256\232\344\275\215\345\261\236\346\200\247.md"
@@ -0,0 +1,100 @@
+## 相对定位
+- 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
+- 不脱标，老家留坑，别人不会把它的位置挤走
+### 相对定位的用途
+如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
+- 微调元素
+- 做绝对定位的参考，子绝父相
+
+### 相对定位的定位值
+- left：盒子右移
+- right：盒子左移
+- top：盒子下移
+- bottom：盒子上移
+- PS：负数表示相反的方向
+
+## 绝对定位
+- 绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示
+
+```
+    position: absolute;  /*绝对定位*/
+	left: 10px;  /*横坐标*/
+	top/bottom: 20px;  /*纵坐标*/
+```
+
+### 绝对定位脱标
+- 绝对定位的盒子脱离了标准文档流 所以，所有的标准文档流的性质，绝对定位之后都不遵守了
+- 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了
+
+### 绝对定位的参考点
+- 如果用top描述，那么参考点就是页面的左上角
+- 如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸
+
+
+## 以盒子为参考点
+- 一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素
+- 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
+- 不一定是相对定位，任何定位，都可以作为儿子的参考点
+- 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途
+
+### 作业代码和效果图
+![效果图](./imgs/image.png)
+```html
+<style>
+        *{
+            margin: 0 ;
+        }
+        .box{
+            width: 308px;
+            height: 307px;
+            border: 1px solid coral;
+            position: relative;
+            margin-top: 15px;
+        }
+        .image img{
+            width: 308px;
+            height: 196px;
+        }
+        .dtc{
+            background: url(./20231010221623.png) no-repeat -108px 0;
+	        width: 52px;
+	        height: 28px;
+            position: absolute;
+            top: -9px;
+            left: 13px;
+        }
+        .box h4{
+            background-color: black;
+            width: 308px;
+            height: 40px;
+            color: white;
+            line-height: 40px;
+            position: absolute;
+            top: 156px;
+            font-family: "宋体";
+        }
+        .p1{
+            margin-top: 15px;
+
+        }
+        .p2{
+            font-size: 20px;
+            color: chocolate;
+            margin-top: 5px;
+        }
+        .p3{
+            color: gray;
+            text-decoration: line-through;
+            margin-top: 2px;
+            float: left;
+        }
+        .p4{
+            float: right;
+            color: red;
+        }
+        .p5{
+            float: right;
+            color: gray;
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\347\277\201\344\277\241\346\240\213/20241021-\345\233\272\345\256\232\345\215\225\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\347\277\201\344\277\241\346\240\213/20241021-\345\233\272\345\256\232\345\215\225\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f8303068e1bfd0edfeb77613fe78ca5f7466ff51
--- /dev/null
+++ "b/\347\277\201\344\277\241\346\240\213/20241021-\345\233\272\345\256\232\345\215\225\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,37 @@
+## 固定定位
+
+**固定定位**：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
+
+备注：IE6不兼容。
+
+**用途1**：网页右下角的“返回到顶部”
+**用途2：**顶部导航条
+
+我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
+
+需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
+### 属性选择器
+
+属性选择器的标志性符号是 `[]`。
+
+匹配含义：
+
+```
+^：开头  $：结尾  *：包含
+```
+
+格式：
+
+- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
+
+- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。
+
+- `E[attr~=val]`  选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
+
+- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
+
+- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
+
+- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
+
+- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
diff --git "a/\347\277\201\344\277\241\346\240\213/imgs/background.jpg" "b/\347\277\201\344\277\241\346\240\213/imgs/background.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b9132dd1427b9d97cb269cf0b54f68f781b79345
Binary files /dev/null and "b/\347\277\201\344\277\241\346\240\213/imgs/background.jpg" differ
diff --git "a/\347\277\201\344\277\241\346\240\213/imgs/image.png" "b/\347\277\201\344\277\241\346\240\213/imgs/image.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ee7958af74391be6b7e688dcbd4e1bb3540b74e6
Binary files /dev/null and "b/\347\277\201\344\277\241\346\240\213/imgs/image.png" differ
diff --git "a/\347\277\201\344\277\241\346\240\213/imgs/img1.jpg" "b/\347\277\201\344\277\241\346\240\213/imgs/img1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..75a2a210b885176d43e16fd709174e3b2c8ff9ad
Binary files /dev/null and "b/\347\277\201\344\277\241\346\240\213/imgs/img1.jpg" differ
diff --git "a/\347\277\201\344\277\241\346\240\213/imgs/img2.jpg" "b/\347\277\201\344\277\241\346\240\213/imgs/img2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a5014ee7ebf982f9ab12b1deef7535aab3a0bb93
Binary files /dev/null and "b/\347\277\201\344\277\241\346\240\213/imgs/img2.jpg" differ