diff --git "a/\350\251\271\345\256\207\350\210\252/20240923-html\346\213\226\346\213\275.md" "b/\350\251\271\345\256\207\350\210\252/20240923-html\346\213\226\346\213\275.md"
new file mode 100644
index 0000000000000000000000000000000000000000..44caa1c7a43ad0cb9c6fd3871d46c2c5b657b6c0
--- /dev/null
+++ "b/\350\251\271\345\256\207\350\210\252/20240923-html\346\213\226\346\213\275.md"
@@ -0,0 +1,311 @@
+## 拖拽
+
+在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
+
+### 1、拖拽元素
+
+ `draggable="true"` 属性的元素。
+
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave` 当**鼠标离开拖拽元素时**调用
+
+- `ondragend` 当拖拽结束时调用
+
+- `ondrag` 整个拖拽过程都会调用
+
+### 2、目标元素
+
+把元素A拖拽到元素B里，那么元素B就是目标元素。
+
+页面中任何一个元素都可以成为目标元素。
+
+**目标元素的事件监听**：（应用于目标元素）
+
+- `ondragenter` 当拖拽元素进入时调用
+
+- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
+- `ondrop` 当在目标元素上松开鼠标时调用
+
+- `ondragleave` 当鼠标离开目标元素时调用
+
+**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
+
+## 历史
+
+界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
+
+在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态
+
+`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
+
+- window.history.forward(); // 前进
+
+- window.history.back(); // 后退
+
+- window.history.go(); // 刷新
+
+- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
+
+- 通过JS可以加入一个访问状态
+
+- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
+
+
+
+## 地理定位
+
+在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
+
+## 全屏
+
+> HTML5规范允许用户自定义网页上**任一元素**全屏显示。
+
+### 开启/关闭全屏显示
+
+方法如下：（注意 screen 是小写）
+
+```javascript
+ requestFullscreen() //让元素开启全屏显示
+
+ cancleFullscreen() //让元素关闭全屏显示
+```
+
+
+为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）
+
+```javascript
+ webkitRequestFullScreen
+ webkitCancleFullScreen
+
+ mozRequestFullScreen
+ mozCancleFullScreen
+```
+
+### 检测当前是否处于全屏状态
+
+方法如下：
+
+```
+ document.fullScreen
+```
+
+
+不同浏览器需要加私有前缀，比如：
+
+```javascript
+ document.webkitIsFullScreen
+
+ document.mozFullScreen
+```
+
+
+### 全屏的伪类
+
+- :full-screen .box {}
+
+- :-webkit-full-screen {}
+
+- :moz-full-screen {}
+
+比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
+
+
+## 练习
++ 效果图：
+
+
+代码：
+```html
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
这是一段需要高亮显示的文本。
+
+
+ 这是文章的第一段。
+ 这是文章的第二段。
+
+
+
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+
+
+
+ 这是一条新闻。请根据屏幕宽度调整文本样式。
+
+
+
+ 这是一个引用文本。它应该看起来像是从某本书中摘录的。
+
+
+ 这段文本将闪烁。
+
+
+
+```
\ No newline at end of file
diff --git "a/\350\251\271\345\256\207\350\210\252/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\350\251\271\345\256\207\350\210\252/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..32cb4663be740733ce756cd3ba9d302bceff270e
--- /dev/null
+++ "b/\350\251\271\345\256\207\350\210\252/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,273 @@
+## background 的常见背景属性
+
+- `background-color:#ff99ff;` 设置元素的背景颜色。
+
+- `background-image:url(images/2.gif);` 将图像设置为背景。
+
+- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要）
+ - `no-repeat`不要平铺；
+ - `repeat-x`横向平铺；
+ - `repeat-y`纵向平铺。
+
+- `background-position:水平方向 垂直方向;` 设置背景图片在当前容器中的位置。
+
+- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
+属性值可以是：`scroll`（默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
+
+- background-origin
+
+- background-clip 背景裁切
+
+- background-size 调整尺寸
+
+## background-color：背景颜色的表示方法
+
+红色可以有下面的三种表示方法：
+
+```css
+ background-color: red;
+ background-color: rgb(255,0,0);
+ background-color: #ff0000;
+```
+
+CSS3 中，有一种新的表示颜色的方式：RGBA或者HSLA。
+
+RGBA、HSLA可应用于**所有**使用颜色的地方。
+
+**关于设置透明度的其他方式：**
+
+（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
+
+（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
+
+## `background-repeat`属性
+
+`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
+
+- `no-repeat`（不要平铺）
+- `repeat-x`（横向平铺）
+- `repeat-y`（纵向平铺）
+
+
+## `background-position`属性
+
+`background-position`属性指的是**背景定位**属性。
+
+```css
+ background-position:向右偏移量 向下偏移量;
+```
+
+属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
+
+## background-attachment 属性
+
+- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
+ - `fixed`（背景就会被固定住，不会被滚动条滚走）。
+ - `scroll`（与fixed属性相反，默认属性）
+
+### background 综合属性
+
+background属性和border一样，是一个综合属性，可以将多个属性写在一起。
+
+```css
+ background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+
+等价于：
+
+```css
+ background-color:red;
+ background-image:url(1.jpg);
+ background-repeat:no-repeat;
+ background-position:100px 100px;
+ background-attachment:fixed;
+```
+
+## `background-size`属性：背景尺寸
+
+`background-size`属性：设置背景图片的尺寸。
+
+- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。
+
+- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。
+
+## 背景原点：`background-origin` 属性
+
+`background-origin` 属性：控制背景从什么地方开始显示。
+
+```css
+
+ /* 从 padding-box 内边距开始显示背景图 */
+ background-origin: padding-box; //默认值
+
+ /* 从 border-box 边框开始显示背景图 */
+ background-origin: border-box;
+
+ /* 从 content-box 内容区域开始显示背景图 */
+ background-origin: content-box;
+
+```
+
+## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
+
+`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
+
+ - `border-box` 超出 border-box 的部分，将裁剪掉
+
+ - `padding-box` 超出 padding-box 的部分，将裁剪掉
+
+ - `content-box` 超出 content-box 的部分，将裁剪掉
+
+## 渐变：background-image
+
+渐变分为：
+
+- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+
+- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
+
+- 重复渐变。
+
+
+### 线性渐变
+
+格式：
+
+```css
+
+ background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+ background-image: linear-gradient(to right, yellow, green);
+```
+
+- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
+
+### 径向渐变
+
+```css
+ background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+
+ background-image: radial-gradient(100px at center,yellow ,green);
+
+```
+
+解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
+
+中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
+
+## clip-path：裁剪出元素的部分区域做展示
+
+`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
+
+虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
+
+举例：（鼠标悬停时，放大裁剪的区域）
+
+```css
+ .div1 {
+ width: 320px;
+ height: 320px;
+ border: 1px solid red;
+ background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
+ background-size: cover;
+
+ /* 裁剪出圆形区域 */
+ clip-path: circle(50px at 100px 100px);
+ transition: clip-path .4s;
+ }
+ .div1:hover{
+ /* 鼠标悬停时，裁剪出更大的圆形 */
+ clip-path: circle(80px at 100px 100px);
+ }
+```
+
+
+## 练习：
++ 效果图：
+
+
+
+代码：
+```html
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git "a/\350\251\271\345\256\207\350\210\252/images/background-1.png" "b/\350\251\271\345\256\207\350\210\252/images/background-1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..67f91f1fd76f23bcf26d941b624f26b14e77ae63
Binary files /dev/null and "b/\350\251\271\345\256\207\350\210\252/images/background-1.png" differ
diff --git "a/\350\251\271\345\256\207\350\210\252/images/background-2.png" "b/\350\251\271\345\256\207\350\210\252/images/background-2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a7933acfda54dc10bb0161b9652f85900d5c9134
Binary files /dev/null and "b/\350\251\271\345\256\207\350\210\252/images/background-2.png" differ
diff --git "a/\350\251\271\345\256\207\350\210\252/images/background.png" "b/\350\251\271\345\256\207\350\210\252/images/background.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d2134ab0cd0283ac920569c10e578d3037233020
Binary files /dev/null and "b/\350\251\271\345\256\207\350\210\252/images/background.png" differ
diff --git "a/\350\251\271\345\256\207\350\210\252/images/text.png" "b/\350\251\271\345\256\207\350\210\252/images/text.png"
new file mode 100644
index 0000000000000000000000000000000000000000..55c646f29b02e0b5316ef7bd265d39020ee47446
Binary files /dev/null and "b/\350\251\271\345\256\207\350\210\252/images/text.png" differ
diff --git "a/\350\251\271\345\256\207\350\210\252/images/tuozhuai.png" "b/\350\251\271\345\256\207\350\210\252/images/tuozhuai.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d27791b0a28caf3901f939fc15a50ec6d298e876
Binary files /dev/null and "b/\350\251\271\345\256\207\350\210\252/images/tuozhuai.png" differ