| 打款发货的理发店 | 打款发货的理发店 | 打款发货的理发店 |
| 打款发货的理发店 | 打款发货的理发店 | 打款发货的理发店 |
| 打款发货的理发店 | 打款发货的理发店 | 打款发货的理发店 |
预格式文本
<
>
这是一个段落。
``` + 2）内部样式 只对当前页面起作用，适合代码量较少的局部样式设置 ```html ``` + 3）外部样式 提高了代码的重用性和可维护性，实现了内容与结构完全分离 ```html ``` ### 基本选择器 + 1）全局选择器，通用选择器 * + 选中网页所有元素，一般用于重置浏览器默认样式，但这样做会增加浏览器性能消耗，不推荐 + 2）元素选择器 DIV A IMG B P SPAN UL LI TABLE INPUT + 选中所有指定的元素 + 3）类选择器 + CLASS名字可以重复，CLASS名字可以起多个，用空格隔开 + 适合选择某一类具有相同样式的元素 + class名不能用数字开头，可以用下滑线或者短横线，不适合用驼峰名命 ```html ``` ```html ``` + 4）ID选择器 + ID名字唯一 + 适合为某个单一的元素设置特有属性 ```html ``` + 选择器优先级(权重)： + 选择范围越广的选择器，优先级越低，渣男的爱不值钱，越专一越珍贵 + 行内样式>ID选择器>类选择器>元素选择器>全局选择器 + 权重： 1000 100 10 1 1 + 这个上面的值只是一个示意，十个类标签加起来也不如id优先级高 + 优先级最高的是 !important + 优先级相同，后面的代码生效 + 5）合并选择器（分组选择器） + 选择器1,选择器2,...{} + 提取共同样式，精简代码数量 ### 组合选择符空格: 后代 > : 子代 + : 相邻兄弟 兄弟表示平级 选中后面的第一个指定的兄弟元素 ~ : 通用兄弟 选中后面的所有指定的兄弟元素### Css基础样式 + 文本属性 + 字体属性 + 列表样式 + 背景属性 + 1、 文本属性 + 文本颜色：color 颜色关键字，十六进制颜色，rgb颜色 rgba颜色 + 单词间隔：word-spacing 识别单词，增加单词间距 + 字符间隔：letter-spacing 字 或 者 字母之间增加间距 + 行间距：line-height 单行居中 + 文本缩进：text-indent 可以负值 百分比 + 文本水平对齐：text-align 默认值left ，center right + 转换大小写：text-transform uppercase大写 lowercase小写 capitalize首字母大写 + 文本修饰：text-decoration none/underline/overline/line-through + 处理空白字符： white-space 默认：normal 常用来设置禁止换行nowrap + 溢出处理：overflow：默认：visible hidden 、scroll、aotu + 文本溢出处理：text-overflow clip/ellipsis(省略号) + 经常用上面三个样式处理超长标题省略号处理,注意要给父元素设置 + 2、 字体属性 + 字体风格：font-style 默认normal 设置斜体：italic + 指定字体：font-family：微软雅黑，宋体，楷体 有些特殊字体无法识别，常用的放在后面 + 字体大小：font-size：使用单位：绝对值px ，cm/mm，移动端：相对值em，rem 根据父元素或者html的字体大小折算 + 字体粗细：font-weight bold 加粗，100-900 + 字体设置可以缩写：font：font-style font-weight font-size/line-height font-family + 3、 列表样式 + 列表默认会有上下的margin，和左侧的padding，每个li还有个圆点标记 + 无序列表： + • list-style-type none不使用项目标记/disc实心圆/circle空心圆/square（s快儿）实心方块 + • list-style-position outside和inside 标记在文本之外/之内 + • list-style-image 只有一个属性：url（“图片路径”） + 有序列表：默认是数字 + ol.upper-roman {list-style-type:upper-roman;} 大写罗马数字 + ol.lower-alpha {list-style-type:lower-alpha;} 小写英文字母 + 4、 背景属性 + 背景颜色：background-color: 关键字/十六进制/rgb/rgba，同时设置了背景图片，则背景颜色不起作用 + 背景图片：background-image:url(“图片路径”) + 背景图片位置：background-position: 关键字/百分比/xpos ypos 应用场景：雪碧图 + 背景图片平铺：background-repeat: 默认repeat平铺 repeat-x / repeat-y / no-repeat + 背景图片不滚动：background-attachment: fixed + 缩写：background:bg-color bg-image position/bg-size bg-repeat bg-attachment ### 属性选择器： + 标签选择器【属性名】 + 使用中括号来说明是一个属性，可以根据某个属性来选中元素 + 如果中括号中只有一个属性名如：[title]表示选中所有包含这个属性的元素 + [title=xxx] :表示选中所有包含title属性且属性值与xxx完全一致的所有元素 + a[href][title] :选中同时有 href 和 title 属性的 HTML 超链接 + p[class~="important"] : 选择 class 属性中包含 important 的p元素 + [abc^="def"] : 选择 abc 属性值以 "def" 开头的所有元素 + [abc$="def"] : 选择 abc 属性值以 "def" 结尾的所有元素 + [abc*="def"] : 选择 abc 属性值中包含子串 "def" 的所有元素 ### 伪类选择器： + 能被浏览器识别的特殊选择符，用来定义元素在某种状态、行为或者特性下的样式， + 类选择器用点表示，伪类选择器用冒号表示 + 链接的伪类：用来设置a标签不同状态下的样式 + 四个状态，在设置的时候要注意顺序，否则不生效 + a:link {text-decoration:none;} 没被点击之前的样子 + a:visited {text-decoration:none;} 点击过后的样子 + a:hover {text-decoration:underline;} 鼠标经过链接时的样子（悬停） + a:active {text-decoration:underline;} 鼠标点下时候，没抬起来的样子 + input 框的伪类 + input:focus {} input 用于设置获取到焦点后的样式 + 结构伪类 + 选择某个元素的第一个子元素：：first-child + 选择某个元素的最后一个子元素：：last-child + 选择某个元素的第n个子元素：：nth-child(n) 2n /2n-1 /odd/even 3n等 + 选择某个元素的第n个指定的子元素：nth-of-type(n)(父元素包含多个不同子元素时) ### 伪元素选择器 + 是每个元素都有的三头六臂 + ::表示一个伪元素 + ::before + ::after + content:''必须有，否则看不到 ，如需添加文本，可以写在content中 + 默认是行内元素，也可以转换成块级元素，来设置宽高。 + 配合定位可以更灵活 ### 盒子模型 #### 1、border (边框) + 边框样式： border-style:solid ; 实线 dotted（点状线）dashed (虚线) double(双线) + 边框宽度： border-width: 1px; + 边框颜色： border-color: + 可以缩写成 border:1px solid #000 + 如果只设置一个样式：border:solid 默认是黑色的边框，宽度3.3333px + 上面是设置四个边框，也可以单独设置每个边框 + border-top:3px solid #00FF00; + border-left: 3px dotted #0077AA; + border-bottom: 3px dashed #990055; + border-right: 3px double #EE9900; + border-radius 边框半径 + 可以设置四个值，分别是左上角、右上角、右下角、左下角的边框半径 + 也可以设置两个值：第一个值（左上角、右下角）第二个值（右上角、左下角） + 也可以设置一个值：表示四个角都是这个半径 #### 作业 + 方形、圆形、椭圆形、三角形、梯形的几何形状绘制 #### 2.margin 外边距 正值，负值，auto 值设置可以是相对值也可以是绝对值 + 盒子距盒子的距离 + 透明的 + margin:value; 四周 + margin:value value; 上下 左右 + margin:value value value; 上 左右 下 + margin:value value value value; 上 右 下 左 + 可以单独设置margin + margin-top:; + margin-bottom:; + margin-left:; + margin-right:; + 注意： + 1）外边距合并 + 垂直方向上，外边距相撞时，取较大值 + 水平方向上，外边距不合并，两个外边距累加（div浮动后不合并） + 行内元素的外边距只对左、右起作用。 + 2）第一个块级子元素margin-top问题解决 + 1.父元素加overflow:hidden; + 2.父元素或者子元素浮动 + 3.父元素加border:1px solid transpartent; + 4.父元素加padding-top:1px; #### 3.实际宽度：width+padding+border+margin + 1.content(内容) + 块级元素 + content大小 就是你设置宽度、高度的大小，如果内容过多，会在垂直方向超出显示 + 如果不设置高度，content则会被内容撑开，很多时候我们不设置高度 + 行内元素 + 行内元素设置宽高不生效，宽高靠内容撑开 #### 4.padding 内边距 + padding:value; 四周 + padding:value value; 上下 左右 + padding:value value value; 上 左右 下 + padding:value value value value; 上 右 下 左 + + padding-top:; + padding-bottom:; + padding-left:; + padding-right:; + background-clip:(指定背景色区域)默认值：border-box /padding-box/content-box + 注意 + 不能取负值和auto + padding会撑大容器 + 内容距边框的距离 + 行内元素的内边距对左、右、下起作用。 #### 5.IE盒模型 + 组成部分：content+padding+border+margin + 实际宽度：width+margin + width包含了border和padding #### 6.盒模型转换 + box-sizing:content-box; 默认值，标准盒模型 + box-sizing:border-box; IE盒模型 ### 浮动 + 浮动：左浮动和右浮动 ```htnl float ：left /right ``` + 块级元素独占一行，行内元素在一样显示 ：遵循文档流 + 1、浮动以后脱离文档流(在文档中的位置失去了，会重叠),水平排列 + 2、浮动后碰到父元素的边界或者其他浮动元素停止 + 3、浮动起来的元素只有一个层 + 4、浮动后所有的元素变成块级元素 + 5、右浮动会导致顺序问题 + 6、所有子元素都浮动或者绝对定位以后，父元素如果没有设置固定高度，高度会丢失（高度塌陷） 需要清除浮动（给父元素找回高度） + 1）在受影响的元素后面加个空的div，给他设置clear:both; /*清除浮动*/ + 2）给受影响的父元素加overflow属性 + 3）给受影响的父元素加display: flow-root; /*能让父元素感知到子元素的高度*/ + 4) 给受影响的父元素加after 伪类，给伪类设置display：bloac; clear:both; ### 定 位 position + 相对定位：relative + 定位以后不脱离文档流，他原来在文档里位置不丢失 + 定位的基准：基准就是他原来自己的位置 + position:relative + 配合定位的四个属性 top bottom left right + 相对定位可以作为绝对定位的基准。 + 绝对定位： + 定位以后脱离文档流，他原来在文档里位置丢失 + 理解成浮动起来了，它本身的层级也会提高 + 定位的基准： + 1、他会在父元素中逐级向外去寻找，找有没有设置相对定位或者绝对定位,如果找到了，就会以找到的元素作为定位的基准 + 2、没找到，根据我们浏览器窗口进行定位 + 绝对定位：position:absolute + 配合定位的四个属性 top bottom left right 可以给负值，负值就是想相反的方向移动 + 如果不设置高度或者宽度，可以根据上面这四个值获取宽高度 + 利用绝对定位来居中 + 1、不设置子元素宽高，然后可以设置他的四个边的距离一样，使元素居中 + 2、设置了元素宽高度，可以设置四个值都为0，然后加上margin：auto + 固定定位 + position:fixed + 定位以后，不随着网页滚动而变化位置，固定在页面上 + 父元素定位不影响他 + 定位以后脱离文档流，原来的位置丢失了 + 定位基准 ：是浏览器的窗口左上角 + 配合定位的四个属性 top bottom left right + 粘性定位 + position:sticky + 基于浏览器滚动的位置，到那个位置就会不动 + 定位以后原位置保留的 + 必须配合top left right bottom其中一个才能生效 + 堆叠顺序 + 1、必须是配合position 定位来使用，relative absolute fixed sticky + 2、如果元素设置了定位，默认有个属性 z-index = 0 + 3、取值越大，越靠上 ### 弹性盒布局 + 布局的时候非常方便 + 给父元素加的属性 + 1、声明弹性盒模型 display: flex + 2、设置主轴方向： + flex-direction: column /row /row-reverse /column-reverse; + 3、主轴方向对齐方式 + justify-content: flex-start / flex-end /center; + 4、主轴方向分布方式 + justify-content: space-between /space-around /space-evenly + 5、副轴的对齐方式 + align-items: flex-start / flex-end /center; + 弹性盒默认所有元素会在一行显示，如果所有子元素的宽度和超过父元素宽度，会被压缩在父元素的宽度内 + 6、设置弹性盒换行 ： + flex-warp:nowrap / wrap(换行) + 7、当多行的时候设置对齐方式 + align-content:space-between /space-around /space-evenly /flex-start / flex-end /center + 8、flex-flow (了解) + flex-direction flex-wrap这两个属性的缩写 + flex-flow：column wrap /row wrap + 给子元素加的属性 + 1、当子元素没有填满父元素的时候可以让他填满 + flex-grow : 默认0表示不扩展 值表示一个扩展和压缩的比率，可以整数也可以小数 + 2、当子元素宽度超过了父元素的宽度，默认在一行显示，并且把所有的子元素沿着主轴方向进行压缩 + flex-shrink : 默认1表示压缩宽度或者高度 ，值表示一个扩展和压缩的比率，可以整数也可以小数 + 3、基本尺寸 (相当于设置了一个主轴上的尺寸，他比width或者height的级别要高) + flex-basis 默认值是auto 可以设置子元素的宽度或高度的基本尺寸， + 权重（生效程度） max-widtn > flex-basis > width + flex:flex-grow flex-shrink flex-basis + 默认值：flex：0 1 auto ### 变换 transform css3 + 2d translate 偏移 + 值可以是固定的px，也可以百分比 + tanrsform:translateX() + 沿着X轴水平方向进行偏移 + 正值向右偏移负值向左偏移 + tanrsform:translateY() + 沿着Y轴水平方向进行偏移 + 正值向下偏移负值向上偏移 + 简写方式：transform: translate(Xpot,Ypot);中间的值之间要有逗号 + 2d rotate 旋转 + transform:rotateX() rotateY() rotateZ() rotate() + transform-origin（X Y） + 用来设置源点，默认值center + 可以使用百分比，固定值，还有top、left、bottom、right、center来设置 + 允许负值，负值就是向左、向上，偏移 + 偏移源点也可以设置到元素外面，大回环旋转 + 2D scale() 缩放 + transform:scaleX(),scaleY() + 这里设置的数值是缩放的比例，1表示原有比例，小于1表示缩小，大于1表示放大，可以设置小数 + transform:scale(X,Y)简写方式，XY可以单独设置，也可以设置成相同的值，XY相同值可以只写一个 + 2d skew() 斜切 变换中的3d属性： + perspective: 500px;/*全局透视*/ + transform:perspective(500px) rotateY(45deg);/*单独透视*/ + transform-style: preserve-3d;/*设置3d模式，看3d 电影，戴眼镜，不带这个眼镜没有3d效果*/ + 3d translateZ() + translate3d(-50%,-50%,200px) 简写：同时设置xyz的值 + rotate3d(x,y,z,angle) transition 过渡 （这是四个属性的简写方式） + transition-duration /过渡时间 .3s 2s 必需值 + transition-property /过渡的属性 width,height 多个属性要加逗号 all表示所有属性 + transition-timing-function /过渡的时间曲线 linear匀速 ease（默认值）ease-in (先快后慢) ease-out(先慢后快) + transition-delay /过渡的延迟 帧动画 + 1、创建动画： + + @keyframes 动画名 { form { 以什么状态开始 } to { 以什么状态结束 } } + 2、应用动画 + animation: 动画名 时间 延迟 。。。 + animation-name :动画名 可以添加多个动画，如果有多个动画。要用逗号分开 + animation-duration: 动画过渡时间;如果有多个动画。要用逗号分开，单独设置时间 + animation-iteration-count:动画的次数，可以使用数字，表示动画的次数，infinite 一直走 + animation-timing-function:时间的曲线 ， linear匀速 ease（默认值）ease-in (先快后慢) ease-out(先慢后快) steps()分步运行 + animation-direction:动画方向（执行代码的方向）normal/reverse / alternate(交替必须迭代次数超过一次才有效)/ alternate-reverse; + animation-fill-mode: forwards;/*动画完毕后停到最后一帧*/ + animation-delay: 动画延迟，也是写秒或者毫秒 s/ms 当使用缩写的时候要放在第二个时间; + filter: + grayscale(1) 灰度，0-1 + blur(5px); 模糊 具体的像素 背景渐变 + 线性渐变 backgroud-image:linear-gradient + 方向：to left /right/bottom .. 也可以用角度值控制，最后加逗号， + 颜色之前要用逗号分开 ``` html background-image: linear-gradient(45deg ,#8bc34a 0px,#8bc34a 20px, #4caf50 20px, #4caf50 40px); ``` + 重复的线性渐变 ：background-image: repeating-linear-gradient ``` html background-image: repeating-linear-gradient(45deg ,#8bc34a 0px,#8bc34a 20px, #4caf50 20px, #4caf50 40px); ``` + 径向渐变 background-image:radial-gradient() ``` html background-image:radial-gradient(circle at 250px 0px ,#ff0000,#ffff00,#000); ``` 视频： 标签：video 属性 ： + width height 不加单位，默认是px + controls 播放时候用的控件 ，属性名与属性值相同，可以只写controls + autoplay 是自动播放，但是加这个属性并不能真的在网页加载的时候自动播放，要配合muted使用时才可以自动播放 + muted 静音 + poster 视频的封面图片 + loop :循环播放 音频 ： 标签名 ： 属性 ： + controls 播放时候用的控件 ，属性名与属性值相同，可以只写controls + autoplay 是自动播放，但是加这个属性并不能真的在网页加载的时候自动播放，要配合muted使用时才可以自动播放 + muted 静音 + loop :循环播放 ## JavaScript ### 基础入门 ： + js的引入方式： + 1、内部脚本 写在body结束标签前，也就是让页面的dom元素都加载外再执行脚本 + 2、外部脚本 是写在外面的js脚本文件，通过script标签src属性引入进来 + 变量声明 + 变量的命名规范: js 跟html不一样，严格区分大小写,用一些语言话的取名 ,可以使用驼峰命名，不能使用-,他会认为这个是个减号 + var let const 去声明 let 变量名 = 变量值 等号是赋值 + js里有三种弹窗 + alert() 警告 + prompt() 可以提供给你输入内容的弹窗 接收到你输入的内容的字符串 + confirm () 确认弹窗 接收到布尔值true 或者 false + js中的数据类型 + 基本数据类型（传值）:数字number，字符串string，布尔值 true false，undefined，null + 数字number: + 正数、负数、小数 、整数 、0、NaN (not a number) isNaN()有效数字会返回false 不是有效数字返回true + Number() 用来将非数字类型的转换,属于强制的转换，里面的内容必须是全能转换成数字，才能转换，否则就是NaN + parseInt()将一个含有数字字符串转换成整数，从左边开始，遇到非有效数字或者小数点结束转换， + parseFloat() 可以将小数部分也转换成数字，就是能识别出小数点 + 字符串string用引号将字符引起来 双引号、单引号 + 不同的引号不能嵌套 ""+变量+"" + 模板字符串 `` + 可以换行，可以使用${变量} 方式加载变量，而不需要进行字符串的拼接 + 布尔值 boolean 只有true false + Boolean() 将一个非布尔值转换成布尔值 + 判断一个值的布尔类型五种情况是false + 0，'',NaN,null，undefined + ! 表示取反，false变true ，!!相当于将一个值转换成布尔值 + 三个等号 =是赋值 a == b 判断两端是否相等 === 判断两端是否全等，首选判断数据类型，再判断值，必须都相同才是true + undefined 未赋值 + null 空 + js 运算符 + 一元运算符 （只需要一个操作数） + 一个加号（+） + console.log(+b , b); //对一个字符串使用+号,就是将这个字符串转换为数字类型 + console.log(a+b);//子符串拼接 + 两个加号、减号 自增 自减 （++）(--) + 数学运算符 +-*/% + 逻辑运算符 &&与、或 || 非！ + &&两个或以上条件，都得成立 + ||两个或以上条件,满足其中一样就行 短路性 ：第一个条件为true，就不再判断第二个条件了 + ！取反 + 关系运算符 + > < >= <= != + 赋值运算符 = += -= /= %= + 三元表达式 + 条件？满足条件的结果:不满足条件的结果 + js 语句 + 条件判断语句 + if(条件){语句} else {条件不成立执行的语句} + 条件分支语句 + switch..case语句 + case 是条件比对正确执行的代码，可以有多个分支 + break，是跳出switch + default 是上面条件都不满足，最后执行的代码 + 注意：条件判断是全等，也就是数据类型也必须是一样的 + 循环语句 + while循环 + 语法：while （条件） {满足条件的代码} + 适合不知道循环次数的循环 + do while循环 + 语法:do {满足条件的代码} while （条件） + 是先执行一次这个代码，然后再去判断，如果满条件再循环，不满足条件就退出 + for 循环 + 语法： for(let i=0;i<5;i++){满足条件执行的代码} + 字符串的一些方法： + str.length 可以查看字符串的长度 + 字符串拼接 ，可以用concat（）或者+ + 将数字转换为字符串 可以用 num .toString() + 字符串转大写 ：str.toUpperCase() + 去掉字符串前后空格 ： str.trim() + 重复的输入一个字符串： str.repeat() + \是转译符，有的符号具有两种用途，可以用转运符转译 + 字符串的截取 str.slice(a,b) a开始的位置，b结束的位置，负数就是从后开始数 + 字符串查找替换：str3.replace（a，b） a表示查找的内容，b替换的内容 + 查找关键字 str3.indexOf（'关键字'）找到了返回索引，没找到返回-1 + 查找关键字 str3.includes() 找到返回true 没找到返回false + 引用的数据类型 （传址）包括 ：对象{} 、数组[] 、正则/\/ 、时间 Date() + 对象objeck：变量的集合 typeof objeck + 可以使用字面量的方式去生成一个对象 let obj = {} + 已知的属性可以一次性的写入，但是注意要使用键值对的方式，属性名：属性值 之间用冒号分开 + 多个属性键值对，要用逗号分开，除非是最后一个属性 + 属性值可以是任意的数据类型，可以是数字、字符串、布尔值也可以是对象 、函数 、数组等 + 调用对象的某个属性可以用 obj.name 或者 obj['name']的方式 + 后期再添加属性可以用：obj.xxx = sss ,注意这里不能用let var等关键字 + 删除某个属性 可以使用 delete obj.xxx + for in 循环，遍历对象的属性值 + 数组：也是一个对象 用中括号表示[1, 2 ,3] ，元素间用逗号分开，最后的元素后面不用逗号 + 其实就是用来盛放数据的，数组的元素可以任意的数据类型，可以是数字、字符串、布尔值也可以是对象 、函数 、数组等 + 数组的length，表示数组元素的个数，我们也叫他数组的长度 + 数组的length是可以操控数组的，如果减少了数组的length，表示删除了数组中的某些元素 + arr[arr.length] ,用来为数组最后面添加一个元素 + 数组的方法 ：Array + concat（） 不会改变原数组，返回一个拼接后生成的新数组 + 给数组添加新元素，可以使用unshift（）在最前面添加 ，push（）在最后添加 + 删除元素 shift（） ，pop() + splice()，在数组的指定位置删除，并且添加元素 + 参数一:是从哪开删除 ，参数二：要删除几个,参数三开始：添加的内容 + 即可删除又可以添加，如果第二个参数为0 则不删除，如果没有第三个参数则不添加 + split()可以将字符串转换为数组 括号内可以设置转换的字符 + join（）可以将数组转为字符串 + 函数 function typeof function + 函数的用途：可以代码封装，然后多次使用。或者是在需要的时候调用 + 声明一个函数 只是将代码封装了，并不会调用,调用还要添加事件触发或者直接调用 + 函数的参数: 1、 定义函数的时候指定的参数形参 2、在函数调用的时候,传递的参数叫实参 + 函数的返回值 return的两个用途 1、结束函数，不在执行下面的代码 2、返回运算的结果 + 声明提前 var function + 声明函数的时候有两个隐含的属性会被同时声明产生 + 1.this 指向调用这个函数的主体对象 （上下文） + 2. Arguments 一个参数集合 ,类数组 可以用来接收所有的参数