2023年6月20日发(作者：)

html+css总结+实训day01HTML超⽂本标记语⾔是有⼀个个标签组成，如果我们要创建⼀个HTML⽂档，第⼀⾏必须先声明我们要创建的是⼀个h5页⾯html页⾯值⾬荨有⼀个外层标签，html;所有的标签都要包裹在HTML标签以内 ；…html标签不分（标签名）⼤⼩写；xml要严格区分⼤⼩写；下边有两个字标签，⼀个页⾯的各种信息 页⾯要显⽰的内容中页⾯的标题页⾯的配置，不包国任何内容，单标签Google可以不写⽤于搜索引擎优化跟搜索引擎有关css样式第⼀个地⽅可以写在style属性，任何⼀个标签都有style属性写在head标签中的style标签内写在⼀个外部的css⽂件中，页⾯中可以⽤link标签引⼊；复⽤性⾼写在css⽂件，复⽤性不⾼写在head中的style标签中；⼀般不⽤style属性选择器1、id选择器，以#开头，允许两个id⼀样2、class选择器，以.开头，匹配class相同的标签⼀个标签可以有多个class值，⽤空格分隔；3、元素选择器，直接⽤标签名来命名，匹配标签名相同的标签4、*通配符，匹配所有的标签选择器的优先级范围越⼩优先级越⾼内联样式(标签的style属性)优先级最⾼>id选择器>class>元素>*常⽤样式常⽤单位：⼤⼩：px固定⼤⼩，表⽰像素百分⽐ % 参照⽗元素的⼤⼩vh百分⽐，参照屏幕的⾼度，vw参照屏幕的宽度em 参照的是⽗元素的font-size,1em=⽗元素的font-size;rem参照的是HTML的font-size⾓度deg**********常⽤样式宽度⾼度background 背景⾊，背景图，平铺，背景定位等等background-positon: 背景定位********* background-position: left top;margin外边距padding内边距border边框线，⼤⼩ 样式 颜⾊样式：solid 实线 dashed虚线（线段） dotted虚线（点） inset(凹陷感觉) outset(凸起感觉)border-left…内边距和边框线会会改变元素的实际宽度和⾼度****实际⾼度= height+上边内边距+上线边框线box-sizing: border-box;内边距和边框线都在宽度和⾼度以内绘制display: block,inline,inline-block，none（隐藏模型）,flex将元素转换成弹性模型；**********flex-direction: row-reverse/column-reverse⼦元素flex-grow；1 2 。。弹性⽐例扩展display:none ; 隐藏元素并且脱离⽂档流；*****就是不占⽤任何位置不脱离⽂档流：visibility:hidden;******浮动float: 浮动 脱离⽂档流、left:左浮动，right: 有浮动⼀旦设置了浮动，该元素⾃动变成inline-block;*****clear 清除浮动，在浮动的统计元素中设置，left 清除左浮动， right: 清除有浮动 both: 清除左右浮动清除浮动后，浮动的元素回到了⽂档流，但是仍然保持并排；transform 元素转换3d转换，transform-style: preserve-3d;⽗元素设置镜头的 距离： perspective: 800-1200pxrotateX 沿着x轴旋转； rotateY: 沿着y轴。 rotateZ:。。translateX: 沿着x轴平移。。。rotate 沿着z轴旋转(2d)定位 positionreletive 相对定位 特点：不脱离标准流，参照⽆定位的位置static 静态****absolute 绝对定位：脱离标准流，参照上⼀个⾮static定位的⽗元素fixed 固定定位： 参照屏幕的位置，随着滚动条滚动覆盖规则：1、⾮static覆盖static定位2、后写的定位覆盖先写的3、有z-index覆盖 wu z-indexz-index⼤的覆盖 z-index⼩的动画样式css3中的动画是⼀个相对位置的移动，所以⼀定要定位： relative或者absolute;*********1、定义动画@keyframes 动画名{ 过度效果}@-webkit-keyframes wy{0% {left：0}100% {left: 600px}}@-o-keyframes wy {}2、执⾏动画⽤的是animation；-webkit-animation: wy 1s在选择器中animation:动画名 过度时间 速度曲线（ease默认) 延迟时间（默认是0) 播放次数（默认是1） 偶数次是否逆序 停留位置速度曲线：ease 低速-快-特别慢ease-in 特别慢- 快ease-out 特别快- 越来越慢ease-in-out 特别慢- 快- 减速linear: 匀速播放次数-webkit-animation: wy 3s linear 1s 4infinite⽆限次偶数次，是否逆序normal不逆序 alternate逆序停留位置： forwards 停留在动画执⾏的最后⼀帧上day01下午 jsjs浏览器脚本语⾔，浏览器运⾏js代码动态控制html css 的获取和创建 修改head标签或者body的script标签⾥单独封装js⽂件 ⽤script 标签引⼊如果⽤script标签引⼊ 就不要再标签内写代码了，应该另外再写⼀个script变量let 临时变量const 定义常量var已经废弃，别再使⽤了var的坑var是全局变量typeof 变量名字 返回变量类型js是 弱类型语⾔ 定义变量的啥时候不必预先说明 该变量 是什么类型，赋值的时候 付了什么类型的数值， 该变量就是什么类型js和java直接的关系，语⾔上没有什么关系TS语⾔全程 typescript ：他⽀持所有的js，编码，概念，思维都可以⽤ts使⽤了类型和接⼝： 作⽤是规范了数据类型循环 分⽀判断dom document object model 页⾯对象模型页⾯中每⼀个标签都对应着js中的⼀个页⾯对象标签中的每⼀个属性 都可以通过dom来获取或者设置dom中 事件 为 ⽤户进⾏函数触发的 ⼀种机制事件点击是左键，按下是3个键都⾏******看看回放jqueryjquery 快速获取dom和操作dom的 ⼀种⼯具照⽚墙

