diff --git "a/\350\256\270\350\211\263/20240918\347\254\224\350\256\2606--form\350\241\250\345\215\225+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20240918\347\254\224\350\256\2606--form\350\241\250\345\215\225+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a28af07291080fa60bbb3f37c4f4f19294e90aab
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240918\347\254\224\350\256\2606--form\350\241\250\345\215\225+\344\275\234\344\270\232.md"
@@ -0,0 +1,70 @@
+# 表单标签
+## 属性：
+1. name/id：表单的名称；
+2. action：处理程序，一般是PHP；
+3. method：提交方式：get（默认）和post
+    + get:不安全，只适合提交少量的信息
+    + post：将数据直接发送到action指定的处理程序；可以提交大量信息且相对安全
+## `<input>`：输入标签（文本框）
+### type='属性值'：文本类型，属性值可以有
+1. text：文本类型
+2. password：密码类型
+3. radio：单选按钮，必须有相同的name属性
+4. checkbox：多选按钮，name属性值也要相同；checked：默认选中
+5. hidden：隐藏框，不被用户看见
+6. button：普通按钮
+7. submit：提交按钮，不需要写value自动有提交文字
+8. reset：重置按钮
+9. image：图片按钮
+10. file：文本选择框
+## textarea：文本域
+1. row：行数；cols：列数；readonly：只读
+## `<select>`：下拉选择框
+1. `<select>`标签里面的每一项用`<option>`表示
+2. 属性：`multiple`：可以对下拉列表中的选项进行多选
+## `<lable>`标签：为控件设置文字；其for值设置为目标标签的id
+# 作业
+## 表格里样式
+1. [效果展示](
+http://sjt8tyrv9.hn-bkt.clouddn.com/20240918202507.png)
+2. 部分代码
+```html
+    <style>
+        /* 单边框，单线，无间隔 */
+        table,tr,td{
+            border: 1px solid;
+            width: 500px;
+            border-collapse: collapse;
+            height: 50px;
+        }
+        tr:hover{
+            background-color: red;
+        }
+        td:hover{
+            color: blue;
+        }
+    </style>
+    <table>
+        <tr>
+            <td>姓名</td>
+            <td>年龄</td>
+            <td>班级</td>
+        </tr>
+        <tr>
+            <td>张三</td>
+            <td>18</td>
+            <td>1班</td>
+        </tr>
+    </table>
+```
+## 按键样式
+1.  [效果展示点击](http://sjt8tyrv9.hn-bkt.clouddn.com/20240918202303.png)
+2. 部分代码
+```html
+ <form action="">
+            <!-- 按钮样式 -->
+            <input type="button" value="提交" style="background-color: aqua;color: aliceblue;border-radius: 5px;border-color: aliceblue;width: 75px;">
+            <input type="reset" value="重置" style="color: aqua;border-style: none;">
+            <input type="button" value="注册" style="border: 1px dashed red;color: red;">
+        </form>
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20240920\347\254\224\350\256\2607--HTML\347\232\204\344\273\213\347\273\215&\350\241\250\345\215\225\345\205\203\347\264\240.md" "b/\350\256\270\350\211\263/20240920\347\254\224\350\256\2607--HTML\347\232\204\344\273\213\347\273\215&\350\241\250\345\215\225\345\205\203\347\264\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..322afeced9e34c2629aec170864c355b15c500a2
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240920\347\254\224\350\256\2607--HTML\347\232\204\344\273\213\347\273\215&\350\241\250\345\215\225\345\205\203\347\264\240.md"
@@ -0,0 +1,95 @@
+# HTML5的介绍
+# 语义化标签
+## 作用
+1. 更好地搜索引擎；方便解析；简便代码
+## 改进
+1. 头部：`<header></header>`;
+2. 底部：`<footer></footer>`;
+## 新增语义
+1. `<section>` 表示区块
+2. `<nav>` 表示导航
+3. `<figure>` 表示媒介内容分组。
+4. `<aside>` 表示侧边栏。如文章的侧栏
+### 兼容性问题的处理
+# 新增的表单
+## 新增的表单类型，具有一定的兼容性
+1. `search` 搜索框
+2. `range` 滑动条
+## 表单元素
+1. `<datalist>`：数据列表，进行绑定，在框内选择输入目标文字可进行筛选
+2. `<keygen>`元素：验证用户
+3. `<meter>`元素：度量器；可设置最大/小值；有最高/最低限制
+## 表单属性：
+1. `placeholder` 占位符（提示文字）
+2. `autofocus` 自动获取焦点
+3. `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。
+# 多媒体
+## 音频：`<audio>`
+1. `autoplay` 自动播放；由于安全问题大多不支持
+2. `controls` 控制条
+3. `loop` 循环播放
+## 视频：`<video>`
+1. `autoplay` 自动播放；由于安全问题大多不支持
+2. `controls` 控制条
+3. `loop` 循环播放
+4. 可设置宽高
+# DOM操作
+# 作业
+## 登录页面
+1. ![登录页面](http://sjt8tyrv9.hn-bkt.clouddn.com/20240922211749.png)
+2. 部分代码
+```html
+        a{
+            list-style: none;
+            color: hotpink;
+        }
+        ul li{
+            /* 无序列符号 */
+            list-style:none;
+            margin-top: 20px;
+        }
+        /* 通配符 */
+        *{
+            padding: auto;
+            margin: 0 auto;
+        }
+        body{
+            display: block;
+            text-align: center;
+            width: 900px;
+            background-color: rgb(206, 153, 153);
+        }
+        #login{
+            margin-top: 100px;
+            background-color: pink;
+            width: 400px;
+            height: 230px;
+            /* 设置边框阴影 */
+            box-shadow: 0 0 20px rgba(0, 0, 0, 3);
+            /* 设置边框圆弧形 */
+            border-radius:7px;
+            text-align: center;
+        }
+        .button1{
+            width: 90px;
+        }
+```
+## 跑马灯效果图
+1. ![跑马灯 2024-09-22 213239](http://sjt8tyrv9.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6%202024-09-22%20213239.mp4)
+2. 部分代码
+```html
+.one{
+animation: one 20s linear infinite;    
+}
+@keyframes one{
+0%{
+    transform: translateX(100%);
+}
+100%{
+    transform: translateX(-100%);
+}
+}
+    <div class="one">
+        <p>我要吃米饭要吃必胜客要吃螺蛳粉要吃火鸡面</p>
+        </div>
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20240923\347\254\224\350\256\2608--HTML\350\257\246\350\247\243&css\345\255\227\344\275\223\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\350\256\270\350\211\263/20240923\347\254\224\350\256\2608--HTML\350\257\246\350\247\243&css\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..c46fcba378e3d8e42a5d1e7d218d67b8bc8f5021
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240923\347\254\224\350\256\2608--HTML\350\257\246\350\247\243&css\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,76 @@
+# HTML详解
+## 拖拽
+1. 拖拽元素：`draggable="true"` 属性；给需要的元素设置属性
+2. 拖拽元素的事件监听
+    - `ondragstart`：当拖拽开始时调用
+
+    - `ondragleave`：当**鼠标离开拖拽元素时**调用
+
+    - `ondragend`：当拖拽结束时调用
+
+    - `ondrag`：整个拖拽过程都会调用
+3. 目标元素：想把元素A拖拽到元素B里，那么元素B就是目标元素
+4. 目标元素的事件监听
+    - `ondragenter`	当拖拽元素进入时调用
+
+    - `ondragover`	当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
+    - `ondrop`：当在目标元素上松开鼠标时调用
+
+    - `ondragleave`	当鼠标离开目标元素时调用
+ ## 地理定位
+ 1. IP地址
+ 2. 三维坐标
+ 3. 用户自定义数据
+## 全屏
+### 开启/关闭全屏显示
+```javascript
+	requestFullscreen()   //让元素开启全屏显示
+
+	cancleFullscreen()    //让元素关闭全屏显示
+```
+### 检测当前是否处于全屏：`document.fullScreen`
+### 全屏的伪类
+## web存储
+
+# CSS字体和文本属性
+## CSS单位
+1. 单位是必须要写的，没有默认单位；HTML单位可以省略
+### 绝对单位
+1. `in`:英寸
+2. `cm`：厘米
+3. `mm`：毫米
+4. `pt`：点
+5. `pc`：皮卡
+### 相对单位
+1. `px`：像素
+2. `em`：印刷单位相当于12个点
+3. `%`：百分比
+## font字体属性
+### 行高
+padding作用在“行”上的
+### 文本垂直居中
+需要计算padding值再设置行高
+### `vertical-align: middle;` 属性
+`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+### 三大属性
+1. 字号：
+```html
+font-size:值
+```
+2. 行高：
+```
+	line-height:值;
+```
+3. 字体：
+```
+	font-family:"样式";
+```
+4. 可以连写
+```
+	font: 加粗 字号/行高/ 字体
+```
+## 文本属性
+1. `text-decoration: none;` 字体修饰：none 去掉下划线
+2. text-align: center;` 在当前容器中的对齐方式
+## 列表属性：list-style
diff --git "a/\350\256\270\350\211\263/20240924\347\254\224\350\256\2609--\346\226\207\346\234\254\345\261\236\346\200\247+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20240924\347\254\224\350\256\2609--\346\226\207\346\234\254\345\261\236\346\200\247+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d61f3bff4cd366b1b11adec7f4722318be99b197
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240924\347\254\224\350\256\2609--\346\226\207\346\234\254\345\261\236\346\200\247+\344\275\234\344\270\232.md"
@@ -0,0 +1,97 @@
+## 文本垂直居中
+1. 设置`行高=盒子高`，保证单行文本垂直居中
+2. 需要计算padding值再设置行高，实现多行文本垂直居中
+## `vertical-align: middle;` 属性
+1. `vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+## 三大属性
+1. 字号：
+```html
+font-size:值
+```
+2. 行高：
+```
+	line-height:值;
+```
+3. 字体：
+```
+	font-family:"样式";
+```
+4. 可以连写：至少要有字号和字体，否则不生效
+```
+	font: 加粗 字号/行高/ 字体
+```
+5. 例如
+```html
+font: 400 14px/24px/ "宋体"
+```
+## 字体加粗属性
+1. `font-weight`:可填写 normal(正常的)、bold(加粗)、或者直接填写100-900的数字
+## 文本属性
+1. `text-decoration: none:` 字体修饰：none 去掉下划线、underline下划线、line-through中划线、overline上划线
+2. `text-align: center:` 在当前容器中的对齐方式，有left、right、center、justify(两端对齐)
+3. `letter-spacing:0.5cm` 单个字母之间的间距
+4. `color:字体颜色`
+5. `text-transform：` 单词的字体大小写，有：uppercase(大写)、lowercase(小写)、capitalize(每个单词首字母大写)
+6. `direction:` 文本方向：ltr、rtl
+7. `lettrt-spacing:` 增加或减少字符间距：normal length
+8. `text-indent：` 缩进文本的首行：length %
+# 作业
+## 十二：文本样式综合设计
+1. ![高亮显示](http://sjt8tyrv9.hn-bkt.clouddn.com/%E9%AB%98%E4%BA%AE%E6%98%BE%E7%A4%BA.mp4)
+2. 部分代码
+```css
+        /* 元素文本颜色为金色，背景颜色为黑色，文本为大写，并且首行缩进 20px。 */
+    .highlight{
+        color: burlywood;
+        background-color: black;
+        text-transform: uppercase;
+        text-indent: 20%;
+    }
+    /* 使得悬停时文本颜色变为白色，背景颜色为深灰色。 */
+    .highlight:hover{
+        color: aliceblue;
+        background-color: rgb(79, 76, 73);
+    }
+```
+## 十三：文本排版设计
+1.![效果图展示](http://sjt8tyrv9.hn-bkt.clouddn.com/%E5%8D%81%E4%BA%8C%E9%A6%96%E5%AD%97%E6%AF%8D%E5%A4%A7%E5%86%99.png)
+2. 部分代码
+```css
+        /* 元素文本颜色为深灰色，字体大小为 16px，行高为 1.5，首行缩进为 1em。 */
+        .article p {
+            color: rgb(84, 82, 82);
+            font-size: 16px;
+            line-height: 1.5;
+            text-indent: 1em;
+        }
+        /* 设置该元素的 :first-letter 伪元素，使得首字母字体大小为 24px，字体加粗。 */
+        .article p::first-letter{
+            text-transform: uppercase;
+            font-size: 24px;
+            font-weight: bold;
+        }
+
+		    <article class="article">
+        <p>自古逢秋悲寂寥</p>
+        <p>我言秋日胜春朝</p>
+    </article>
+```
+## 十四：文本对齐和装饰
+1. ![对齐和装饰](http://sjt8tyrv9.hn-bkt.clouddn.com/%E8%A3%85%E9%A5%B0.png)
+2. 部分代码：
+```css
+        /* 使得应用该类的元素文本对齐方式为两端对齐，文本颜色为深蓝色，并且每个单词的首字母大写 */
+        .poem{
+            text-align: justify;
+            color: blue;
+            text-transform: uppercase;
+        }
+        .poem::first-line{
+            color: brown;
+        }
+		    <div class="poem">
+        十年一瞬如沧海，
+        <br>
+        谁人还逝藏海花。
+    </div>
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20240929\347\254\224\350\256\26010--\346\226\207\346\234\254\345\261\236\346\200\247&\350\203\214\346\231\257\345\261\236\346\200\247+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20240929\347\254\224\350\256\26010--\346\226\207\346\234\254\345\261\236\346\200\247&\350\203\214\346\231\257\345\261\236\346\200\247+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..09e53bb51d5776dd158aa86e472a34bcc62e5527
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240929\347\254\224\350\256\26010--\346\226\207\346\234\254\345\261\236\346\200\247&\350\203\214\346\231\257\345\261\236\346\200\247+\344\275\234\344\270\232.md"
@@ -0,0 +1,162 @@
+# 文本属性
+## overflow属性：超出范围的内容要怎么处理
+1. `visible`:默认值；会全部显示
+2. `hidden`：不显示超过对象尺寸的内容；只能看见尺寸内的内容 
+3. `auto`：如果内容不超出，则不显示滚动条；如果超出则显示
+4. `scroll`：无论内容是否超出，都显示滚动条
+## 鼠标属性：cursor
+1. `auto`:默认值
+2. `pointer`：竖起一只手指的手形光标
+3. `hand`：竖起一只手指的手形光标
+## 滤镜 filter:颜色()
+1. 在img标签内写样式：`style="filter:颜色()"`
+# 背景属性
+## 常见的背景属性
+## background-color：背景颜色的表示方式
+### 英语单词表示
+```html
+background-color:red;
+```
+### RGB表示法
+1. RGB表示三原色：“红、绿、蓝”
+2. 
+```html
+<!-- 红色 -->
+background-color:rgb(255,0,0)
+<!-- 黑色 -->
+ background-color：rgb(0,0,0)
+```
+### 调制背景渐变
+```html
+background: linear-gradient(to right, blue, red);
+<!-- 调制方向和颜色 -->
+```
+### RGBA表示法
+1. RGBA：red红、green绿、blue蓝、alpha透明度
+2. 透明度的取值范围是0~1
+### 十六进制表示法
+1. 以#开头的色值都是16进制
+2. 十六进制可以简化为3位，所有#aabbcc的形式能够简化为#abc
+### HSLA表示法
+1. 
+```html
+background-color：hsla()
+```
+2.
+    + H：色调，取值范围：0~360
+    + S：饱和度，取值范围：0%~100%；值越大越鲜艳
+    + L：亮度，取值范围：0%~100%；亮度最大时为白色，最小为黑色
+    + A:透明度，取值范围：0~1
+### 设置透明度
+1. opacity：0.3：会将整个盒子设置透明度，也会影响子盒子
+2. background：transparent：单独设置透明度，设置的是完全透明
+## background-repeat属性：设置背景图片的重复，默认为铺满
+1. `no-repeat`：不要平铺
+2. `repeat-x`:横向平铺
+3. `repeat-y`：纵向平铺
+## background-position：背景定位
+1. 属性值可为正，也可为负
+```html
+background-position：横向(水平) 纵向(垂直)
+```
+2. 水平：left、center、right；垂直：top、center、bottom
+## background-attachment属性：设置背景图片是否固定
+1. fixed：背景图片固定住，不会被滚动条滚走
+2. scroll：默认属性，会被滚走
+## background综合属性：可将多个属性写在一起
+# 作业
+## 基础练习
+1. ![基础练习](http://sjt8tyrv9.hn-bkt.clouddn.com/20240929-1.mp4)
+2. 部分代码
+```css
+ div{
+            width: auto;
+            height: 1500px;
+            /* margin: 20px; */
+        }
+        .box{
+            background-color: blue;
+            width: 100px;
+            height: 100px;
+        }
+        .image-background{
+            background-image: url(../作业3图片1.jpg);
+            background-repeat: no-repeat;
+        }
+        .cover-image{
+            background-image: url(../作业3图片2.jpg);
+        }
+        .pattern{
+            background-image: url(../作业3图片1.jpg);
+            background-repeat: repeat-y;
+        }
+                /* 请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。 */
+        .header{
+            background-image: url(./懒羊羊头像.jpg);
+            background-position: right bottom;
+            background-repeat: no-repeat;
+            /* 调制图片大小 */
+            background-size:contain;
+        }
+```
+## 进阶练习
+### 多重背景
+1. ![多重背景](http://sjt8tyrv9.hn-bkt.clouddn.com/20240929211835.png)
+2. 部分代码
+```css
+    .multi-background{
+        width: 800px;
+        height: 600px;
+        background-image: url(./one.png),url(./曾wan之.jpg);
+        background-repeat: no-repeat;
+    }
+```
+### 背景渐变
+1. ![背景渐变](sjt8tyrv9.hn-bkt.clouddn.com/20240929213038.png)
+2. 部分代码
+```css
+.gradient-box{
+        background: linear-gradient(to right, blue, red);
+```
+### 背景裁剪
+1. ![背景裁剪](sjt8tyrv9.hn-bkt.clouddn.com/20240929214526.png)
+2. 部分代码
+```css
+    .cropped-background{
+        width: 200px;
+        height: 300px;
+        background-image: url(./two.png);
+        background-repeat: no-repeat;
+        background-position:center center;
+        background-size: contain;
+        border: 1px solid;
+    }
+```
+### 背景缩放
+1. ![背景缩放](sjt8tyrv9.hn-bkt.clouddn.com/20240929215426.png)
+2. 部分代码
+```css
+    .responsive-background{
+        background: url(./one.png) no-repeat;
+        width: 600px;
+        height: 600px;
+        background-size: contain;
+        border: 1px solid;
+    }
+```
+### 确保在底部
+1. ![滚动在底部](sjt8tyrv9.hn-bkt.clouddn.com/屏幕录制 2024-09-29 220149.mp4)
+2. 部分代码
+```css
+    .sticky-footer{
+        background: url(../作业3图片1.jpg) no-repeat;
+        background-size: contain;
+        background-position: center;
+        position: fixed; /* 固定位置 */
+        bottom: 0; /* 定位到页面底部 */
+        left: 0; /* 定位到页面左侧 */
+        width: 100%; /* 宽度为100%，覆盖整个屏幕 */
+        height: 300px; /* 设置一个固定的高度，根据需要调整 */
+         z-index: -1; /* 确保背景在内容之下 */
+    }
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20240930\347\254\224\350\256\26011--\350\203\214\346\231\257\345\261\236\346\200\247&\347\272\277\346\235\241\346\270\220\345\217\230+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20240930\347\254\224\350\256\26011--\350\203\214\346\231\257\345\261\236\346\200\247&\347\272\277\346\235\241\346\270\220\345\217\230+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fd25c60878c18624d0c137b6c000377080b7d8fe
--- /dev/null
+++ "b/\350\256\270\350\211\263/20240930\347\254\224\350\256\26011--\350\203\214\346\231\257\345\261\236\346\200\247&\347\272\277\346\235\241\346\270\220\345\217\230+\344\275\234\344\270\232.md"
@@ -0,0 +1,101 @@
+# background-attachment:背景图片是否固定
+## `fixed`：背景图片被固定，不会滚走
+## `scroll`：默认属性，会滚走
+# background:综合属性；
+## 语法：`background:color url repeat position attachment`
+1. 可用小属性覆盖大属性
+2. 可任意省略其中一部分
+# background-size：背景图片尺寸，以宽为标准
+1. 
+```html
+ <!-- 可设置具体的宽高 -->
+  background-size:200px 200px
+  <!-- 宽高的百分比，相当于容器的大小，如果两个属性相同可简写为一个 -->
+  background-size：50% 25%
+```
+2. `cover`:图片始终填充满容器且长宽比不变，超出部分被隐藏
+3. `contain`：将图片完整地显示在容器中，长宽比不变，可能会导致容器的部分区域留白
+4. `center`:使图片居中显示
+# background-origin：背景原点，控制背景从什么地方开始显示
+```html
+<!-- 内边距 ,默认值-->
+ background-origin：padding-box;    
+ <!-- 边框开始 -->
+ background-origin：border-box;
+ <!-- 中心区域 -->
+ background-origin：content-box；
+```
+# background-clip：设置元素的背景图片或颜色是否延伸到边框下面
+# background-image：渐变
+## 线性渐变：沿着直线朝一个方向产生渐变效果
+1. `background-lmage:linear-gradient(方向，起始颜色，终止颜色)`
+2. 方向：to left...，(从右到左)；
+3. 角度：deg(实现倾斜，指定角度)；默认为上到下
+4. 实现颜色突变：在目标位置写上前一个颜色，再写后一个颜色
+```css
+.d2{
+  background-image: linear-gradient(to right,black 0%,black 25%,white 25%,white 50%,black 50%,black 75%,white 75%, white 100%);
+  }
+```
+# 作业
+## 二十、滚动视差
+1. ![屏幕录制 2024-10-08 192346](sjt8tyrv9.hn-bkt.clouddn.com/屏幕录制 2024-10-08 192346.mp4)
+2. 核心代码
+```css
+  * {
+      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: url(https://oss.9ihub.com/test/20240929172229.png) no-repeat;
+    /* 背景图片固定 */
+    background-attachment: fixed;
+    /* 图片居中 */
+    background-position: center;
+  }
+  .img2{
+    background: url(https://oss.9ihub.com/test/20240929172249.png) no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+  }
+  .img3{
+    background: url(https://oss.9ihub.com/test/20240929172304.png) no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+  }
+```
+## 二十一、线条渐变
+1. ![20241008192218](sjt8tyrv9.hn-bkt.clouddn.com/20241008192218.png)
+2. 核心代码
+```css
+    div{
+        width: 500px;
+        height: 200px;
+        border: 1px solid;
+        margin: 20px;
+    }
+    /* 倾斜 */
+    .d1{
+        background-image: linear-gradient(65deg,yellow 0%,yellow 25%,blue 25%,blue 50%,red 50%,red 75%,green 75%,green 100% );
+    }
+    .d2{
+        background-image: linear-gradient(to right,black 0%,black 25%,white 25%,white 50%,black 50%,black 75%,white 75%, white 100%);
+    }
+    .d3{
+    font-size: 70px;
+    text-align: center;
+    padding-top: 65px;
+    background-clip: text;
+    color: transparent;
+    background-image: linear-gradient(78deg,yellow 0%,yellow 25%,blue 25%,blue 75%,red 75%, red 100%);
+}
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241009\347\254\224\350\256\26012--\345\276\204\345\220\221\346\270\220\345\217\230&\351\200\211\346\213\251\345\231\250+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20241009\347\254\224\350\256\26012--\345\276\204\345\220\221\346\270\220\345\217\230&\351\200\211\346\213\251\345\231\250+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cd24aa3d5fd288757353972d4f4d3baf25f17e06
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241009\347\254\224\350\256\26012--\345\276\204\345\220\221\346\270\220\345\217\230&\351\200\211\346\213\251\345\231\250+\344\275\234\344\270\232.md"
@@ -0,0 +1,157 @@
+# 径向渐变
+1. 样式：`background-image:radial-gradient(半径大小,中心位置,起始颜色,终止颜色)`
+```css
+background-image:radial-gradient(100px,at center,yellow,blue)
+```
+## clip-path：裁剪出元素的部分区域做展示
+# CSS的书写方式
+1. 行内样式：在特定的标签里采用style属性
+2. 内嵌样式：在页面的head标签里采用style标签
+3. 外链样式：引用外部样式表css文件，有两种
+    + 采用`<link>`标签
+    + 采用`<import>`标签，必须写在style标签中
+# 四种基本选择器
+## 标签选择器：选择器的名字代表HTML页面上的标签
+```css
+P{
+font-size:14px;
+/* p标签内的字体大小 */
+}
+```
+## ID选择器：用#来定义
+### 取名规范
+1. 只能有字母、数字、下划线
+2. 必须以字母开头
+3. 不能和标签同名
+4. 不能出现相同的ID
+## 类选择器：用 . 来定义
+### class属性的特点：
+1. 优点：灵活
+2. 任何标签都可以携带id属性和class属性
+3. 同一个标签可以使用多个类选择器，用空格隔开
+## 通配符：*；匹配任何标签
+1. 效率不高，页面上不能出现这个选择器
+# 高级选择器
+## 后代选择器：用空格隔开
+1. 
+```css
+div p{
+    color:red;
+}
+/* div内的所有后代p标签都变成红色字体 */
+```
+## 交集选择器：紧密相连
+1. 一般是以标签名开头
+```css
+div.one{
+color:red;
+}
+/* 后一个选择器是类选择器 */
+```
+## 并集选择器：用逗号隔开
+1. 
+```css
+p,h1,#one{
+    color：red;
+}
+/* 这些标签都会生效 */
+```
+## 伪类选择器
+# 作业
+## 线条网格
+1. ![20241011191204](sjt8tyrv9.hn-bkt.clouddn.com/20241011191204.png)
+2. 核心代码
+```css
+div{
+            width: 400px;
+            height: 400px;
+            border: 1px solid;
+        }
+        .d1{
+            background-image: repeating-linear-gradient(rgb(253, 141, 160,0.5) 0px,rgb(250, 176, 186,0.5) 25px,transparent 25px,transparent 50px),
+            repeating-linear-gradient(90deg,rgb(253, 141, 160,0.5) 0px,rgb(245, 158, 171,0.5) 25px,transparent 25px,transparent 50px);
+            /* background-image: repeating-linear-gradient(90deg,rgb(253, 141, 160) 0px,rgb(245, 158, 171) 25px,transparent 25px,transparent 50px); */
+        }
+```
+## 选择器练习
+1. 核心代码
+```css
+        /* 1选择所有的plate */
+        .table plate{
+            color: aqua;
+        }
+        /* 2选择所有的bento */
+        .table bento{
+            color: aquamarine;
+        }
+        /* 3选择id为fancy的plate */
+        #fancy plate{
+            color: bisque;
+        }
+        /* 4选择plate里面的apple */
+        .table plate apple{
+            color: brown;
+        }
+        /* 5选择id为fancy的plate中的pickle */
+        #fancy pickle{
+            color: blueviolet;
+        }
+        /* 6选择small的apple */
+        apple.small{
+            color: blue;
+        }
+        /* 7选择small的orange */
+        orange.small{
+            color: aliceblue;
+        }
+        /* 8选择bento中的small orange */
+        bento orange.small{
+            color: coral;
+        }
+        /* 9选择所有的plate和bento */
+        plate,bento{
+            color: crimson;
+        }
+        /* 10选择所有的物品 */
+        *{
+            font-size: 1px;
+        }
+        /* 11选择plate中的所有东西 */
+        plate * {
+            font-size: 2px;
+        }
+        /* 12选择plate的下一个apple */
+        plate apple{
+            font-size: 12px;
+        }
+        /* 13选择bento后面的所有pickle */
+        bento~pinkle{
+            font-size: 13px;
+        }
+        /* 14选择直接在plate中的apple */
+        plate apple{
+            font-size: 14px;
+        }
+        /* 15选择plate中的第一个orange */
+        plate orange:first-child{
+            font-size: 15px;
+        }
+        /* 16选择plate中的apple、pickle */
+        plate apple,plate pickle{
+            font-size: 16px;
+        }
+        /* 17选择small的apple、pickle */
+        small apple,small pickle{
+            font-size: 17px;
+        }
+        /* 18选择第3个plate */
+        plate:nth-child(3)
+        /* 19选择第一个bento */
+        beto:nth-of-type(1)
+        /* 20选择第一个apple */
+        apple:first-of-type
+        /* 21选择序号为偶数的plate */
+        plate:nth-of-type(2n)
+        /* 22选择从第3个plate(包括第3个)开始的每2个plate */
+        plate:nth-of-type(2n+3)
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241011\347\254\224\350\256\26013--\351\200\211\346\213\251\345\231\250&\344\274\252\347\261\273.md" "b/\350\256\270\350\211\263/20241011\347\254\224\350\256\26013--\351\200\211\346\213\251\345\231\250&\344\274\252\347\261\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b4dde0e3b37efebc9e4cb5d2bcfe2199b5cabfee
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241011\347\254\224\350\256\26013--\351\200\211\346\213\251\345\231\250&\344\274\252\347\261\273.md"
@@ -0,0 +1,38 @@
+# 选择器
+## 子代选择器：用 > 表示
+1. 
+```css
+div > p{
+    color:red;
+}
+/* 是指包含在div后的直系的，不能包含在别的属性标签内 */
+```
+## 序选择器
+1. 第一个：`:first-child`
+```css
+/* 设置无序列表<ul>中的第一个<li>为红色 */
+ul li:first-child{
+    color:red;
+}
+```
+2. 最后一个：`:last-child`
+## 下一个兄弟选择器：+
+1. 
+```css
+h3+p{
+    color:red;
+}
+/* 选择的是h3元素后面紧挨着的第一个兄弟标签p */
+```
+# 伪类
+## 静态伪类选择器，只用于超链接
+1. `:link`：超链接点击之前
+2. `:visited`：链接被访问过之后
+3. `:hover`:鼠标悬停
+4. `:active`激活
+## 必须按照固定顺序写
+1. "爱恨准则"：love hate(lvha)
+## 动态伪类，所有标签都可以
+1. `:hover`:鼠标悬停
+2. `:active`:激活（鼠标点击标签但不松手）
+3. `:focus`:焦点样式
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241012\347\254\224\350\256\26014--CSS\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20241012\347\254\224\350\256\26014--CSS\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0c602ce1d9a2710d7eb30fbb0d03c1d0b4f66811
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241012\347\254\224\350\256\26014--CSS\345\261\202\345\217\240\346\200\247\345\222\214\347\273\247\346\211\277\346\200\247+\344\275\234\344\270\232.md"
@@ -0,0 +1,68 @@
+# 继承性
+1. 有些属性只给自己设置了，但是后代也继承了，这个就是继承性
+2. 文字样式都具有继承性，但是盒子、布局都不继承
+# 层叠性
+## 优先级
+1. id选择器 > 类选择器 > 标签选择器
+2. 行级样式 > 内嵌样式 > 外部样式
+### 计算权重：CSS处理冲突的能力
+1. 统计各个选择器的数量，优先级高的胜出
+### 权重相同时
+1. 谁顺序靠后就采取，就近原则
+## 影响
+### 如果不能直接选中某个元素，通过继承的影响，权重为0
+## 层叠性有关的思维导图
+![20241013141110](sjt8tyrv9.hn-bkt.clouddn.com/20241013141110.png)
+# 作业
+## 二十二：选择器真实项目练习
+1. 效果预览
+![屏幕录制 2024-10-13 140713](sjt8tyrv9.hn-bkt.clouddn.com/屏幕录制 2024-10-13 140713.mp4)
+2. 核心代码
+```html
+<style>
+/* 1 .main类中的<section>和<article>元素中的所有<h1>和<h2>标签的字体变为粗体， 并且<aside>类中的<h3>标签的字体变为斜体 */
+    .main section h1,article h2{
+        font-weight: bold;
+    }
+    .main aside h3{
+        font-style: italic;
+    }
+/* 2 所有带有required属性的<input>元素在获得焦点时边框变为蓝色，并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色*/
+    input:required:focus{
+      /* 设置none是确保focus有用 */
+      outline: none;
+        border:1px solid blue;
+        
+    }
+    input:required ::placeholder{
+        color: rgb(190, 152, 106);
+    }
+    /* 3 导航栏中当前激活的链接（class="active"）的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色 */
+    a.active:hover{
+      background-color: dimgrey;
+      color: white;
+    }
+  /* 4 带有class="special-title"的<h2>标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。 */
+    .special-title::first-letter{
+      font-size: 24px;
+      float: left;
+      color: burlywood;
+      line-height: 2;
+    }
+    /* 5 .list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色 */
+      .list ul :first-child{
+        background-color: darkgray;
+      }
+      .list li:hover{
+        color: blue;
+      }
+      /* 6 .container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签<label>在悬停时背景色变为浅蓝色 */
+        .container input:focus{
+          outline: none;
+          border: 1px solid green;
+        }
+        .container label:hover{
+          background-color: aqua;
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241014\347\254\224\350\256\26015--\346\235\203\351\207\215\351\227\256\351\242\230&\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\350\256\270\350\211\263/20241014\347\254\224\350\256\26015--\346\235\203\351\207\215\351\227\256\351\242\230&\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8372161fc0d5d2a0e8e6f6a81229922eff94aa3a
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241014\347\254\224\350\256\26015--\346\235\203\351\207\215\351\227\256\351\242\230&\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,54 @@
+# 层叠性
+## 权重问题深入
+1. 对于同一个标签，如果用到了多个相同的内嵌样式表，优先级：谁描述的越近，就用谁
+2. 如果引用了多个相同的外部样式表，优先级：谁靠后就用谁
+## !important:优先级最高
+1. 语法
+```css
+font-size:24px !improtant;
+```
+2. 不能把其写在外面
+3. 提升的是一个属性，不是一个选择器
+4. 无法提升继承的权重，该0还是0(谁描述的近就选谁)
+## class和id的区别
+1. class页面上可以重复；id是唯一，不能重复
+2. 一个标签可以有多个class，用空格隔开
+# 盒子模型
+## 盒子区域
+1. width和height：内容的宽度、高度，不是盒子的宽度、高度
+2. padding：内边距
+3. border：边框
+4. margin：外边距
+## 标准盒子模型
+1. width和height指的是内容区域的宽度和高度
+## IE盒模型
+1. width和height指的是内容区域 + border + padding的宽度和高度
+### `<body>`标签也有margin
+## padding
+1. padding区域也有颜色
+2. padding有四个方向，可按照顺时针方向，用空格隔开
+    + 四个值顺序为：上右下左
+    + 三个值顺序为：上右、左下
+    + 两个值顺序为：上下、左右
+3. 可以用小属性层叠大属性
+## border
+### 一个border属性，是由三个小属性综合而成的，上右下左顺序
+1. width
+2. style：solid 实线、dashed 虚线、dotted 圆点
+3. color
+## border-image属性
+## 利用border属性展现一个三角形
+1. 
+2. 核心代码
+```css
+        div{
+            width: 0px;
+            height: 0px;
+            /* 设置颜色为透明色 */
+            border: 70px solid transparent;
+            /* 让三角形颜色为粉色 */
+            border-top-color: pink;
+            /* 去除底部 */
+            border-bottom: none;
+        }
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241016\347\254\224\350\256\26016--\346\265\256\345\212\250+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20241016\347\254\224\350\256\26016--\346\265\256\345\212\250+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..edbfd8881193594e4c5f10e47cc1feae6da3b50a
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241016\347\254\224\350\256\26016--\346\265\256\345\212\250+\344\275\234\344\270\232.md"
@@ -0,0 +1,177 @@
+# 标准文档流
+### 空白折叠现象：无论多少个空格、换行以及他爸、都会折叠为一个空格
+### 高矮不齐，底边对齐
+### 自动换行，一行写不满自动换行写
+### 行内元素
+1. 与其他行内元素并排；不能设置宽高
+2. 行内元素转换为块级元素：`display:block`
+### 块级元素
+1. 独自占一行，不能与其他元素并列
+2. 块级元素转换为行内元素：`display：inline`
+# 浮动
+### 浮动的元素脱离标准文档流
+### 浮动的元素互相贴靠
+### 浮动的元素有“字围”效果
+### 收缩：如果没有设置width，将自动收缩为内容的宽度
+### 如果子类比父类宽度要大，则会自动换到下行
+# 浮动的清除
+### 给浮动元素的祖先元素加高度，有高度的盒子才能关住浮动
+### clear:both;不允许左侧和右侧有浮动对象，但是存在的标签margin失效
+### 隔墙法
+### overflow:hidden;可撑出高度
+# 作业
+## 作业1
+1. ![20241016214934](sjt8tyrv9.hn-bkt.clouddn.com/20241016214934.png)
+2. 核心代码
+```html
+<style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        .container{
+            width: 970px;
+        }
+        .d1{
+            background-color:red;
+            width: 277px;
+            height: 103px;
+            float: left;
+        }
+        .d2{
+            width: 137px;
+            height: 49px;
+            float: right;
+            background-color: green;
+        }
+        .d3{
+            width: 679px;
+            height: 46px;
+            float: left;
+            background-color: green;
+            margin-top: 8px;
+            margin-left: 14px;
+            margin-bottom: 8px;
+        }
+        .d4{
+            width: 310px;
+            height: 435px;
+            margin-right: 10px;
+            background-color: yellow;
+            float: left;
+        }
+        .d5{
+            width: 190px;
+            height: 400px;
+            margin-left: 10px; 
+            float: right;
+            background-color: blueviolet;
+        }
+        .d6{
+            width:  450px;
+            height: 240px;
+            background-color: aqua;
+            float: left;
+            margin-bottom: 10px;
+        }
+        .d7{
+            width: 450px;
+            height: 110px;
+            background-color: aquamarine;
+            margin-bottom: 10px;
+            float: left;
+        }
+        .d8{
+            width: 450px;
+            height: 30px;
+            background-color: rgb(105, 255, 205);
+            float: left;
+        }
+        .d9{
+            width: 650px;
+            height: 25px;
+            background-color: blue;
+            float: right;
+            margin-top: 10px;
+        }
+        .d10{
+            background-color: chocolate;
+            width: 970px;
+            height: 30px;
+            margin-top: 10px;
+            float: left;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="d1"></div>
+        <div class="d2"></div>
+        <div class="d3"></div>
+        <div class="d4"></div>
+        <div class="d5"></div>
+        <div class="d6"></div>
+        <div class="d7"></div>
+        <div class="d8"></div>
+        <div class="d9"></div>
+        <div class="d10"></div>
+    </div>
+```
+## 作业2
+1. ![20241016215036](sjt8tyrv9.hn-bkt.clouddn.com/20241016215036.png)
+2. 核心代码
+```html
+    <style>
+        .one{
+            width: 300px;
+            height: 300px;
+            border-top: 2px dashed gray;
+        }
+        .head{
+            font-size: 24px;
+            color: rgb(80, 80, 215);
+            margin-top: 15px;
+            margin-left: 7px;
+        }
+        a{
+           text-decoration: none;
+           color: blueviolet;
+           float: right;
+           margin-top: 20px;
+        }
+        ul{
+            padding: 0px;
+            margin: 0px;
+        }
+        ul li {
+            list-style: none;
+            margin-bottom: 40px;
+            border-bottom: 3px dashed gray;
+            color: rgb(111, 111, 214);
+        }
+        img{
+            margin-left: 0px;
+        }
+        .txt-right{
+            float: right;
+        }
+        .line{
+            width: 300px;
+            height: 2px;
+            background-image: linear-gradient(to right, blue 50%, yellow 75%, red 100%);
+        }
+    </style>
+</head>
+<body>
+    <div class="one">
+        <span class="head">通知公告</span>
+        <a href="#">更多>></a>
+        <p class="line"></p>
+        <ul>
+        <li><img src="https://www.pku.edu.cn/Public/static/themes/image/png52.png" alt=""><span>今天天气晴</span> <span class="txt-right">2024年1月16日</span></li>
+        <li><img src="https://www.pku.edu.cn/Public/static/themes/image/png52.png" alt=""><span>今天一定要早睡</span> <span class="txt-right">2024年4月30日</span></li>
+        <li><img src="https://www.pku.edu.cn/Public/static/themes/image/png52.png" alt=""><span>不想有黑眼圈</span> <span class="txt-right">2024年10月16日</span></li>
+        </ul>
+    </div>
+</body>
+```
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241018\347\254\224\350\256\26017--\347\233\270\345\257\271\345\256\232\344\275\215&\347\273\235\345\257\271\345\256\232\344\275\215+\344\275\234\344\270\232.md" "b/\350\256\270\350\211\263/20241018\347\254\224\350\256\26017--\347\233\270\345\257\271\345\256\232\344\275\215&\347\273\235\345\257\271\345\256\232\344\275\215+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2291cec88b6e5ea708d2c53405824bcd5ffd2a44
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241018\347\254\224\350\256\26017--\347\233\270\345\257\271\345\256\232\344\275\215&\347\273\235\345\257\271\345\256\232\344\275\215+\344\275\234\344\270\232.md"
@@ -0,0 +1,210 @@
+# 相对定位：relative
+1. 让元素相对于自己原来的位置进行位置调整
+2. 别人不会把它的位置挤走
+## 作用
+1. 微调元素
+2. 做绝对定位的参考，`子绝父相`
+## 定位值
+1. left：盒子右移
+2. right：盒子左移
+3. top：盒子下移
+4. bottom：盒子上移
+5. 有负数，负数表示相反的方向
+# 绝对定位：absolute
+1. 定义横纵坐标，原点在父容器的左上角或者左下角
+## 绝对定位的盒子脱标
+## 参考点
+1. top：是页面的左上角，不是浏览器的左上角
+2. bottom：浏览器首屏窗口尺寸
+## 让绝对定位中的盒子在父类中居中：水平：margin：0 auto;
+# 作业
+## 作业1居中
+1. ![20241019234358](sjt8tyrv9.hn-bkt.clouddn.com/20241019234358.png)
+2. 核心代码
+```html
+ <style>
+        div{
+            border: 1px solid;
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+        }
+    </style>
+</head>
+<body>
+    <div>容器水平、垂直居中的绝对定位</div>
+</body>
+```
+## 作业2：固定不动导航栏
+1. ![20241019234550](sjt8tyrv9.hn-bkt.clouddn.com/20241019234550.png)
+2. 核心代码
+```html
+<style>
+        div{
+            width: 800px;
+            height: 1000px;
+        }
+        .d1{
+            position: relative;
+            width: 700px;
+            height: 58px;
+            background-color: gray;
+            border: 1px solid;
+
+        }
+        .two{
+            position: absolute;
+            width: 200px;
+            position: relative;
+            /* 文本在框架内 */
+            overflow-wrap: break-word;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1">固定不动的导航条</div>
+    <div class="two">7777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777</div>
+</html>
+```
+## 作业3：悬浮
+1. ![20241019234648](sjt8tyrv9.hn-bkt.clouddn.com/20241019234648.png)
+2. 核心代码
+```html
+    <style>
+    .p1{
+        position: relative;
+    }
+    .p2{
+        /* 隐藏 */
+        visibility: hidden;
+        width: 100px;
+        height: 20px;
+        background-color: gray;
+        border-radius: 5px;
+        text-align: center;
+        position: absolute;
+
+        z-index: 1;
+        opacity: 0;       
+    }
+    .p1:hover .p2{
+        visibility: visible;
+        opacity: 1;
+    }
+    </style>
+</head>
+<body>
+    <p class="p1">不想有黑眼圈<span class="p2">那就早点睡</span></p>
+</body>
+```
+## 作业4：六个图标
+1. ![20241019234753](sjt8tyrv9.hn-bkt.clouddn.com/20241019234753.png)
+2. 核心代码
+```html
+    <style>
+        div{
+            background: url(https://oss.9ihub.com/test/20231010113053.png) no-repeat;
+            
+        }
+        .d1{
+            width: 80px;
+            height: 80px;
+            /* position: absolute; */
+            background-position: 0px 0px;
+        }
+        .d2{
+            width: 80px;
+            height: 80px;
+            margin-top: 20px;  
+            background-position: -80px 0;
+        }
+        .d3{
+            width: 80px;
+            height: 80px;
+            margin-top: 20px;
+            background-position: -160px 0;
+        }
+        .d4{
+            width: 80px;
+            height: 80px;
+            margin-top: 20px;
+            background-position: 0 -80px;
+        }
+        .d5{
+            width: 80px;
+            height: 80px;
+            margin-top: 20px;
+            background-position: -80px -80px;
+        }
+        .d6{
+            width: 80px;
+            height: 80px;
+            margin-top: 20px;
+            background-position: -160px -80px;
+        }
+        span{
+            margin-left: 80px;
+            float: left;
+        }
+    </style>
+</head>
+<body>
+        <div class="d1"><span>付款图标</span></div>       
+        <div class="d2"><span>存款图标</span></div>
+        <div class="d3"><span>笑脸图标</span></div>
+        <div class="d4"><span>删除图标</span></div>
+        <div class="d5"><span>粘贴图标</span></div>
+        <div class="d6"><span>编辑图标</span></div>
+</body>
+```
+## 作业5：电影图示
+1. ![20241019234849](sjt8tyrv9.hn-bkt.clouddn.com/20241019234849.png)
+2. 核心代码
+```html
+<style>
+        .container{
+            width: 320px;
+            height: 360px;
+            border: 1px solid red;
+            position: relative;
+        }
+        .more{
+            width: 290px;
+            height: 30px;
+            position: absolute;
+            background: url(https://oss.9ihub.com/test/20231010221623.png) no-repeat;
+            background-position: -105px 0;
+        }
+        .bgimg img{
+            width: 320px;
+        }
+        p{
+            width: 320px;
+            height: 30px;
+            background-color: black;
+            color: aliceblue;
+            line-height: 30px;
+            position: absolute;
+            top:150px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 总体框架 -->
+    <div class="container">
+        <!-- 精灵图片 -->
+        <div class="more"></div>
+        <div class="bgimg"><img src="https://oss.9ihub.com/test/20231010221714.png" alt=""></div>
+        <p>广东深圳宝安区建安一路海雅缤纷城4楼</p>
+        <div>
+            <h4>【海雅缤纷城】万达影城（深圳海雅广场...</h4>
+            <span>单人电影票，可观看2D</span>
+        </div>
+    </div>
+</body>
+```
+## 作业6：校招题目
+1. ![4ce58b1a78d4ef97aeec2307a592989](sjt8tyrv9.hn-bkt.clouddn.com/4ce58b1a78d4ef97aeec2307a592989.jpg)
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/20241021\347\254\224\350\256\26018--\345\233\272\345\256\232\345\256\232\344\275\215&\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md" "b/\350\256\270\350\211\263/20241021\347\254\224\350\256\26018--\345\233\272\345\256\232\345\256\232\344\275\215&\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4fdbc079fbfb0c45fc7cecb250d4d71004b17efb
--- /dev/null
+++ "b/\350\256\270\350\211\263/20241021\347\254\224\350\256\26018--\345\233\272\345\256\232\345\256\232\344\275\215&\345\261\236\346\200\247\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,15 @@
+# 固定定位
+1. `z-index`：数值大的压盖住数值小的
+2. 浮动元素也能用
+3. 值没有单位，就是一个正整数，默认的值为0
+4. 层级的应用
+# 粘性定位：sticky
+1. 需要一个绝对或相对的父级元素
+# 属性选择器：`[]`
+1. `E[title]`:选中页面E元素，并且存在title属性
+2. `E[title="abc"]`:选中页面E元素，并且带有title属性，且属性值完全等于abc
+3. `E[attr~=val]`：选择具有att属性并属性值为：用空格分隔的字词列表，其中一个等于val的E元素
+4. `E[attr|=val]`：要么是一个单独的属性值，要么这个属性值是以-分隔的
+5. `E[title^="abc"]`：选中页面E元素，并且带有title属性，属性值以abc开头
+6. `E[title$="abc"]`：选中页面E元素，并且带有title属性，属性值以abc结尾
+7. `E[title*="abc"]`：选中页面E元素，并且带有title属性，属性值任意位置包含abc
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/9.11\344\275\234\344\270\2322--\346\260\264\345\271\263\347\272\277\343\200\201\346\240\267\345\274\217\345\261\205\344\270\255.html" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.11\344\275\234\344\270\2322--\346\260\264\345\271\263\347\272\277\343\200\201\346\240\267\345\274\217\345\261\205\344\270\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..351537490b666b50f8543ddf31bd93b15faf86c6
--- /dev/null
+++ "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.11\344\275\234\344\270\2322--\346\260\264\345\271\263\347\272\277\343\200\201\346\240\267\345\274\217\345\261\205\344\270\255.html"
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水平线和文字的设置</title>
+</head>
+<body>
+    <!-- 文本居中 -->
+    <center>
+        <h1>春江花月夜</h1>
+        <p>张若虚</p>
+        <!-- 水平线颜色为红色，宽度为18 -->
+        <hr color="red" size="18">
+        <p>春江潮水连海平，海上明月共潮生。</p>
+        <p>滟滟随波千万里，何处春江无月明!</p>
+    </center>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/9.13\344\275\234\344\270\2323--\345\233\276\347\211\207\347\232\204\346\260\264\345\271\263\345\222\214\345\236\202\347\233\264\345\261\205\344\270\255.html" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.13\344\275\234\344\270\2323--\345\233\276\347\211\207\347\232\204\346\260\264\345\271\263\345\222\214\345\236\202\347\233\264\345\261\205\344\270\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1eed37eb6646fc6d99a52afd23294fb78110e0ff
--- /dev/null
+++ "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.13\344\275\234\344\270\2323--\345\233\276\347\211\207\347\232\204\346\260\264\345\271\263\345\222\214\345\236\202\347\233\264\345\261\205\344\270\255.html"
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图片</title>
+</head>
+<body>
+    <!-- 水平居中 -->
+    <div style="text-align: center;">
+        <img src="./登婉汁.jpg" alt="曾婉之" style="margin: 0 auto;width: 150px">
+    </div>
+    <!-- 垂直居中 -->
+     <div style="margin: auto;bottom: 0;width: 200px;height: 200px;position: absolute;top: 0;left: 0;right: 0;">
+        <img src="./登2.jpg" alt="登2" >
+     </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/9.14\344\275\234\344\270\2324--Apple\345\257\274\350\210\252.html" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.14\344\275\234\344\270\2324--Apple\345\257\274\350\210\252.html"
new file mode 100644
index 0000000000000000000000000000000000000000..477941bf74ef4940e97a09367f4d66415f8bcc00
--- /dev/null
+++ "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.14\344\275\234\344\270\2324--Apple\345\257\274\350\210\252.html"
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>导航栏</title>
+    <!-- 得放在style里 -->
+    <style>
+/* 整个样式设置宽度自动保持居中 */
+        body{
+            margin: 0px auto;
+            width: 1180px;
+            padding: 0px;
+        }
+        /* a标签去下划线，文字显示白色 */
+        a{
+            text-decoration: none;
+            color:aliceblue;
+        }
+        a:hover{
+            color: red;
+        }
+
+        ul{
+            /* 去列表符 */
+            list-style-type: none;
+        }
+        /* 所有列表向左悬浮，实现导航菜单横排列,文字居中显示 */
+        ul li{
+            /* 背景颜色*/
+            background-color:rgb(0, 0, 0);
+            float: left;
+            text-align: center;
+            width: 80px;
+            height: 30px;
+            display: block;
+            padding-top: 10px;
+        }
+        /* 颜色 */
+        svg{
+            fill: #fff;
+        }
+    </style>
+</head>
+<body>
+    <ul>
+        <li><a href="">
+            <!-- viewbox：x轴 y轴 缩放比例 -->
+            <svg height="48" viewBox="0 12 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>
+             
+       </a></li>
+        <li><a href="">商店</a></li>
+        <li><a href="">Mac</a></li>
+        <li><a href="">iPad</a></li>
+        <li><a href="">iPhone</a></li>
+        <li><a href=""> Watch</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><a href=""><svg height="48" viewBox="0 12 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>
+        </a></li>
+        <li><a href=""><svg height="48" viewBox="0 12 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>
+        </a></li>
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/9.9\346\265\217\350\247\210\345\231\250.md" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.9\346\265\217\350\247\210\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..edbbc8105878fa0a117994e94c3d54ffa0804277
--- /dev/null
+++ "b/\350\256\270\350\211\263/\344\275\234\344\270\232/9.9\346\265\217\350\247\210\345\231\250.md"
@@ -0,0 +1,7 @@
+# 国内国外主流浏览器中的渲染引擎和JS引擎
+| 浏览器 | 渲染引擎 | JS引擎 |
+|:-|:-:|-:|
+|Safari:苹果公司开发 | WebKit|JavaScriptCore|
+|Firefox|Gecko|SpiderMonkey|
+|微软:Internet Explorer|Trident|ChakraCore|
+|Chrome浏览器|Chromium|V8|
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2071.jpg" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2071.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..58db42bebd792f3d006d68d293e75751caa6e460
Binary files /dev/null and "b/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2071.jpg" differ
diff --git "a/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2072.jpg" "b/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2072.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b3b5ccd88fab2a9f7dbb2d6f9773742357367b89
Binary files /dev/null and "b/\350\256\270\350\211\263/\344\275\234\344\270\232/\344\275\234\344\270\2323\345\233\276\347\211\2072.jpg" differ
diff --git "a/\350\256\270\350\211\263/\347\254\224\350\256\260/9.11\347\254\254\344\270\211\346\254\241\347\254\224\350\256\260--HTML\346\246\202\350\277\260\345\222\214\346\216\222\347\211\210\346\240\207\347\255\276.md" "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.11\347\254\254\344\270\211\346\254\241\347\254\224\350\256\260--HTML\346\246\202\350\277\260\345\222\214\346\216\222\347\211\210\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..72da513bdb10dc7d6994de71b3bf25b74c390298
--- /dev/null
+++ "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.11\347\254\254\344\270\211\346\254\241\347\254\224\350\256\260--HTML\346\246\202\350\277\260\345\222\214\346\216\222\347\211\210\346\240\207\347\255\276.md"
@@ -0,0 +1,43 @@
+# HTML概述
+1. 超文本标记语言，负责描述文档语义的语言。
+2. 概念：
+    + 超文本：图片、音频等内容成为超文本；跳转文件
+    + 标记语言：是一套标记标签；没有编译过程
+3. 专有名词：
+    + 网页：由各种标记组成的一个页面
+    + 主页：起始页/导航页
+    + 标记：也叫标签，比如`<p>是开始标签，</P>是结束标签`
+    + 元素：`<p>内容</p>是元素，也叫dom元素/节点`
+    + 属性：给每个标签所做的辅助信息
+4. HTML骨架
++ `<html></html>`	HTML标签
++ `<head></head>`	文档的头部
++ `<title></title>`	文档的标题
+`<body></body>`文档的主体
+5. HTML规范
++ 要正确嵌套，不能交叉嵌套
++ 所有的标记都必须小写。
++ 所有的标签都必须闭合。
++ 所有的属性值必须加引号。
++ 所有的属性必须有值
++ 会空白折叠
+# 排版标签
+## 标题标签： 标题使用`<h1>~<h6>`标签进行定义，在body里
+## 段落标签
+1.  `<p>`标签可以把文档分割为每一行
+2. 属性：align="":对齐方式，包括left、center、right
+3. 文本级标签：只能放文字、图片、表单元素；例如p、span、等
+4. 容量级标签：可放置任何东西；例如div
+## 水平线标签`<hr>`
+1. 结构清晰、层次分明
+2. 可设置属性：
+    + align=""设定线条位置；
+    + size=""设定线条粗细；
+    + width=""：设定线条长度；
+    + color=""：设置线条颜色。
+ ## 换行标签`<br/>`：可强制换行显示
+## div与span的区别
+1. div换行；什么都可以放
+2. span不换行；是一个文本级的标签
+## 内容居中标签`<center></center>`
+## 预定义标签`<pre>`:将保留所有的空白字符，原封不动输出结果
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\347\254\224\350\256\260/9.13\347\254\254\345\233\233\346\254\241\347\254\224\350\256\260--\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214img\346\240\207\347\255\276.md" "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.13\347\254\254\345\233\233\346\254\241\347\254\224\350\256\260--\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214img\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..79813233d6b0638c49a77ba2ec325a3a2acc4c22
--- /dev/null
+++ "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.13\347\254\254\345\233\233\346\254\241\347\254\224\350\256\260--\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214img\346\240\207\347\255\276.md"
@@ -0,0 +1,36 @@
+# 字体标签
+## 特殊字符
+1. 空格：&nbsp；
+2. <>:`&lt;&gt;`
+3. 符号&：&amp；
+4. 上标：`值<sup>上标值</sup>`；下标：`值<sub>下标值<sub>`
++ 4<sup>5</sup>；H<sub>2</sub>o
+## 下划线`<u>`、中划线：`<del>`、斜体：`<i>`
+## 粗体标签：`<b>`
+## 字体标签:font；可设置字体颜色或大小
+# 超链接`<a href="链接地址"></a>`
+1. 外部链接：连接到外部文件；href就是超文本地址；
+2. 锚链接：在本页面或者其他页面的不同位置进行跳转
++ 创建一个锚点，使用name属性或id属性；
++ 设置超链接，点击时回到顶部；这个超链接的href是目的的name或id；要有#
+3. 邮件链接
+4. 属性：
++ href：目标URL
++ title：悬停文本
++ name：设置一个锚点的名称
++ target：用什么方式打开目标页面
+    * _self:在同一个网页中显示（默认）
+    * _blank:在新的窗口打开
+    * _parent:在父窗口中显示
+    * _top：在顶级窗口中显示
+# img标签介绍
+## 介绍： 代表是一个图片；单标签
+## src属性：图片的路径
+1. 相对路径：网页文件和图片必须在一个服务器上
+2. 绝对路径：是`http://或者是https://`开头的路径
+## 其他属性
+1. width：宽度；
+2. height：高度
+3. alt属性：当图片不可用时，代表图片现实的内容
+4. title：鼠标提示性文本
+5. align：图片和周围文字的相对位置；可以是bottom（默认）、center居中、top、left、right
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\347\254\224\350\256\260/9.14\347\254\254\344\272\224\346\254\241\347\254\224\350\256\260--\345\210\227\350\241\250\346\240\207\347\255\276\345\222\214\350\241\250\346\240\274\346\240\207\347\255\276.md" "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.14\347\254\254\344\272\224\346\254\241\347\254\224\350\256\260--\345\210\227\350\241\250\346\240\207\347\255\276\345\222\214\350\241\250\346\240\274\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9aadf0e630ddd4236bbe3806bd3815c1285a8d9f
--- /dev/null
+++ "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.14\347\254\254\344\272\224\346\254\241\347\254\224\350\256\260--\345\210\227\350\241\250\346\240\207\347\255\276\345\222\214\350\241\250\346\240\274\346\240\207\347\255\276.md"
@@ -0,0 +1,19 @@
+# 列表标签
+## 无序列表`<ul>`，每一项是`<li>`
+1. 属性：type="属性值"；属性值：disc（实心圆点，默认）、square实心方点、circle空心圆
+2. 列表之间是可以嵌套的
+## 有序列表`<ol>`,里面每一项是`<li>`
+## 定义列表`<dl>`
+1. dl的子元素只能是dt和dd
+2. `<dt>`是列表标签，是必须的；可以一个dt配很多个dd
+# 表格标签`<table>`
+1. 每行`<tr>`组成的，每行是由每个单元格`<td>`组成的
+2. 属性：
++ border：边框
++ width：宽度
++ height：高度
++ bordercolor：边框颜色
+3. 单元格的合并：colspan：横向合并；rowspan：纵向合并
+4. `<th>`：加粗的单元格
+5. `<caption>`：表格的标签
+6. 标签：`<thead>`、`<tbody>`、`<tfoot>`；顺序任意，如果使用此标签，数据可以边获取边显示
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\347\254\224\350\256\260/9.4\347\254\254\344\270\200\346\254\241\347\254\224\350\256\260--markdown\350\257\255\346\263\225.md" "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.4\347\254\254\344\270\200\346\254\241\347\254\224\350\256\260--markdown\350\257\255\346\263\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9e71304f809881e927e25e0ab8c224caa8fd0064
--- /dev/null
+++ "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.4\347\254\254\344\270\200\346\254\241\347\254\224\350\256\260--markdown\350\257\255\346\263\225.md"
@@ -0,0 +1,29 @@
+# Markdown语法
+ 1. [注释或文字] (url): url：图片路径：./;可用放图片，如果图片加载不出来可看注释
+ 2. '#'：一级标题；'##'：二级标题
+ + eg:
+ # 我是一级标题
+ ## 我是二级标题
+ 3. *:'前后一个'：斜体；'前后两个':粗体；'前后三个'：粗斜体
+ + eg：*斜体*； **粗体**；***粗斜体***
+ 4. "```JS console.log()":引用/代码段
+ + eg：
+ ```JS
+ 我是代码段
+ ```
+ 5.'`dom`':突出重点
+  + eg:
+  你在`干什么`，来不来`打劫`？
+
+  6. 有序列表：'1. ';'1) '(后面都要有空格)
+  7. 无序列表：'+';'-';'*'；无序列表可有三层关系
+
+  8. |左对齐| 居中| 右对齐|
+  '|:-|:-:|-:|'
+  + eg:
+
+ | 左对齐 | 居中 | 右对齐 |
+ | :- | :-: | -: |
+ | 左对齐 | 居中 |右对齐 |
+ |one|two|three|
+  
\ No newline at end of file
diff --git "a/\350\256\270\350\211\263/\347\254\224\350\256\260/9.9\347\254\254\344\272\214\346\254\241\347\254\224\350\256\260--HTML\350\256\244\347\237\245.md" "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.9\347\254\254\344\272\214\346\254\241\347\254\224\350\256\260--HTML\350\256\244\347\237\245.md"
new file mode 100644
index 0000000000000000000000000000000000000000..917896b161d012e08f8c4237bae31181b4d9c39f
--- /dev/null
+++ "b/\350\256\270\350\211\263/\347\254\224\350\256\260/9.9\347\254\254\344\272\214\346\254\241\347\254\224\350\256\260--HTML\350\256\244\347\237\245.md"
@@ -0,0 +1,20 @@
+# 认识Web和Web标准
+## Web
+1. Web:全球广域网，也称```万维网```。
+2. 网页：网页是构成网站的基本元素。
+3. 浏览器：网页运行的平台，进行人与机交互
+## Web标准
+1. W3C组织：万维网联盟组织，指定统一的标准
+2. Web标准：
+   + 结构标准HTML:进行整理与分类
+   + 表现标准CSS:用于设置网页元素的版式等
+   + 行为标准JS:定义网页的交互和行为。
+   3. Web前端的三层：
+   + HTML：超文本标记语言
+   + CSS：层叠样式表
+   + JS：从交互的角度描述页面的行为
+# 浏览器的介绍
+1. 浏览器是网页运行的平台
+2. 浏览器的组成
++ ```渲染引擎（浏览器内核）```：解析HTML和CSS；渲染引擎就是浏览器兼容性问题出现的根本问题
++ JS引擎（JS解释器）