diff --git "a/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ad469c73dee826a9f16cc15caf1c55ed296e7744
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240904\344\275\234\344\270\232\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md"
@@ -0,0 +1,67 @@
+在HTML中，你可以使用`<hr>`标签来创建水平线。要更改水平线的颜色、宽度以及将文字居中，通常需要结合CSS（层叠样式表）来实现。下面是如何操作的详细说明：
+
+### 更改水平线颜色
+
+要更改水平线的颜色，你需要使用CSS的`border-color`属性。你可以直接在`<hr>`标签内使用`style`属性来指定颜色，或者通过外部或内部样式表来定义。
+
+**内联样式示例：**
+```html
+<hr style="border-color: red;">
+```
+
+**外部或内部样式表示例：**
+```css
+hr {
+    border-color: blue;
+}
+```
+
+### 更改水平线宽度
+
+水平线的宽度可以通过CSS的`width`属性来设置。同样，你可以使用内联样式或样式表来实现。
+
+**内联样式示例：**
+```html
+<hr style="width: 50%;">
+```
+
+**外部或内部样式表示例：**
+```css
+hr {
+    width: 80%;
+}
+```
+
+### 文字居中方式
+
+在HTML中，居中文字通常是指在某个容器内居中显示文字，比如`<div>`、`<p>`等标签内的文本。以下是几种常见的居中方式：
+
+1. **水平居中文本：**
+   - 使用`text-align: center;`在块级元素内居中文本。
+   ```css
+   .center-text {
+       text-align: center;
+   }
+   ```
+   然后在HTML中使用这个类：
+   ```html
+   <div class="center-text">这段文本将会居中显示。</div>
+   ```
+
+2. **水平居中块级元素：**
+   - 通过设置`margin`属性为`0 auto`，可以实现块级元素的水平居中。
+   ```css
+   .center-block {
+       width: 50%; /* 或者其他宽度 */
+       margin: 0 auto;
+   }
+   ```
+   ```html
+   <div class="center-block">这个块级元素将会居中显示。</div>
+   ```
+
+3. **垂直居中（需要额外的CSS技巧）：**
+   - 对于单行文本，可以使用`line-height`属性与容器高度相同来实现垂直居中。
+   - 对于多行文本或复杂布局，可能需要使用Flexbox或Grid布局技术。
+
+以上是基本的水平线样式更改和文字居中方法。根据你的具体需求，可能需要调整或结合使用不同的CSS属性和选择器。
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..311ab129f764b10fc0d34247dc36a3776ef4ebbe
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240904\347\254\224\350\256\260\357\274\210\345\261\205\344\270\255\357\274\214\346\260\264\345\271\263\357\274\211.md"
@@ -0,0 +1,26 @@
+
+## markdown语法普及
+1. #：一级标签
+2. ##：二级标签
+3. 英文的!【】（路径）：显示图片
+4. 英文的【】（网址）：显示超链接
+5. *单星号*：斜体
+6. **双星号**：粗体
+7. ***三星号***：粗斜体
+8. 大于号：引用
+
+>你好啊！
+
+9. 反引号:代码标签 `h1`
+10. 三反引号：多行代码标签
+11. 三反引号＋js：多行代码高亮
+12. 1.＋空格：有序列表
+13. 加号 星号 减号：无序列表
+14. 表格
+
+| 左对齐 | 居中  | 右对齐 |
+| :- | :-: | -: |
+| 单元格1 | 单元格2 | 单元格3 |
+| 单元格4 | 单元格5 | 单元格6 |
+
+
diff --git "a/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..952f3805700a38f996ec07b9c42a73ecfbb55972
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240909\344\275\234\344\270\232\357\274\210\350\257\255\346\263\225\357\274\211.md"
@@ -0,0 +1,10 @@
+# 浏览器引擎
+| 浏览器 | 渲染引擎 |
+| :-:|:-:|
+| IE浏览器 | Trident |
+| 世界之窗 | Trident |
+| Opera | Blink |
+| Safar | webkit |
+| Firefox火狐浏览器| Gecko |
+| Opera（7.0 - 9.60 版本） | Presto |
+| Google Chrome | Blink |
diff --git "a/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..84c9b3dce6aebc83e7c2a4434535368973b0ac4d
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240909\347\254\224\350\256\260\357\274\210\350\257\255\346\263\225\357\274\211.md"
@@ -0,0 +1,45 @@
+@
+        * Web前端
+            * HTML：超文本标记语言。从语义的角度描述页面的结构
+            * css：层叠样式表。从审美的角度美化页面的样式。
+            * JS：从交互的角度描述页面的行为
+    * 浏览器
+        * 是网页运行的平台
+        * 常见的浏览器
+            * 谷歌 Chrome
+            * Safari
+            * 火狐（Firefox）
+            * IE
+            * Edge
+            * Opera
+        * 组成
+            * 渲染引擎（`浏览器内核`）
+                * 决定了浏览器如何显示网页的内容以及页面的格式信息
+                * `渲染引擎是浏览器兼容性问题出现的根本原因`
+                * 作用：读取网页内容，计算网页的显示方式并显示在页面上
+            * JS引擎
+                * 用来解析网页中的JavaScript代码，对其处理后再运行
+    * HTML
+        * 专有名词
+            * 网页 ：由各种标记组成的一个页面就叫网页。
+            * 主页(首页) : 一个网站的起始页面或者导航页面。
+            * 标记： 也叫标签。每个标签都规定好了特殊的含义。如<p>称为开始标记 ，</p>称为结束标记，
+            * 元素：比如<p>内容</p>称为元素，也叫dom元素，也叫节点.
+            * 属性：给每一个标签所做的辅助信息。
+            * XHTML：符合XML语法标准的HTML。
+            * DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
+            * HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。
+        * 页面骨架
+            * <!DOCTYPE html>
+            * <html lang="en">
+            * <head>
+            *     <meta charset="UTF-8">
+            *     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            *     <title>Document</title>
+            * </head>
+            * <body>
+            * </body>
+            * </html>
+
+
+@endmindmap
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea0c7fe9c6081a79e6e4e6333dfc153846543f07
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240911\347\254\224\350\256\260\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.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/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aa1c3dd4783f921118ac6628401ced0b9ba1faa6
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240913\347\254\224\350\256\260\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211.md"
@@ -0,0 +1,93 @@
+
+字体标签： `<font>`、 `<b>`、 `<u>` 、`<sup>` 、`<sub>`
+
+超链接 `<a>`
+
+## 字体标签
+
+### 特殊字符（转义字符）
+
+- `&nbsp;`：空格	（non-breaking spacing，不断打空格）
+- `&lt;`：小于号`<`（less than）
+-  `&gt;`：大于号`>`（greater than）
+- `&amp;`：符号`&`
+- `&quot;`：双引号
+- `&apos;`：单引号
+- `&copy;`：版权`©`
+- `&trade;`：商标`™`
+-  `&#32464;`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
+
+
+| 特殊字符 | 描述 |字符的代码 |
+|:-------------|:-------------|:-----|
+||空格符|`&nbsp;`|
+|<|小于号|`&lt;`|
+|> |大于号|`&gt;`|
+|&|和号|`&amp;`|
+|￥|人民币|`&yen;`|
+|©|版权|`&copy;`|
+|®|注册商标|`&reg;`|
+|°|摄氏度|`&deg;`|
+|±|正负号|`&plusmn;`|
+|×|乘号|`&times;`|
+|÷|除号|`&divide;`|
+|²|平方2（上标2）|`&sup2;`|
+|³|立方3（上标3）|`&sup3;`|
+
+### 下划线、中划线、斜体
+
+- `<u>`：下划线标记
+
+- `<s>`或`<del>`：中划线标记（删除线）
+
+- `<i>`或`<em>`：斜体标记
+
+
+
+### 字体标签`<font>`
+
+属性：
+
+- `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`：设置字体颜色。
+	设置方式：单词 \  #ff00cc \   rgb(0,0,255)
+
+- `size`：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
+
+- `face="微软雅黑"`：设置字体类型。
+
+
+
+### 上标`<sup>`   下标`<sub>`
+
+上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
+举例：
+```html
+O<sup>2</sup>    5<sub>3</sub>
+```
+
+### 锚链接
+
+**锚链接**：给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
+
+首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
+
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_18.png)
+
+
+
+
+### 超链接的属性
+
+- `href`：目标URL
+- `title`：悬停文本。
+- `name`：主要用于设置一个锚点的名称。
+- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
+	- `_self`：在同一个网页中显示（默认值）
+	- `_blank`：**在新的窗口中打开**。
+	- `_parent`：在父窗口中显示
+	- `_top`：在顶级窗口中显示
+
+
+
+
+
diff --git "a/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..672965914f7768a1e944d4b59d4435de204bd395
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240914\347\254\224\350\256\260\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.md"
@@ -0,0 +1,102 @@
+# 标签
+- 列表标签：`<ul>`、`<ol>`、`<dl>`
+- 表格标签：`<table>`
+- 框架标签及内嵌框架`<iframe>`
+- 表单标签：`<form>`
+- 多媒体标签
+- 滚动字幕标签：`<marquee>`
+
+## 列表标签
+列表标签分为三种。
+### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
+
+<ul>
+	<li>1</li>
+	<li>2</li>
+	<li>3</li>
+</ul>
+
+注意：
+
+- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
+- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
+
+属性：
+
+ - `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
+
+### 2、有序列表`<ol>`，里面的每一项是`<li>`
+
+<ol >
+	<li>1</li>
+	<li>2</li>
+	<li>3</li>
+</ol>
+属性：
+ `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
+ol和ul就是语义不一样，怎么使用都是一样的。
+ol里面只能有li，li必须被ol包裹。li是容器级。
+
+### 3、定义列表`<dl>`
+
+> 定义列表的作用非常大。
+
+ `<dt>`：definition title 列表的标题，这个标签是必须的
+`<dd>`：definition description 列表的列表项，如果不需要它，可以不加
+
+## 表格标签
+表格标签用`<table>`表示。
+一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
+所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
+在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
+
+`<table>`的属性：
+ - `border`：边框。像素为单位。
+ - `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
+ - `width`：宽度。像素为单位。
+ - `height`：高度。像素为单位。
+ - `bordercolor`：表格的边框颜色。
+ - `align`：**表格**的水平对齐方式。属性值可以填：left right center。
+注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签`<td>`进行设置）
+ - `cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
+注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。
+ - `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
+ - `bgcolor="#99cc66"`：表格的背景颜色。
+ - `background="路径src/..."`：背景图片。
+背景图片的优先级大于背景颜色。
+ - `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
+ - `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
+单元格带边框：
+style="border-collapse:collapse;"
+
+### `<tr>`：行
+一个表格就是一行一行组成的。
+
+属性：
+
+ - `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
+ 	- `ltr`：从左到右（left to right，默认）
+	- `rtl`：从右到左（right to left）
+ - `bgcolor`：设置这一行的单元格的背景色。
+
+### `<td>`：单元格
+属性：
+
+ - `align`：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
+ - `valign`：内容的纵向对齐方式。属性值可以填：top middle bottom
+ - `width`：绝对值或者相对值(%)
+ - `height`：单元格的高度
+ - `bgcolor`：设置这个单元格的背景色。
+ - `background`：设置这个单元格的背景图片。
+
+### 单元格的合并
+单元格的属性：
+
+- `colspan`：横向合并。
+- `rowspan`：纵向合并。
+
+### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
+属性同`<td>`标签。
+
+### `<caption>`：表格的标题。使用时和`tr`标签并列
+属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240918\347\254\224\350\256\260\357\274\210\350\241\250\345\215\225\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240918\347\254\224\350\256\260\357\274\210\350\241\250\345\215\225\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..08ad9ab22fc8a0a3e540447c45402ac28a725eda
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240918\347\254\224\350\256\260\357\274\210\350\241\250\345\215\225\357\274\211.md"
@@ -0,0 +1,106 @@
+## 表单标签
+表单标签用`<form>`表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
+**属性：**
+ - `name`：表单的名称，用于JS来操作或控制表单时使用；
+ - `id`：表单的名称，用于JS来操作或控制表单时使用；
+ - `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
+ - `method`：表单数据的提交方式，一般取值：get(默认)和post
+
+### `<input>`
+用于接收用户输入
+
+```html
+<input type="text" />
+```
+
+**属性：**
+
+- **`type="属性值"`**：文本类型。属性值可以是：
+	- `text`（默认）
+	- `password`：密码类型
+	- `radio`：单选按钮
+	- `checkbox`：多选按钮
+	- `checked`：将单选按钮或多选按钮默认处于选中状态
+	- `hidden`：隐藏框
+	- `button`：普通按钮
+	- `submit`：提交按钮
+	- `reset`：重置按钮
+	- `image`：图片按钮
+	- `file`：文件选择框
+
+
+ - **`value="内容"`**：文本框里的默认内容
+
+ - `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
+注意**size属性值的单位不是像素哦**。
+
+ - `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
+用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
+
+ - `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
+	**四种按钮**：
+
+		1."button" "普通按钮"
+		2."submit" "提交按钮"
+		3."reset"  "重置按钮"
+		4."image"  "图片按钮1"
+	
+### `<select>`下拉列表标签
+`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
+select标签和ul、ol、dl一样，都是组标签。
+
+**`<select>`标签的属性：**
+- `multiple`：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
+- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
+
+**`<option>`标签的属性：**
+ - `selected`：预选中。没有属性值。
+
+### `<textarea>`标签：多行文本输入框
+text 就是“文本”，area 就是“区域”。
+**属性：**
+
+ - `rows="4"`：指定文本区域的行数。
+ - `cols="20"`：指定文本区域的列数。
+ - `readonly`：只读。
+
+## 多媒体标签
+
+多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
+.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
+
+### `<bgsound>`标签：播放背景音乐
+**属性：**
+ - `src="音乐文件的路径"`
+ - `loop="-1"`：属性值代表播放次数，-1代表循环播放。
+
+### `<embed>`标签：播放多媒体文件（音频、视频等）
+主要应用Netscape浏览器，它不是W3C规范。
+
+**属性：**
+ - `src="多媒体文件的路径"`
+ - `loop="-1"`：属性值代表播放次数，-1代表循环播放。
+ - `autostart="false"`：打开网页时，禁止自动播放。默认值是true。
+ - `volume="100"`：设置默认的音量大小，测试发现这个值好像不起作用哦。
+ - width：指Flash文件的宽度
+ - height：指Flash文件的高度
+ - quality：指Flash的播放质量，质量有高有低 hight  low
+ - pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
+ - type：指定Flash的文件格式类型
+ - wmode：指Flash的背景是否可以透明，取值：transparent是透明的
+
+### `<object>`标签：播放多媒体文件（音频、视频等）
+主要应用IE浏览器，它是W3C规范。
+
+**属性：**
+ - `classid`：指定Flash插件的ID号，一般存在于注册表中。
+ - `codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
+ - `<param>`标签的主要作用：设置具体的详细参数。
+
+## `<marquee>`：滚动字幕标签
+**属性：**
+ - `direction="right"`：移动的目标方向。属性值可以是：`left`、`right`、`up`、`down`
+ - `behavior="slide"`：行为方式。属性值可以是：`slide`（只移动一次）、`scroll`（循环移动，默认值）、`alternate`（循环移动）、
+ - `scrollamount="30"`：移动的速度
+ - `loop="3"`: 循环多少圈。负值表示无限循环
+ - `scrolldelay="1000"`：移动一次休息多长时间。单位是毫秒。
diff --git "a/\346\226\271\345\256\207\350\210\252/20240920\347\254\224\350\256\260\357\274\210HTML\350\257\246\350\247\243\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240920\347\254\224\350\256\260\357\274\210HTML\350\257\246\350\247\243\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..928e7dfd877199729b5467d3dd35219c1655af81
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240920\347\254\224\350\256\260\357\274\210HTML\350\257\246\350\247\243\357\274\211.md"
@@ -0,0 +1,161 @@
+### HTML5
+HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
+
+HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
+
+## 语义化的作用
+
+## H5中新增的语义标签
+
+- `<section>` 表示区块
+
+- `<article>` 表示文章。如文章、评论、帖子、博客
+
+- `<header>` 表示页眉
+
+- `<footer>` 表示页脚
+
+- `<nav>` 表示导航
+
+- `<aside>` 表示侧边栏。如文章的侧栏
+
+- `<figure>` 表示媒介内容分组。
+
+- `<mark>` 表示标记 (用得少)
+
+- `<progress>` 表示进度 (用得少)
+
+- `<time>` 表示日期
+
+## H5中的表单
+传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
+
+### H5中新增的表单类型
+
+- `email` 只能输入email格式。自动带有验证功能。
+
+- `tel` 手机号码。
+
+- `url` 只能输入url格式。
+
+- `number` 只能输入数字。
+
+- `search` 搜索框
+
+- `range` 滑动条
+
+- `color` 拾色器
+
+- `time` 时间
+
+- `date` 日期
+
+- `datetime` 时间日期
+
+- `month` 月份
+
+- `week` 星期
+
+`<keygen>`元素：
+keygen 元素的作用是提供一种验证用户的可靠方法。
+
+`<meter>`元素：度量器
+
+- low：低于该值后警告
+
+- high：高于该值后警告
+
+- value：当前值
+
+- max：最大值
+
+- min：最小值。
+
+### 表单属性
+- `placeholder` 占位符（提示文字）
+
+- `autofocus` 自动获取焦点
+
+- `multiple` 文件上传多选或多个邮箱地址
+
+- `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
+
+- `form` 指定表单项属于哪个form，处理复杂表单时会需要
+
+- `novalidate` 关闭默认的验证功能（只能加给form）
+
+- `required` 表示必填项
+
+- `pattern` 自定义正则，验证表单。例如
+
+### 视频
+HTML5通过`<video>`标签来解决视频播放的问题。
+
+- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
+
+- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
+
+- `loop` 循环播放。
+
+- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
+
+- `width`：设置播放窗口宽度。
+
+- `height`：设置播放窗口的高度。
+
+``` html
+<style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
+        .bg-image {
+            background-image: url(./R-C.jpg); 
+            background-size: cover;
+            background-position: center;
+            height: 100%;
+            display: flex;
+            align-items: center; 
+            justify-content: center; 
+        }
+        form {
+            background: rgba(255, 255, 255, 0.8); 
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+
+
+    </style>
+
+``` 
+![20240922132014](http://sjsgkykxm.hn-bkt.clouddn.com/20240922132014.png)
+
+
+
+
+```html
+<style>
+#yu {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+#yu span {
+  display: inline-block;
+  padding-left: 100%;
+  animation: yu 10s linear infinite;
+  
+}
+
+@keyframes yu {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+</style>
+```
+![20240922-0531-39.1765800](http://sjsgkykxm.hn-bkt.clouddn.com/20240922-0531-39.1765800.mp4)
diff --git "a/\346\226\271\345\256\207\350\210\252/20240923\347\254\224\350\256\260\357\274\210\346\213\226\346\213\275\345\222\214css\346\226\207\346\234\254\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240923\347\254\224\350\256\260\357\274\210\346\213\226\346\213\275\345\222\214css\346\226\207\346\234\254\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2137b74ce0b37caeaa1d39cdbf63b7a46aec7b8e
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240923\347\254\224\350\256\260\357\274\210\346\213\226\346\213\275\345\222\214css\346\226\207\346\234\254\357\274\211.md"
@@ -0,0 +1,108 @@
+## 拖拽
+在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
+
+### 1、拖拽元素
+
+页面中设置了 `draggable="true"` 属性的元素
+
+举例如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <style>
+    .box1{
+        width: 200px;
+        height: 200px;
+        background-color: green;
+
+    }
+    </style>
+</head>
+<body>
+    <!--给 box1 增加拖拽的属性-->
+    <div class="box1" draggable="true"></div>
+</body>
+</html>
+```
+
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+
+
+### 2、目标元素
+
+比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。
+
+页面中任何一个元素都可以成为目标元素。
+
+**目标元素的事件监听**：（应用于目标元素）
+
+- `ondragenter`	当拖拽元素进入时调用
+
+- `ondragover`	当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
+- `ondrop`		当在目标元素上松开鼠标时调用
+
+- `ondragleave`	当鼠标离开目标元素时调用
+
+## CSS的单位
+
+html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
+<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
+
+### 绝对单位
+
+1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
+
+各种单位的含义：
+
+- `in`：英寸Inches (1 英寸 = 2.54 厘米)
+- `cm`：厘米Centimeters
+- `mm`：毫米Millimeters
+- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+- `pc`：皮卡Picas (1 皮卡 = 12 点)
+
+### 相对单位
+
+`px`：像素
+`em`：印刷单位相当于12个点
+`%`：百分比，相对周围的文字的大小
+
+## font 字体属性
+
+CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
+
+### 字体加粗属性
+
+在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
+
+## 文本属性
+
+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`（每个单词的首字母大写）
+
+## overflow属性：超出范围的内容要怎么处理
+
+`overflow`属性的属性值可以是：
+- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
+- `hidden`：不显示超过对象尺寸的内容。
+- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
+ - `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240925\347\254\224\350\256\260  (CSS).md" "b/\346\226\271\345\256\207\350\210\252/20240925\347\254\224\350\256\260  (CSS).md"
new file mode 100644
index 0000000000000000000000000000000000000000..824bdb79a26c6d5cbeec3e0f6cad91bcc97cd488
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240925\347\254\224\350\256\260  (CSS).md"	
@@ -0,0 +1,104 @@
+## CSS
+### 绝对单位
+
+- `in`：英寸Inches (1 英寸 = 2.54 厘米)
+- `cm`：厘米Centimeters
+- `mm`：毫米Millimeters
+- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+- `pc`：皮卡Picas (1 皮卡 = 12 点)
+
+### 相对单位
+
+`px`：像素
+`em`：印刷单位相当于12个点
+`%`：百分比，相对周围的文字的大小
+
+## font 字体属性
+
+CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
+
+### 行高
+
+CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
+
+### `vertical-align: middle;` 属性
+
+`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+
+
+### 字号、行高、字体三大属性
+
+（1）字号：
+
+```
+	font-size:14px;
+```
+
+（2）行高：
+
+```
+	line-height:24px;
+```
+
+（3）字体：(font-family)
+
+```
+	font-family:"宋体";
+```
+### 字体加粗属性
+
+```css
+.div {
+	font-weight: normal; 
+	font-weight: bold;  
+	font-weight: 100;
+	font-weight: 200;
+	font-weight: 900;
+}
+
+```
+### 常用CSS3属性及其描述的表格：
+
+| CSS属性 | 描述 |
+|---------|------|
+| background-color | 设置元素的背景颜色。 |
+| background-image | 设置元素的背景图像。 |
+| background-repeat | 设置背景图像是否重复及如何重复。 |
+| background-attachment | 设置背景图像是否固定或者随着页面滚动。 |
+| background-position | 设置背景图像的起始位置。 |
+| border | 简写属性，用于设置边框的宽度、样式和颜色。 |
+| border-color | 设置边框的颜色。 |
+| border-width | 设置边框的宽度。 |
+| border-style | 设置边框的样式。 |
+| margin | 简写属性，用于设置元素的所有外边距。 |
+| padding | 简写属性，用于设置元素的所有内边距。 |
+| width | 设置元素的宽度。 |
+| height | 设置元素的高度。 |
+| max-width | 设置元素的最大宽度。 |
+| max-height | 设置元素的最大高度。 |
+| min-width | 设置元素的最小宽度。 |
+| min-height | 设置元素的最小高度。 |
+| font-family | 设置元素字体。 |
+| font-size | 设置字体的大小。 |
+| font-weight | 设置字体的粗细。 |
+| color | 设置文本颜色。 |
+| text-align | 设置文本的水平对齐方式。 |
+| text-decoration | 设置文本的装饰，如下划线、删除线等。 |
+| line-height | 设置文本行高。 |
+| letter-spacing | 设置字符间距。 |
+| word-spacing | 设置单词间距。 |
+| text-indent | 设置文本块中首行的缩进。 |
+| text-shadow | 设置文本的阴影效果。 |
+| box-shadow | 设置元素的阴影效果。 |
+| opacity | 设置元素的透明度。 |
+| cursor | 设置鼠标悬停在元素上时显示的光标样式。 |
+| display | 设置元素的显示类型。 |
+| list-style-type | 设置列表项标记的类型。 |
+| float | 设置元素的浮动方向。 |
+| clear | 指定元素的哪一侧不允许其他浮动元素。 |
+| vertical-align | 设置元素的垂直对齐方式。 |
+| text-transform | 控制文本的大小写。 |
+| border-radius | 设置元素边框的圆角。 |
+| box-sizing | 设置如何计算元素的宽度和高度。 |
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240929\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240929\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2bf592840c21718837861d56da4a741162a05d26
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240929\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\357\274\211.md"
@@ -0,0 +1,188 @@
+# 基础联系
+_**(1).请为一个名为.box的类设置背景颜色为深蓝色**_
+
+[背景颜色](http://sjsk76tyi.hn-bkt.clouddn.com/%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2.PNG)
+- 主要代码
+```html
+<style>
+    .box {
+     background-color: darkblue;}
+</style>
+      <body>
+        <div class="box">这是一个深蓝色背景的盒子</div>
+      </body>
+```
+_**(2).给定一个名为.image-background的类，请设置其背景图片为url('background.jpg')**_
+[背景图片](http://sjsk76tyi.hn-bkt.clouddn.com/0929-2.PNG)
+- 主要代码
+```css
+.image-background {
+          background-image: url('http://sjsk76tyi.hn-bkt.clouddn.com/2.jpg');
+          background-repeat: no-repeat;
+          height: 500px;
+        }
+```
+_**(3).请为一个名为.header的类设置背景图片，并将其定位到元素的右下角**_
+[背景尺寸](http://sjsk76tyi.hn-bkt.clouddn.com/0929-3.PNG)
+- 主要代码
+```css
+.header {
+          background-image: url('http://sjsk76tyi.hn-bkt.clouddn.com/2.jpg');
+          background-repeat: no-repeat;
+          height: 5000px;
+          background-position: right bottom;
+        }
+```
+_**(4).请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复**_
+[背景重复](http://sjsk76tyi.hn-bkt.clouddn.com/0929-4.PNG)
+- 主要代码
+```css
+.pattern {
+          background-image: url('http://sjsk76tyi.hn-bkt.clouddn.com/2.jpg');
+          height: 1000px; ;
+          background-repeat: repeat-y;
+        }
+```
+# 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;
+```
+以后，我们可以用小属性层叠掉大属性。
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20240930\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\350\241\245\345\205\205\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20240930\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\350\241\245\345\205\205\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bc424c21b0a2440b592c189d20eff643570752d3
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20240930\347\254\224\350\256\260\357\274\210\350\203\214\346\231\257\345\261\236\346\200\247\350\241\245\345\205\205\357\274\211.md"
@@ -0,0 +1,200 @@
+- (1).滚动视差效果初探
+
+![效果图](http://sjsk76tyi.hn-bkt.clouddn.com/GIF%202024-09-30%2011-10-45.gif)
+
+***主要代码***
+```html
+<style>
+* {
+      margin: 0px;
+      padding: 0px;
+  }
+
+div {
+      height: 100vh;
+      background: rgba(26, 1, 2, 0.7);
+      color: #f80808;
+      line-height: 100vh; 
+      text-align: center;
+      font-size: 2000px;
+  }
+
+  .img{
+      background-attachment: fixed;
+      background-size: cover;
+      background-position: center center;
+  } 
+
+  #img1 {
+      background-image: url(https://oss.9ihub.com/test/20240929172229.png);
+
+  }
+
+  #img2 {
+      background-image: url(https://oss.9ihub.com/test/20240929172249.png);
+
+  }
+
+  #img3 {
+      background-image: url(https://oss.9ihub.com/test/20240929172304.png);
+
+  }
+  </style>
+  <body>
+    <div class="txt1">头部</div>
+    <div class="img" id="img1"></div>
+    <div class="txt1">内容</div>
+    <div class="img" id="img2"></div>
+    <div class="txt1">底部</div>
+    <div class="img" id="img3"></div>
+</body>
+```
+- (2).线性渐变专项练习
+![效果图](http://sjsk76tyi.hn-bkt.clouddn.com/10-30%20.png)
+
+***主要代码***
+```css
+ div{
+        
+        height: 100px;
+        width: 500px;
+        background-image: linear-gradient(60deg,yellow 0%,blue 40%,red 70% ,green 100%);
+    }
+```
+
+# background 背景属性补充
+**CSS3** 中，新增了一些background属性：
+- background-origin
+- background-size 调整尺寸
+- background-clip 背景裁切
+- 多重背景
+- 渐变：background-image
+
+## 背景原点：`background-origin` 属性
+`background-origin` 属性：控制背景从什么地方开始显示
+
+例：
+```css
+
+	/* 从 padding-box 内边距开始显示背景图 */
+	background-origin: padding-box; 
+
+	/* 从 border-box 边框开始显示背景图  */
+	background-origin: border-box;
+
+	/* 从 content-box 内容区域开始显示背景图  */
+	background-origin: content-box;
+
+```
+## `background-size`属性：背景尺寸
+
+`background-size`属性：设置背景图片的尺寸。
+
+ ### `cover`属性 
+
+- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。
+
+### `contain` 属性
+
+- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。
+
+在上方代码的基础之上，再加一个 `background-position: center`属性之后，图片就会在容器里**居中显示**：
+
+
+## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
+
+例：
+
+`background-clip: content-box;`   超出的部分，将裁剪掉。属性值可以是：
+
+ - `border-box` 超出 border-box 的部分，将裁剪掉
+
+ - `padding-box` 超出 padding-box 的部分，将裁剪掉
+
+ - `content-box` 超出 content-box 的部分，将裁剪掉
+
+## 多个背景
+
+我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
+
+代码举例：
+
+```html
+    <style>
+        .box {
+            height: 416px;
+            border: 1px solid #000;
+            margin: 100px auto;
+            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
+            background: url(images/bg1.png) no-repeat left top,
+            url(images/bg2.png) no-repeat right top,
+            url(images/bg3.png) no-repeat right bottom,
+            url(images/bg4.png) no-repeat left bottom,
+            url(images/bg5.png) no-repeat center;
+        }
+    </style>
+<body>
+<div class="box"></div>
+</body>
+```
+
+
+## 渐变：background-image
+渐变分为：
+- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
+- 重复渐变。
+
+### 线性渐变
+
+格式：
+
+```javascript
+
+    background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+    background-image: linear-gradient(to right, yellow, green);
+```
+
+参数解释：
+
+- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
+
+格式举例：
+
+```css
+        /* 不写方向，表示默认的方向是：从上往下 */
+        div{
+            background-image: linear-gradient(yellow, green);
+        }
+
+        /* 方向可以指定角度 */
+        div{
+            width: 100px;
+            height: 100px;
+            background-image: linear-gradient(135deg, yellow, green);
+        }
+
+        /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
+        div {
+            background-image: linear-gradient(to right,
+            yellow 0%,
+            red 40%,
+            green 70%,
+            blue 100%);
+
+        }
+        /* 颜色之间，出现突变 */
+        div {
+            background-image: linear-gradient(45deg,
+            yellow 0%,
+            yellow 25%,
+            blue 25%,
+            blue 50%,
+            red 50%,
+            red 75%,
+            green 75%,
+            green 100%
+            );
+        }
+```
diff --git "a/\346\226\271\345\256\207\350\210\252/20241009\347\254\224\350\256\260  (CSS\346\240\267\345\274\217\350\241\250\357\274\214\351\200\211\346\213\251\345\231\250).md" "b/\346\226\271\345\256\207\350\210\252/20241009\347\254\224\350\256\260  (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..e88cab8553985d462a1c02a7bfd3c205556c5c50
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20241009\347\254\224\350\256\260  (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,167 @@
+## 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
+<style>
+        .kz{
+            width: 700px;
+            height: 500px;
+            background-color: white;
+            background-image: linear-gradient(
+            90deg,
+            rgba(255, 0, 0, 0.5) 50%,
+            transparent 50%),
+            linear-gradient(
+            rgba(255, 0, 0, 0.5) 50%,
+            transparent 50%);
+            background-size: 30px 30px; 
+        } 
+    </style>
+```
+
+![20241010200437](http://sjsgkykxm.hn-bkt.clouddn.com/20241010200437.png)
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/20241011\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\211.md" "b/\346\226\271\345\256\207\350\210\252/20241011\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4d93c28914c3bc8a7a07254cdac6b5cabb5413d1
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/20241011\347\254\224\350\256\260\357\274\210\344\274\252\347\261\273\357\274\211.md"
@@ -0,0 +1,80 @@
+## CSS 的几种高级选择器
+
+**高级选择器：**
+
+-   后代选择器：用空格隔开
+-   交集选择器：选择器之间紧密相连
+-   并集选择器（分组选择器）：用逗号隔开
+-   伪类选择器
+
+### 浏览器的兼容性问题
+
+> 我们可以用`IETester`这个软件测一下 CSS 在各个版本 IE 浏览器上的显示效果。
+
+IE： 微软的浏览器，随着操作系统安装的。所以每个 windows 都有 IE 浏览器。各版本如下：
+
+-   windows xp 操作系统安装的 IE6
+-   windows vista 操作系统安装的 IE7
+-   windows 7 操作系统安装的 IE8
+-   windows 8 操作系统安装的 IE9
+-   windows10 操作系统安装的 edge
+
+浏览器兼容问题，要出，就基本上就是出在 IE6、7 身上，这两个浏览器是非常低级的浏览器。
+
+## 伪类（伪类选择器）
+
+
+**伪类**：同一个标签，根据其**不同的种状态，有不同的样式**。这就叫做“伪类”。伪类用冒号来表示。
+
+### 静态伪类选择器、动态伪类选择器
+
+伪类选择器分为两种。
+
+（1）**静态伪类**：只能用于**超链接**的样式。
+
+- `:link` 超链接点击之前
+- `:visited` 链接被访问过之后
+
+PS：以上两种样式，只能用于超链接。
+
+（2）**动态伪类**：针对**所有标签**都适用的样式。
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
+
+
+## 超链接a标签
+
+### 超链接的四种状态
+
+
+a标签有4种伪类（即对应四种状态），要求背诵。如下：
+
+- `:link`  	“链接”：超链接点击之前
+- `:visited` “访问过的”：链接被访问过之后
+- `:hover`	“悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+
+记住，在css中，这四种状态**必须按照固定的顺序写**：
+
+> a:link 、a:visited 、a:hover 、a:active
+
+### 超链接的美化
+
+**`a{}`和`a:link{}`的区别：**
+
+ - `a{}`定义的样式针对所有的超链接(包括锚点)
+ - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
+
+超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
+
+一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
+
+> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。
+
+## 动态伪类举例
+
+- `:hover` “悬停”：鼠标放到标签上的时候
+- `:active`	“激活”： 鼠标点击标签，但是不松手时。
+- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
diff --git "a/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..12e57cf9a968b1fa0111c18fbe780e3e5656a12c
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240911\344\275\234\344\270\232\357\274\210HTML\350\247\204\350\214\203\357\274\214\346\216\222\347\211\210\357\274\211.html"
@@ -0,0 +1,26 @@
+<!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>
+    
+        
+   .center {
+        width: 50%;
+        margin: 0 auto;
+   }
+    
+</style>
+</head>
+
+
+
+<body>
+
+    
+    <center>这是居中的文字</center>
+    <hr color="yellew" size="18px";>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html" "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html"
new file mode 100644
index 0000000000000000000000000000000000000000..eac974fa9299921dea23bac6d760bf9b4eb71e0e
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/20240913.html"
@@ -0,0 +1,27 @@
+<!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>
+        img {
+            display: block; 
+          margin:  auto; 
+            width: 500px;
+         top:0;
+         bottom: 0;
+         left: 0;
+         right: 0;
+         position: absolute;
+         height: 500px;
+
+        
+}
+        </style>
+</head>
+<body>
+    <img src="./ecde9cdc8289416298d0a500928ee224.jpeg" alt="描述性文字">
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg" "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..2354b6b00e6b2c24b8f31376dd66c635163a723a
Binary files /dev/null and "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240913\344\275\234\344\270\232\357\274\210\345\210\227\350\241\250\357\274\214\346\240\207\347\255\276\357\274\211/ecde9cdc8289416298d0a500928ee224.jpeg" differ
diff --git "a/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb717eff5b6ca40507d547d98b8bd5e097043a8
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240914\344\275\234\344\270\232\357\274\210\345\233\276\347\211\207\357\274\214\350\266\205\351\223\276\346\216\245\357\274\211.html"
@@ -0,0 +1,88 @@
+<!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: 0;
+        }
+        header {
+            background-color: #333;
+            color: white;
+            padding: 10px 0;
+            text-align: center;
+        }
+        .logo {
+            font-size: 5em;
+            margin: 0;
+        }
+        .nb {
+            list-style: none;
+            padding: 0;
+        }
+        .nb li {
+            display: inline;
+            margin-right: 20px;
+        }
+        .nb a {
+            color: white;
+            text-decoration: none;
+            
+        }
+        .nb svg{
+
+            color: rgb(0, 0, 0);
+            text-decoration: none;
+        }
+</style>
+
+
+</head>
+<body>
+
+
+<header>
+
+
+    <ul class="nb">
+        <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><a href="#">iPhone</a></li>
+        <li><a href="#">Mac</a></li>
+        <li><a href="#">iPad</a></li>
+        <li><a href="#">Watch</a></li>
+        <li><a href="#">TV</a></li>
+        <li><a href="#">Music</a></li>
+        <li><a href="#">vision</a></li>
+        <li><a href="#">Airpods</a></li>
+        <li><a href="#">家居</a></li>
+        <li><a href="#">娱乐</a></li>
+        <li><a href="#">配件</a></li>
+        <li><a href="#">技术支持</a></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>
+
+
+</header>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html" "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a47b1e634e208d284fc43d01f705ef622ab8e57c
--- /dev/null
+++ "b/\346\226\271\345\256\207\350\210\252/\344\271\213\345\211\215\347\232\204HTML\344\275\234\344\270\232/20240918\344\275\234\344\270\232\357\274\210\346\214\211\351\222\256\357\274\214\346\202\254\345\201\234\357\274\211.html"
@@ -0,0 +1,108 @@
+<!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>
+      
+th, td {
+            border: 1px solid #ddd; /* 单元格边框 */
+            padding: 8px;
+            text-align: center;
+        }
+
+.table{
+    width: 100%;
+    border-collapse: collapse;
+border-collapse: white;
+
+}
+table:hover {
+             background-color: #0591ee; 
+         }
+
+th:hover{
+
+background-color: #fa0606;
+
+}
+td:hover{
+
+    background-color: aquamarine;
+}
+
+
+.primary{
+    background-color: #003cff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    transition: background-color 0.3s;
+    
+}
+.danger{
+
+
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    transition: background-color 0.3s;
+    border-style:dotted
+}
+.yu{
+    border-style:dashed;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    transition: background-color 0.3s;
+    border-style:dotted
+}
+
+
+</style>
+
+</head>
+<body>
+    <table>
+        <tr>
+            <th>姓名</th>
+            <th>年龄</th>
+            <th>城市</th>
+        </tr>
+        <tr>
+            <td>张三</td>
+            <td>28</td>
+            <td>北京</td>
+        </tr>
+        <tr>
+            <td>李四</td>
+            <td>30</td>
+            <td>南京</td>
+            
+        </tr>
+        <tr>
+            <td>赵五</td>
+            <td>36</td>
+            <td>天津</td>
+            
+
+
+        </tr>
+        <tr>
+            <td>老六</td>
+            <td>27</td>
+            <td>长安</td>
+            
+        </tr>
+</table>
+
+        <button class="primary">Primary</button>
+        <button class="danger">Danger</button>
+        <button class="yu">Primary</button>
+
+</body>
+</html>
\ No newline at end of file