diff --git "a/\345\220\264\345\255\237\345\275\244/20240923-H5\350\257\246\350\247\243.md" "b/\345\220\264\345\255\237\345\275\244/20240923-H5\350\257\246\350\247\243.md"
new file mode 100644
index 0000000000000000000000000000000000000000..90982c1d605e45db9be881768679bab6baac984e
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/20240923-H5\350\257\246\350\247\243.md"
@@ -0,0 +1,41 @@
+### 拖拽
+1. `draggable="true"`
+2. `ondragstart`当拖拽开始时调用
+3. `ondragleave`当鼠标离开拖拽元素时调用
+4. `ondragend`当拖拽结束时调用
+5. `ondrag`整个拖拽过程都会调用
+### 地理位置
+1. navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
+2. position.coords.latitude纬度
+3. position.coords.longitude经度
+### 全屏
+1. `requestFullscreen()` 让元素开启全屏显示
+2. `cancleFullscreen()` 让元素关闭全屏显示
+3. `document.fullScreen` 检查是否处于全屏状态
+4. 全屏伪类
+ - :full-screen .box {}
+ - :-webkit-full-screen {}
+ - :moz-full-screen {}
+### Web存储
+1. 会话存储：window.sessionStorage
+ + 保存在内存中
+ + 生命周期为浏览器窗口。就是当窗口关闭数据销毁
+ + 在同一个窗口下数据可以共享
+2. 本地存储：window.localStorage
+ + 有可能保存在浏览器中，也有可能保存在硬盘里
+ + 永久生效
+ + 可以多个窗口共享
+3. 特性
+ + 设置读取方便
+ + 容量较大
+ + 只能存储字符串
+### 网络状态
+1. 连接 window.online
+2. 断开 window.offline
+### 应用缓存
+1. 优势
+ + 可配置需要缓存的资源
+ + 网络无连接应用仍可用
+ + 本地读取缓存资源，提升访问速度，增强用户体验
+ + 减少请求，缓解服务器负担
+2. `cache manifest` 缓存清单文件
\ No newline at end of file
diff --git "a/\345\220\264\345\255\237\345\275\244/20240926-\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\346\226\207\346\234\254\346\240\207\347\255\276.md" "b/\345\220\264\345\255\237\345\275\244/20240926-\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\346\226\207\346\234\254\346\240\207\347\255\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5d69a0a449101f50a656d4b8465a00ce3a800aa7
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/20240926-\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\346\226\207\346\234\254\346\240\207\347\255\276.md"
@@ -0,0 +1,38 @@
+### css单位
+1. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc
+ + in:英寸
+ + cm:厘米
+ + mm:毫米
+ + pt: 英镑
+ + pc: 皮卡
+2. 相对单位
+ + px:像素
+ + rem:相对于根元素body的大小比例
+ + em:印刷单位相对于12个点
+ + %:百分比，相对于周围文字的大小
+### font 字体属性
+1. 字体大小：font-size
+2. 行高：line-height
+3. 字体类型：font-family
+4. 斜体：font-style:italic --italic:斜体；normal:不倾斜
+5. 粗体：font-weight
+6. 小写变大写：font-variant:small-caps
+7. font: 加粗 字号/行高 字体
+* 行高，字号一般都是偶数
+### 让单行文本垂直居中
+1.一段文本只有一行，行高=盒子高
+### `vertical-align="middle"`属性
+1.`vertical-align="middle"`--指定行级元素的垂直对齐方式
+2. 用于行内元素，行内块元素，表格的单元格
+### 文本属性
+1. 单个字母之间的间距：letter-spacing
+2. 单词之间的间距：word-spacing
+3. 字体修饰：text-decoration none underline overline line-through
+4. 字体颜色：color
+5. 在当前容器的对齐方式：text-align:center left right center
+6. 单词字体大小写：text-transform uppercase(大写)lowercase(小写)capitalize(首字母大写)
+7. 首行文本的缩进：text-indent
+8. 文本阴影：text-shadow
+9. 空白字符的处理方式：white-space normal nowrap pre pre-wrap pre-line
+10.文本方向：direction:ltr(从左到右) rtl(从右到左)
+11. 文本方向性：unicode-bidi：bidi-override direction:rtl ---两个一起用才有效果
\ No newline at end of file
diff --git "a/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md" "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..06887eb974a441f2979cad88d91468158b3c5f24
--- /dev/null
+++ "b/\345\220\264\345\255\237\345\275\244/\344\275\234\344\270\232/20240923-\346\273\232\345\212\250\345\255\227\345\271\225.md"
@@ -0,0 +1,53 @@
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-23%20204516.png)
+```
+
+
+
+
+
+ Document
+
+
+
+
+
+ - 哈哈哈哈哈哈哈哈哈
+ - 哈哈哈哈哈哈哈哈哈
+ - 哈哈哈哈哈哈哈哈哈
+ - 哈哈哈哈哈哈哈哈哈
+ - 哈哈哈哈哈哈哈哈哈
+
+
这是一段需要啊高亮显示的文本。
+```
+2. 十三.文本排版设计
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-26%20210555.png)
+```
+
+ 这是文章的第一段。
+ 这是文章的第二段。
+
+```
+3. 十四.文本对齐和装饰
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-26%20210545.png)
+```
+
+ 这是一首诗。
+
+ 每个字都充满了情感，每个词都蕴含着深意。
+
+```
+4. 十五.文本样式响应式设计
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-26%20210604.png)
+```
+
+ 这是一条新闻。请根据屏幕亮度调整文本样式。
+
+```
+5. 十六.文本样式与伪类结合
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-26%20210624.png)
+```
+
+ 这是一个引用文本。它应该看起来像是从某本书中摘录的。
+
+```
+6. 十七.文本样式与动画
+[效果](http://sjnjd2n96.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-26%20210615.png)
+```
+ 这段文本将闪烁。
+```
+### css
+```
+ .highlight{
+ color: gold;
+ background-color: #000;
+ text-transform: uppercase;
+ text-indent: 20px;
+}
+.highlight:hover{
+ color: white;
+ background-color: gray;
+}
+.article p{
+ color: gray;
+ font-size: 16px;
+ line-height: 1.5;
+ text-indent: 1em;
+}
+.article p::first-letter{
+ font-size: 24px;
+ font-weight: bold;
+}
+.poem{
+ text-align: justify;
+ color: blue;
+ text-transform: capitalize;
+}
+.poem::first-line{
+ color: rgb(243, 10, 10),;
+}
+
+/* 当屏幕宽度小于 600px 时，文本大小为 14px，行高为 1.2 */
+@media screen and(max-width:599px) {
+ .news{
+ font-size: 14px;
+ line-height: 1.2;
+ }
+ }
+ /* 当屏幕宽度在 600px 到 900px 之间时，文本大小为 16px，行高为 1.4。 */
+ @media screen and(min-width:600px) and(max-width:900px){
+ .news{
+ font-size: 16px;
+ line-height: 1.4;
+ }
+ }
+ /* 当屏幕宽度大于 900px 时，文本大小为 18px，行高为 1.6。 */
+ @media screen and(min-width:901px) {
+ .news{
+ font-size: 18px;
+ line-height: 1.6;
+ }
+ }
+ .quote{
+ color: gray;
+ font-style: italic;
+ text-indent: 20px;
+ }
+ .quote::before{
+ content: "“";
+ }
+ .quote::after{
+ content: "”";
+ }
+ .flashing{
+ animation: flash 2s infinite;
+ }
+ @keyframes flash{
+ 0%,100%{
+ color: red;
+ }
+ 50%{
+ color: yellow;
+ }
+ }
+```
\ No newline at end of file