2023年6月20日发(作者：)

html+css总结+实训day01HTML超⽂本标记语⾔是有⼀个个标签组成，如果我们要创建⼀个HTML⽂档，第⼀⾏必须先声明我们要创建的是⼀个h5页⾯html页⾯值⾬荨有⼀个外层标签，html;所有的标签都要包裹在HTML标签以内 ；…html标签不分（标签名）⼤⼩写；xml要严格区分⼤⼩写；下边有两个字标签，⼀个页⾯的各种信息 页⾯要显⽰的内容中页⾯的标题页⾯的配置，不包国任何内容，单标签Google可以不写⽤于搜索引擎优化跟搜索引擎有关css样式第⼀个地⽅可以写在style属性，任何⼀个标签都有style属性写在head标签中的style标签内写在⼀个外部的css⽂件中，页⾯中可以⽤link标签引⼊；复⽤性⾼写在css⽂件，复⽤性不⾼写在head中的style标签中；⼀般不⽤style属性选择器1、id选择器，以#开头，允许两个id⼀样2、class选择器，以.开头，匹配class相同的标签⼀个标签可以有多个class值，⽤空格分隔；3、元素选择器，直接⽤标签名来命名，匹配标签名相同的标签4、*通配符，匹配所有的标签选择器的优先级范围越⼩优先级越⾼内联样式(标签的style属性)优先级最⾼>id选择器>class>元素>*常⽤样式常⽤单位：⼤⼩：px固定⼤⼩，表⽰像素百分⽐ % 参照⽗元素的⼤⼩vh百分⽐，参照屏幕的⾼度，vw参照屏幕的宽度em 参照的是⽗元素的font-size,1em=⽗元素的font-size;rem参照的是HTML的font-size⾓度deg**********常⽤样式宽度⾼度background 背景⾊，背景图，平铺，背景定位等等background-positon: 背景定位********* background-position: left top;margin外边距padding内边距border边框线，⼤⼩ 样式 颜⾊样式：solid 实线 dashed虚线（线段） dotted虚线（点） inset(凹陷感觉) outset(凸起感觉)border-left…内边距和边框线会会改变元素的实际宽度和⾼度****实际⾼度= height+上边内边距+上线边框线box-sizing: border-box;内边距和边框线都在宽度和⾼度以内绘制display: block,inline,inline-block，none（隐藏模型）,flex将元素转换成弹性模型；**********flex-direction: row-reverse/column-reverse⼦元素flex-grow；1 2 。。弹性⽐例扩展display:none ; 隐藏元素并且脱离⽂档流；*****就是不占⽤任何位置不脱离⽂档流：visibility:hidden;******浮动float: 浮动 脱离⽂档流、left:左浮动，right: 有浮动⼀旦设置了浮动，该元素⾃动变成inline-block;*****clear 清除浮动，在浮动的统计元素中设置，left 清除左浮动， right: 清除有浮动 both: 清除左右浮动清除浮动后，浮动的元素回到了⽂档流，但是仍然保持并排；transform 元素转换3d转换，transform-style: preserve-3d;⽗元素设置镜头的 距离： perspective: 800-1200pxrotateX 沿着x轴旋转； rotateY: 沿着y轴。 rotateZ:。。translateX: 沿着x轴平移。。。rotate 沿着z轴旋转(2d)定位 positionreletive 相对定位 特点：不脱离标准流，参照⽆定位的位置static 静态****absolute 绝对定位：脱离标准流，参照上⼀个⾮static定位的⽗元素fixed 固定定位： 参照屏幕的位置，随着滚动条滚动覆盖规则：1、⾮static覆盖static定位2、后写的定位覆盖先写的3、有z-index覆盖 wu z-indexz-index⼤的覆盖 z-index⼩的动画样式css3中的动画是⼀个相对位置的移动，所以⼀定要定位： relative或者absolute;*********1、定义动画@keyframes 动画名{ 过度效果}@-webkit-keyframes wy{0% {left：0}100% {left: 600px}}@-o-keyframes wy {}2、执⾏动画⽤的是animation；-webkit-animation: wy 1s在选择器中animation:动画名 过度时间 速度曲线（ease默认) 延迟时间（默认是0) 播放次数（默认是1） 偶数次是否逆序 停留位置速度曲线：ease 低速-快-特别慢ease-in 特别慢- 快ease-out 特别快- 越来越慢ease-in-out 特别慢- 快- 减速linear: 匀速播放次数-webkit-animation: wy 3s linear 1s 4infinite⽆限次偶数次，是否逆序normal不逆序 alternate逆序停留位置： forwards 停留在动画执⾏的最后⼀帧上day01下午 jsjs浏览器脚本语⾔，浏览器运⾏js代码动态控制html css 的获取和创建 修改head标签或者body的script标签⾥单独封装js⽂件 ⽤script 标签引⼊如果⽤script标签引⼊ 就不要再标签内写代码了，应该另外再写⼀个script变量let 临时变量const 定义常量var已经废弃，别再使⽤了var的坑var是全局变量typeof 变量名字 返回变量类型js是 弱类型语⾔ 定义变量的啥时候不必预先说明 该变量 是什么类型，赋值的时候 付了什么类型的数值， 该变量就是什么类型js和java直接的关系，语⾔上没有什么关系TS语⾔全程 typescript ：他⽀持所有的js，编码，概念，思维都可以⽤ts使⽤了类型和接⼝： 作⽤是规范了数据类型循环 分⽀判断dom document object model 页⾯对象模型页⾯中每⼀个标签都对应着js中的⼀个页⾯对象标签中的每⼀个属性 都可以通过dom来获取或者设置dom中 事件 为 ⽤户进⾏函数触发的 ⼀种机制事件点击是左键，按下是3个键都⾏******看看回放jqueryjquery 快速获取dom和操作dom的 ⼀种⼯具照⽚墙