可以转换为行内元素`display:inline`
+> inline就是“行内”；此时这个div不能设置宽度、高度；可以和别人并排了
+2. 行内元素
转换为块级元素`display:block`
+> block”是“块”;此时这个span能够设置宽度、高度;必须霸占一行了，别人无法和他并排;如果不设置宽度，将撑满父亲
+## css中一共有三种手段，使一个元素脱离标准文档流：
+```
+解决不受任何限制设宽高，并排
+（1）浮动
+（2）绝对定位
+（3）固定定位
+```
+### 浮动`float`
+- left
+- right
+> span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了
+1. 性质1：浮动的元素脱标
+> **一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**
+> 所有标签，浮动之后，已经不区分行内、块级了
+2. 性质2：浮动的元素互相贴靠
+> 三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠
+3. 性质3：浮动的元素有“字围”效果
+> **div挡住了p，但不会挡住p中的文字**，形成“字围”效果
+> **标准流中的文字不会被浮动的盒子遮挡住**。（文字就像水一样）
+> **永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
+4. 性质4：收缩
+> 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
+> div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩`宽高随内容而变`
+## 浮动的清除
+> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响
+1. 给浮动元素的祖先元素加高度
+- **如果一个元素要浮动，那么它的祖先元素一定要有高度。**
+- **有高度的盒子，才能关住浮动**
+2. clear:both;
+- **不允许左侧和右侧有浮动对象。**
+3. 隔墙法
+- 为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国
+4. 内墙法
+- **一个父亲是不能被浮动的儿子撑出高度的**
+5. 清除浮动：overflow:hidden
+- overflow即“溢出”， hidden即“隐藏”
+## margin相关
+1. margin塌陷/margin重叠；**标准文档流中，竖直方向的margin不叠加，取较大的值**；作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)
+2. 盒子居中`margin:0 auto;`margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了
+> - 只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
+> - 使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的width，那么它的width就是霸占整行，没有意义）
+> - `margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
+1. 善于使用父亲的padding，而不是儿子的margin
+> - div里有个p,给p设置margin-top则会将整个div被margin;因为div没有border属性
+```
+1. margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离
+2. 如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin
+```
+> 双倍margin的bug:应该将浮动的方向和margin的`方向相反
+# 练习
+1. 布局浮动效果图
+
+
+
+html关键代码
+```html
+
+```
+css关键代码
+```css
+div{
+ width: 970px;
+ height: 600px;
+ margin: 0 auto;
+ }
+ .top{
+ width: 970px;
+ height: 103px;
+ margin-bottom: 8px;
+ }
+ .top-left{
+ width: 277px;
+ height: 103px;
+ background-color: red;
+ float: left;
+ }
+ .top-right{
+ width: 137px;
+ height: 49px;
+ background-color: green;
+ margin-bottom: 8px;
+ float: right;
+ }
+ .top-bottom{
+ width: 679px;
+ height: 46px;
+ background-color: green;
+ float: right;
+ }
+ .center{
+ width: 970px;
+ height: 435px;
+ }
+ .center-left{
+ width: 310px;
+ height: 435px;
+ background-color: yellow;
+ margin-right: 10px;
+ float: left;
+ }
+ .center-c{
+ width: 450px;
+ height: 400px;
+ float: left;
+ }
+ .center-c-top{
+ width: 450px;
+ height: 240px;
+ background-color: aquamarine;
+ margin-bottom: 10px;
+ float: left;
+ }
+ .center-c-cen{
+ width: 450px;
+ height: 110px;
+ background-color: aquamarine;
+ margin-bottom: 10px;
+ float: left;
+ }
+ .center-c-bottom{
+ width: 450px;
+ height: 30px;
+ background-color: aquamarine;
+ margin-bottom: 10px;
+ float: left;
+ }
+ .center-right{
+ width: 190px;
+ height: 400px;
+ background-color: purple;
+ margin-left: 10px;
+ float: left;
+ }
+ .center-bottom{
+ width: 650px;
+ height: 25px;
+ background-color: blue;
+ margin-top: 10px;
+ float: left;
+ }
+ .bottom{
+ width: 970px;
+ height: 40px;
+ background-color: tan;
+ margin-top: 10px;
+ }
+```
+2.公告浮动效果图
+
+
+
+html关键代码
+```html
+
+
+
+
+
+ 哈哈哈哈哈哈
+ 2024年10月17日
+
+
+
+
+
哈哈哈哈哈哈
+
2024年10月17日
+
+
+
+
哈哈哈哈哈哈
+
2024年10月17日
+
+
相对定位
+
没有定位
+
绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
+
+
相对定位
+
相对定位
+
绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
+
+
888
+
+ 33333333333333333333333333333333
+
+```
+css关键代码
+```css
+ .d1{
+ width: 600px;
+ height: 100px;
+ border: 1px solid;
+ position: fixed;
+ background-color: aqua;
+ }
+ .d2{
+ width: 300px;
+ height: 1000px;
+ border: 1px solid;
+ }
+```
+3. 
+
+html关键代码
+```html
+ 昂，你来晚了哈
+```
+css关键代码
+```css
+ .d1{
+ position: relative;
+ }
+ .d1::after{
+ content: attr(data-d1);
+ position: absolute;
+ left: 0;
+ top: 20px;
+ opacity: 0;
+ transition: opacity 1s;
+ border: 1px solid;
+ border-radius: 5px;
+ background-color: gray;
+ color: white;
+ }
+ .d1:hover:after{
+ opacity: 1;
+ /* 通过改变opacity的数值，使提示框显示出来 */
+ }
+```
+4. 
+
+html关键代码
+```html
+
+
+
+ - 付款图标
+
+ - 存款图标
+
+ - 删除图标
+
+ - 粘贴图标
+
+ - 笑脸图标
+
+ - 编辑图标
+
+
+
+
+
[海雅缤纷城]万达影城（深圳海雅广场...单人电影票，可观看2D
+
+ ￥
+ 35
+ ￥
+ 80
+ 225
+ 已售
+
+
+
这是一段需要高亮显示的文本。
+```
+css:
+```css
+.highlight {
+ color: gold; /* 文本颜色为金色 */
+ background-color: black; /* 背景颜色为黑色 */
+ text-transform: uppercase; /* 文本转换为大写 */
+ text-indent: 20px; /* 首行缩进20px */
+ }
+ .highlight:hover{
+ color: white;
+ background-color: grey;
+ }
+```
+## 文本排版设计效果图
+
+
+要求：
+* 设计一个类 .article，使得应用该类的元素文本颜色为深灰色，字体大小为 16px，行高为 1.5，首行缩进为 1em。
+* 同时，设置该元素的 :first-letter 伪元素，使得首字母字体大小为 24px，字体加粗。
+
+html:
+```html
+
+ 这是文章的第一段。
+ 这是文章的第二段。
+
+```
+css:
+```css
+.article p {
+ color:gray; /* 文本颜色为灰色 */
+ font-size: 16px; /* 字体大小为 16px */
+ line-height: 1.5; /* 行高为 1.5 */
+ text-indent: 1em; /* 首行缩进为 1em */
+ }
+
+ .article p:first-letter {
+ font-size: 24px;
+ font-weight: bold;
+ }
+```
+## 文本对齐和装饰效果图
+
+
+要求：
+* 设计一个类 .poem，使得应用该类的元素文本对齐方式为两端对齐，文本颜色为深蓝色，并且每个单词的首字母大写。
+* 同时，设置该元素的 ::first-line 伪元素，使得第一行文本颜色为深红色。
+
+html:
+```html
+
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意。naeor yehfo woeir
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+
+```
+css:
+```css
+.poem {
+ text-align: justify; /* 文本对齐方式为两端对齐 */
+ color: blue; /* 文本颜色为深蓝色 */
+ text-transform: capitalize; /* 每个单词的首字母大写 */
+ }
+
+ .poem::first-line {
+ color: red;
+ }
+```
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/2024.9.29.\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\345\220\264\344\275\263\351\242\226/2024.9.29.\350\203\214\346\231\257\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0de5e79e2d0f6fa290a0c0ee4226261f423c1c25
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.9.29.\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -0,0 +1,173 @@
+# 背景样式background的常见属性
+* `background-color:#ff99ff;`设置背景颜色
+* `background-image:url(./);`设置背景图片
+* `background-repeat:no-repeat;`设置背景图片是否重复，如何重复
+ * `no-repeat`不要平铺
+ * `repeat-x`横向平铺
+ * `repeat-y`纵向平铺
+* `background-position:center top;`设置图片在当前容器中的位置
+* `background-attachment:scroll;`设置背景图片是否跟着滚动条一起移动。
+ * `fixed`背景固定，不会跟着滚动条走
+ * `scroll`与fixed相反，默认属性
+* `background-size: ;`调整尺寸
+# 背景属性练习
+## 基础练习
+1. 背景颜色：请为一个名为.box的类设置背景颜色为深蓝色。
+
+关键代码：
+```css
+.box{
+ background-color: blue;
+ }
+```
+2. 2.背景图片：给定一个名为.image-background的类，请设置其背景图片为url('background.jpg')。
+
+关键代码：
+```css
+.image-background{
+ background-image: url(./background.jpg);
+ }
+```
+3. 背景尺寸：请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素。
+
+关键代码：
+```css
+.cover-image{
+ background-size: cover;
+ background-image: url(./background.jpg);
+ }
+```
+4. 背景位置：请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。
+
+关键代码：
+```css
+.header{
+ background-image: url(./background.jpg);
+ background-position:right bottom ;
+ }
+```
+5. 背景重复：请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。
+
+关键代码：
+```css
+.pattern{
+ background-image: url(./background.jpg);
+ background-repeat: repeat-y;
+ }
+```
+## 进阶练习
+
+1. 多重背景：请为一个名为.multi-background的类设置两个背景图片，并确保第一个图片覆盖在第二个图片之上。
+
+关键代码：
+```css
+.multi-background{
+ background: url(./background.jpg) no-repeat right bottom ,url(./6dba2cb8f394b609dcd76b66a030dee1.jpeg) no-repeat center center;
+ }
+```
+
+2. 背景渐变：请为一个名为.gradient-box的类创建一个从左到右的线性渐变背景，颜色从蓝色到红色。
+
+
+关键代码：
+```css
+.gradient-box{
+ background: linear-gradient(to right,blue,red);
+ }
+```
+3. 背景裁剪：请为一个名为.cropped-background的类设置背景图片，并确保图片只显示在元素的中心区域。
+
+关键代码：
+```css
+.cropped-background{
+ background-image: url(./background.jpg);
+ background-position: center center;
+ }
+```
+4. 背景缩放：请为一个名为.responsive-background的类设置背景图片，并确保图片能够根据元素大小自动缩放。
+
+
+关键代码：
+```css
+.responsive-background{
+ background-image: url(./background.jpg);
+ background-size:contain;
+ }
+```
+5. 背景附加属性：请为一个名为.sticky-footer的类设置背景图片，并确保图片在页面滚动时固定在底部。
+
+关键代码：
+```css
+.sticky-footer{
+ background-image: url(./background.jpg);
+ background-position: bottom ;
+ }
+```
+## 高阶练习
+1. 背景属性的简写：请为一个名为.compact-background的类使用简写形式设置背景属性，包括颜色、图片、位置和尺寸。
+
+关键代码：
+```css
+.compact-background{
+ background: red url(./background.jpg) no-repeat right bottom;
+ }
+```
+2. 背景属性的继承：请为一个名为.parent的类设置背景颜色，并确保其子元素.child继承该背景颜色。
+
+关键代码：
+```css
+.parent{
+ background-color: aquamarine;
+ }
+.child{}
+```
+3. 背景属性的层叠：请为一个名为.layered-background的类设置多个背景层，并使用background-blend-mode属性实现混合效果。
+
+关键代码：
+```css
+.layered-background{
+ background-image: url(./background.jpg), url(./b1bc4b11692da49716a4ba1e08a55a2f.jpg);
+ background-position: center top,center bottom;
+ background-blend-mode: multiply,screen;
+ /* 背景层的混合模式：multiply(乘法混合)，screen(屏幕混合) */
+ }
+```
+4. 响应式背景图片：请为一个名为.responsive-image的类设置背景图片，并使用媒体查询确保在不同屏幕尺寸下显示不同的背景图片。
+
+关键代码：
+```css
+.responsive-image{
+ background-image: url(./background.jpg);
+ }
+ @media(max-width:600px){
+ .responsive-image{
+ background-image: url(./background.jpg);
+ }
+ }
+ @media(min-width:601px) and (max-width:900px){
+ .responsive-image{
+ background-image: url(./b1bc4b11692da49716a4ba1e08a55a2f.jpg);
+ }
+ }
+ @media(min-width:901px){
+ .responsive-image{
+ background-image: url(./background.jpg);
+ }
+ }
+```
+5. 背景属性与伪元素：请为一个名为.before-element的类的第一个伪元素::before设置背景图片，并确保伪元素在元素的顶部居中显示。
+
+关键代码：
+```css
+.before-element::before{
+ content: '';
+ /* 必须设置content属性，即使没有内容 */
+ background-image: url(./background.jpg);
+ background-position: center top;
+ position: absolute;
+ /* 绝对定位伪元素相对于其父元素 */
+ background-repeat: no-repeat;
+ width: 500px;
+ height: 500px;
+ }
+```
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/2024.9.30\350\203\214\346\231\257\345\261\236\346\200\247-\346\270\220\345\217\230.md" "b/\345\220\264\344\275\263\351\242\226/2024.9.30\350\203\214\346\231\257\345\261\236\346\200\247-\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f3e4dd8d64f00bf78ec1d12860243163ee309938
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/2024.9.30\350\203\214\346\231\257\345\261\236\346\200\247-\346\270\220\345\217\230.md"
@@ -0,0 +1,93 @@
+# 背景原点：`backgroung-origin`属性
+`background-origin`属性：控制背景从什么地方开始显示
+```css
+/* 从padding-box 内边距开始显示背景图 */
+background-origin:padding-box;/*默认值 */
+/* 从border-box 边框开始显示背景图 */
+background-origin: border-box;
+/* 从content-box 内容区域开始显示背景图 */
+background-origin:content-box;
+/* */
+```
+如果属性值设置成了`border-box`，那边框部分也会显示图片
+# `backgroung-clip`属性:设置元素的背景(背景图片或颜色)是否延伸到边框下面
+`background-clip:content-box;`超出的部分，将裁减掉。
+* `border-box`超出border-box的部分，将剪裁掉
+* `padding-box`超出padding-box的部分，将剪裁掉
+* `content-box`超出content-box的部分，将剪裁掉
+```css
+background-origin: border-box;
+background-clip: content-box;
+```
+上方代码的意思是，背景图片从边框部分开始剪裁，但是，超出内容区域的部分将被剪裁
+# 渐变
+渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
+
+渐变分为：
++ 线性渐变：沿着某条直线朝一个方向产生渐变效果。
++ 径向渐变：从一个中心点开始沿着四周产生渐变效果。
++ 重复渐变。
+1. 滚动效果图
+关键代码(css)
+```css
+ * {
+ margin: 0px;
+ padding: 0px;
+ }
+ div{
+ width: 100%;
+ height: 100vh;
+ line-height: 100vh;
+ font-size: 20vh;
+ text-align: center;
+ color: wheat;
+ background: gray;
+ background-attachment: fixed;
+ }
+
+ .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);
+ }
+```
+
+2. 渐变效果图
+关键代码(css)
+```css
+ div{
+ width: 600px;
+ height: 100px;
+ border: 1px solid;
+ margin: 10px;
+ }
+ .d1 {
+ background: linear-gradient(45deg,
+ yellow 0%,
+ yellow 25%,
+ blue 0%,
+ blue 50%,
+ red 0%,
+ red 75%,
+ green 0%,
+ green 100%);
+ }
+ .d2{
+ background: linear-gradient(90deg,
+ black 0%,
+ black 25%,
+ white 0%,
+ white 50%,
+ black 0%,
+ black 75%,
+ white 0%,
+ white 100%);
+ }
+```
+
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/6dba2cb8f394b609dcd76b66a030dee1.jpeg" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/6dba2cb8f394b609dcd76b66a030dee1.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..a78c91395d0e33c5af19f2f70cb5540fa4865b02
Binary files /dev/null and "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/6dba2cb8f394b609dcd76b66a030dee1.jpeg" differ
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.11.html" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.11.html"
new file mode 100644
index 0000000000000000000000000000000000000000..881e78bac3af61a9eaf10aa7237fa190652ca5c4
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.11.html"
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Document
+
+
+
+
+ 徐志摩
+ 李白
+ 郑板桥
+ 苏轼
+
+
+
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.13.html" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.13.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d4ff38b4fd9ac46376322922f4cf0b625e0d5920
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\344\275\234\344\270\232/9.13.html"
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+ 
-
+
+
+
标题1
+ 标题2
+ 标题3
+ 标题4
+ 标题5
+ 标题6
+ ```
+
+2. 注释
+ ```html
+
+ 可以Ctrl+/ 快捷注释
+ ```
+3. 段落标签p
+ ```html
+ 段落标签
+ p标签是一个文本级标签，p里面只能放文字、图片、表单元素
+ ```
+4. 水平线标签hr
+ ```html
+
+ 属性：
+ size=" " 设定水平线的粗细
+ width=" "设置水平线的长度
+ color=" "设置线条颜色
+ noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。
+ ```
+5. 换行标签br
+ ```html
+
+ ```
+6. 居中标签center
+ ```html
+
+ 段落
+
+ ```
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.13.md" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.13.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1016285f4141d9ba99ea620457f06f54c5299852
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.13.md"
@@ -0,0 +1,40 @@
+# 字体标签
+
+## 转义字符
+* ` ` 空格
+* `<` 小于号 <
+* `>`大于号 >
+* `&` 符号 &
+* `"` 双引号
+* `'` 单引号
+* `©` 版权 @
+* `™` 商标TM
+* `绐` 文字`给`，#32464是汉字`给`的编码
+
+## 上标和下标
+```html
+H2O 下标
+H2O 上标
+```
+## 超链接
+1. 外部链接：链接到外部文件
+```html
+点我点我
+target="_blank"属性是打开一个新的窗口
+```
+2. 锚链接：从页面的不同位置进行跳转
+```html
+
+回到顶部
+```
+3. 邮件链接
+```html
+点击进入我的邮箱
+点击之后，会弹出outlook
+```
+### 超链接的属性
+` `
+* href:目标URL
+* title:悬停时出现的文本
+* name：和id的锚链接用法相同
+* target：用什么方式打开目标页面，一般用_blank,表示在新的窗口打开
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.14.md" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.14.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9aadf0e630ddd4236bbe3806bd3815c1285a8d9f
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.14.md"
@@ -0,0 +1,19 @@
+# 列表标签
+## 无序列表``，每一项是`- `
+1. 属性：type="属性值"；属性值：disc（实心圆点，默认）、square实心方点、circle空心圆
+2. 列表之间是可以嵌套的
+## 有序列表`
`,里面每一项是`- `
+## 定义列表`
`
+1. dl的子元素只能是dt和dd
+2. `- `是列表标签，是必须的；可以一个dt配很多个dd
+# 表格标签`
`
+1. 每行``组成的，每行是由每个单元格`| `组成的
+2. 属性：
++ border：边框
++ width：宽度
++ height：高度
++ bordercolor：边框颜色
+3. 单元格的合并：colspan：横向合并；rowspan：纵向合并
+4. ` | `：加粗的单元格
+5. ``：表格的标签
+6. 标签：``、` |
`、``；顺序任意，如果使用此标签，数据可以边获取边显示
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.4Markdown\350\257\255\346\263\225.docx" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.4Markdown\350\257\255\346\263\225.docx"
new file mode 100644
index 0000000000000000000000000000000000000000..c39bc177b45a1c10aac5c76ca11476c203e27823
Binary files /dev/null and "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.4Markdown\350\257\255\346\263\225.docx" differ
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.9Web.md" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.9Web.md"
new file mode 100644
index 0000000000000000000000000000000000000000..186e1a5273ce34e0ec119a344052520c027c48bf
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/9.9Web.md"
@@ -0,0 +1,16 @@
+# Web
+## 认识Web
+1. Web：全球广域网，也称为`万维网`
+2. 网页：网页是构成网站的基本元素。
+3. 浏览器：网页运行的平台，`进行人机交互`
+
+## Web的标准
+1. W3C组织：万维网联盟组织，指定统一的标准
+2. Web标准：
+ * 结构标准HTML：进行整理与分类。
+ * 表现标准css： 设置网页的样式，颜色大小等。
+ * 行为标准JS ：进行人机交互
+3. Web前段分三层：
+ * HTML：超文本标记语言，`结构`
+ * CSS：层叠样式表，`样式`
+ * JS：JavaScript，`行为`
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/\346\200\235\347\273\264\345\257\274\345\233\276.md" "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/\346\200\235\347\273\264\345\257\274\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8d8e820a788ac173d1e393f0f8034e50338979ed
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/Html5+css3\347\254\224\350\256\260/\346\200\235\347\273\264\345\257\274\345\233\276.md"
@@ -0,0 +1,11 @@
+@startmindmap
+ * jgvoier
+ * jnowierg
+ * NNYH6
+ * oerinhvo
+ * MYRN
+ * tbhe45yg3
+ @endmindmap
+
+
+ 按Alt+D
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\351\242\226/md\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/\345\220\264\344\275\263\351\242\226/md\345\237\272\347\241\200\350\257\255\346\263\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3b49efc00b951b4e0d87b50943d9f43c16abc16d
--- /dev/null
+++ "b/\345\220\264\344\275\263\351\242\226/md\345\237\272\347\241\200\350\257\255\346\263\225.md"
@@ -0,0 +1,47 @@
+# 一级标题
+## 二级标题
+
+[我是百度](http://baidu.com)
+
+*来也空空，去也空空，也愿化作长风一去不归*
+
+*斜体*
+
+**加粗**
+
+***斜体加粗***
+
+```
+段落的上下各空一行，可以起到换行的效果
+```
+
+> 段落的引用
+```js
+加上js属于高亮，会使内容改变颜色
+console.log('我是娜娜')
+```
+`单个引用`
+1. 有序列表
+ 1) 正方形
+ 2) 长方形
+ 3) 菱形
+2. 圆形
+3. 锥形
++ 无序列表
+ - 水果
+ * 苹果
+ * 香蕉
+ - 零食
+ - 蔬菜
++ 生活用品
++ 家庭用品
+
+```js
+| 标题一 | 标题二 | 标题三 |
+| :- | :-: | -: | {改变标题的对齐方式，左对齐，居中，右对齐}
+| 单元格1 | 单元格2 | 单元格3 |
+
+```
+| 标题一 | 标题二 | 标题三 |
+| :- | :-: | -: |
+| 单元格1 | 单元格2 | 单元格3 |
diff --git "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" "b/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md"
deleted file mode 100644
index 90824d654dfb77c07abc5067b73cdf1b7c1e99b3..0000000000000000000000000000000000000000
--- "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md"
+++ /dev/null
@@ -1,105 +0,0 @@
-# 今天天气很好，40多度，老胡很帅呆
-
-## 今天讲了git的流程，特画图如下，快夸我
-
-
-
- 我是没有感情的文字
-
-我是百度
-
-[我也是百度](http://baidu.com)
-
-一级标题
-二级标题
-
-# 一级标题
-
-## 二级标题
-
-斜体
-
-*斜体*
-
-**粗体**
-
-***粗斜体***
-
-> 我是一段引用
-
-
-比如我这里需要使用一个`dom`标签，这个`dom`标签是指`font`
-
-如下代码可以说明若干问题：
-
-```js
-console.log('我是女生，爱哭的女生')
-
-```
-
-有序列表
-
-1. 列表
- 1. 还是列表
- A. 总是列表
- 2. 还是列表
- 3. 还是列表
- 4. 还是列表
-2. 列表
-3. 列表
-
-
-18) 第一项
-2) 第二项
-3) 第三项
-
-i. 第一项
-ii. 第二项
-iii. 第三项
-
-a. 第一项
-b. 第二项
-c. 第三项
-
-无序列表
-
-我是新增行
-
-+ 无序列表
- + 我还是
- + 总是
- + 天天向上
- + 总是
- + 总是
- + 总是
- + 我还是
- + 我还是
- + 我还是
- + 我还是
-+ 无序列表
- - gd gd
- - 悠悠岁月
- - 悠悠岁月
- - 悠悠岁月
- - 悠悠岁月
- - gd gd
- - gd gd
- - gd gd
- - gd gd
-+ 无序列表
-+ 无序列表
- * 星星眨眼
- * 这个天
- * 这个天
- * 这个天
- * 星星眨眼
- * 星星眨眼
- * 星星眨眼
-+ 无序列表
-
-
-| 左对齐 | 居中 | 右对齐 |
-| :- | :-: | -: |
-| 单元格1 | 单元格2 | 单元格3 |
-| 单元格4 | 单元格5 | 单元格6 |
-
diff --git "a/\350\200\201\350\203\241/imgs/img01.jpg" "b/\350\200\201\350\203\241/imgs/img01.jpg"
deleted file mode 100644
index 9a379cf5f0681088cca4da476e10125b29ad16e5..0000000000000000000000000000000000000000
Binary files "a/\350\200\201\350\203\241/imgs/img01.jpg" and /dev/null differ