Html图片标签img src1.png alt这是一个图片 title图片超链接标签target_blank:打开新窗口跳转页面a hrefwww.baidu.com target_blank点击跳转/a音频video srcmusic.mp3 controls loop autoplay /video视频video srcvue.mp4 controls loop autoplay /video列表无序列表有序列表定义列表dl dt标题1/dt dd详情11/dd dd详情12/dd dt标题2/dt dd详情21/dd dd详情22/dd dt标题3/dt dd详情31/dd dd详情32/dd /dl表格table tr th姓名/th th语文/th th数学/th th英语/th /tr tr td张三/td td90/td td95/td td98/td /tr tr td李四/td td88/td td95/td td99/td /tr /table表单45文本框placeholder:显示占位文本input typetext placeholder请输入文字单选框常用属性 作用name 单选功能同组只能选一个checked 默认选中男input typeradio namegender checked 女input typeradio namegender上传文件multiple属性可以实现文件多选功能input typefile multiple下拉标签城市 select option北京/option option上海/option option广州/option !--selected表示默认选中-- option selected深圳/option /select文本域标签可以输入多行文本的标签 textarea/textarealabel标签按钮要想按钮起作用,要把表单控件和按钮放在一个form里 form actionwww.baidu.com 用户名:input typetext br 密码:input typepassword br button typebutton按钮/button button typereset重置/button button typesubmit提交/button /formCSScss引入位置标签选择器使用标签名称选择标签div { color: red; font-size: 50px; }类选择器使用 .类名 选择标签.cls1 { color: blue; font-size: 50px; }id选择器使用 #id 选择标签div idid1/div#id1 { color: green; font-size: 50px; }通配符选择器使用 * 选择所有的标签* { color: yellow; }文字控制属性复合选择器后代选择器会选择所有的后代包括儿子孙子重孙子div span{ color: red; }子选择器使用 号只会选择儿子标签divspan{ color: blue; }并集选择器可以同时选择多个标签使用 选中多个标签p1,p2,p3{ color: green; font-size: 50px; }交集选择器选中同时满足多个条件的元素,直接把两个条件连着写/*即是p标签又有box类*/ p.box{ color: yellow; font-size: 40px; }超链接伪类选择器/*点击前*/ a:link{ color: red; } /*点击后*/ a:visited{ color: green; } /*点击时*/ a:active{ color: blue; } /*悬浮时*/ a:hover{ color: yellow; }背景属性背景图background-image背景图平铺方式background-repeat背景图位置background-position背景图缩放background-size背景图固定background-attachment显示模式块:(div)1.独占一行2.宽高属性生效3.默认宽度是父级的100%行:(span)1.一行可以存在多个2.宽高不生效3.宽高由内容撑开行内块:(图片)1.一行可以有多个2.宽高属性生效3.宽高默认由内容撑开转化显示模式结构伪类选择器ul li1/li li2/li li3/li li4/li li5/li li6/li li7/li li8/li /ul首先是找ul下的li标签具体就是第一个liul li:first-child { background-color: pink; }伪元素选择器div爱/divdiv::before{ content:老鼠 } div::after{ content:大米 }盒子模型默认情况下加内边距会撑大盒子内容溢出外边距问题外边距合并塌陷问题行内元素内外边距问题圆角阴影浮动浮动:可以让块级元素在同一行显示设置了浮动的盒子会脱标div classleft/div div classright/div.left{ width: 50px; height: 50px; background-color: skyblue; float: left; } .right{ width: 50px; height: 50px; background-color: brown; float: right; }左边的盒子设置了浮动所以两个盒子跑一行了.left { width: 50px; height: 50px; background-color: skyblue; float: left; } .right { width: 100px; height: 100px; background-color: brown; }左边的盒子设置了浮动所以两个盒子跑一行了.left { width: 50px; height: 50px; background-color: skyblue; } .right { width: 100px; height: 100px; background-color: brown; float: left; }上方如果存在标准流块级盒子这一整行就被占用浮动元素会自动换到下一行靠左放置上方元素同样是浮动元素就可以挤在同一行横向排列。.left { width: 50px; height: 50px; background-color: skyblue; float: left; } .right { width: 100px; height: 100px; background-color: brown; float: left; }两个都设了浮动则依次排列Flex弹性布局给父级元素设置display:flex弹性布局子元素可以自动挤压或拉伸挤压当一行放不下所有的弹性盒子时弹性盒子的宽会被挤压变小拉伸当没有给弹性盒子设置高度时会把高度拉伸为父容器的高度创建flex容器主轴对齐方式space-betweenspace-aroundspace-evenly侧轴对齐方式stretch:默认效果centerflex-startflex-end修改主轴方向弹性伸缩比div classfather div classson1/div div classson2/div div classson3/div /div.father { background-color: skyblue; display: flex; height: 300px; align-items: flex-end; } .son1 { background-color: brown; width: 200px; height: 100px; margin-right: 20px; } .son2 { background-color: blue; height: 100px; margin-right: 20px; flex: 2; } .son3 { background-color: pink; height: 100px; margin-right: 20px; flex: 1; }盒子2和盒子3设置了弹性伸缩比对应宽度为(总宽➖已知盒子宽度)×比值盒子2为减去盒子1的剩下的三分之二盒子3为减去盒子1的剩下的三分之一弹性盒子换行父级没加flex-wrap属性时盒子满了会自动挤压父级加了flex-wrap属性后会自动换行行对齐方式没写这个属性的时候默认flex-startflex-endcenterspace-betweenspace-aroundspace-evenly定位相对定位position:relative特点:1.改变的位置的参照物是自己原来的位置2.不脱标占位3.显示模式改变特点:不改变显示模式绝对定位position:absolute(子绝父相)特点:1.脱标不占位2.改变的位置的参照物是祖先元素,如果所有的祖先元素都没有定位,参照浏览器可视区该位置3.显示模式改变特点:具备了行内块的特点(可以设置宽高)居中定位1.使用margin-left,margin-top2.使用transform:translate(50%, 50%)固定定位特点:1.脱标,不占位2.参照物:改变位置的参照物是浏览器窗口3.显示模式改变特点:行内块黑色盒子没加绝对定位黑色盒子加了绝对定位1.黑色盒子脱标2.黑色盒子相对窗口位置不会变堆叠顺序加z-index改变显示顺序数字越大越上想要两个元素用 z-index 比较层级二者必须是兄弟节点div classbox1 box1 /div div classbox2 box2 /div.box1 { height: 300px; width: 300px; background-color: pink; position: absolute; z-index: 5; } .box2 { background-color: skyblue; height: 300px; width: 300px; position: absolute; left: 100px; top: 100px; }垂直对齐方式默认情况下是基线对齐图片下面有空白区域给占位子大的元素加属性这里是给图片标签加属性只要不是基线对其图片都不会有下边的空白边距middletopbottom过渡属性透明度光标类型平面转换平移旋转改变转换原点多重转换缩放倾斜渐变线性渐变div { margin: 100px 200px; width: 100px; height: 100px; background-color: pink; transition: all 1s; background-image: linear-gradient(90deg, red 80%, green) }径向渐变div { margin: 10px 200px; width: 100px; height: 100px; background-color: pink; transition: all 1s; background-image: radial-gradient(50px 20px at center center, red, green) }空间转换平移默认情况下看不到z轴平移的效果视距!DOCTYPE html html langen head meta charsetUTF-8 title视距/title style *{ margin:0; } div{ margin: 100px 100px; width: 100px; height: 100px; background-color: pink; transition: all 1s; } div:hover{ transform:translateZ(100px) } body{ perspective:1000px } /style /head body div/div /body /html旋转立体呈现!DOCTYPE html html langUTF-8 head meta charsetUTF-8 title立体呈现/title !-- transform-style 属性值 flat子级处于平面中 preserve-3d子级处于3D空间中 -- !-- 步骤 1.父元素添加transform-style:preserve-3d 2.子级定位在父级盒子里面 3.调整子盒子的位置(位移或者旋转) -- style * { margin: 0; } .cube { position: relative; margin: 100px auto; width: 200px; height: 200px; background-color: pink; transition: all 3s; /* 开启3D空间子元素可在三维坐标系排布 */ transform-style: preserve-3d; } .cube div { left: 0; top: 0; position: absolute; width: 200px; height: 200px; } .front { background-color: orange; transform: translateZ(100px); /* 沿Z轴正向移出朝向观察者 */ } .back { background-color: green; transform: translateZ(-100px); /* 沿Z轴负向移出远离观察者 */ } .cube:hover { transform: rotateY(90deg); } /style /head body div classcube div classfront前面/div div classback后面/div /div /body /html空间缩放动画animation属性数度曲线匀速:linear分布动画:steps(3)(分3步)重复次数无限循环:infinite动画方向来来回回播放:alternate执行完毕时状态结束时停在结束时的位置:forwards拆分属性暂停动画比较重要JavaScript输出标签模板字符串检测数据类型类型转换隐式类型转换显示类型转换数组数组新增删除数组删最后一个删第一个指定删除函数函数表达式立即函数(function (x,y) {console.log(xy)})(2,3)(function () {console.log(1)})()(function () {})()对象查对象属性1.普通属性obj.name2.带符号的属性obj[goods-name]遍历对象获取dom对象操作元素内容操作元素属性操作元素常用属性操作元素样式属性通过style属性操作css遇到background-color这种属性需要使用小驼峰box.backgroundcolorpink操作类名操作css通过classList操作类控制css操作表单元素属性例如通过操作value的值控制内容const domdocument.querySelector(input)dom.value拉啦啦input typecheckbox checkedconst domdocument.queryselector(input) dom.checkedfalse自定义属性div>let dom document.queryselector(div); console.log(dom.dataset.aa)定时器-间歇函数间歇函数:每隔一定时间自动执行setInterval开启定时器的返回结果是一个数字id关闭定时器要通过这个id关闭clearInterval(定时器的id)关闭定时器事件监听事件类型事件对象事件对象部分常用属性环境对象回调函数事件流事件捕获事件冒泡阻止冒泡事件解绑事件委托ul li1/li li2/li li3/li li4/li li5/li /ullet ul document.querySelector(ul) a.addEventListener(click, function (e) { e.target.style.color red })原本给li注册的点击事件需要给所有li都注册一遍现在通过事件委托只给ul注册一次通过e拿到点的是哪个li标签从而完成需求阻止元素默认行为页面加载事件load:window.addEventListener(load,fn)//加给window等所有的dom节点css样式图片都加载完成触发这个属性也可以加给dom元素比如img.addEventListener(load,fn)DOMContentLoaded:document.addEventListener(DOMContentLoaded, fu)//加给documentdom节点加载完不等待css样式图片加载完元素滚动事件div有了滚动条是div在滚动scrollTop是下滚的距离(上部分被卷去的距离)scrollLeft是向右滚动的距离(左部分被卷去的距离)!DOCTYPE html html langzh-CN head meta charsetUTF-8 title动画/title style * { margin: 0; } .box { margin: 100px 100px; width: 100px; height: 100px; background-color: pink; overflow: scroll; } /style /head body div classbox 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊br 啊啊啊啊啊啊 /div script let box document.querySelector(.box) box.addEventListener(scroll, function () { console.log(当前滚动距离, this.scrollTop) }) /script /body /html获取整个页面滚动的距离就是html标签滚动的距离document.documentElement就是代表html标签页面尺寸事件获取元素宽高clientWidth和offsetWidth都可以获得元素的宽区别:clientWidth是元素paddingoffsetWidth是比clientWidth多了一个边框线border.box { display: inline-block; height: 100px; background-color: pink; }let a document.querySelector(.box).clientWidth console.log(a)offsetLeft,offsetTop可以获得距离这个元素有定位属性的父级的左上距离.box { display: inline-block; height: 100px; background-color: pink; width: 100px; margin: 50px; }let div document.querySelector(.box) console.log(div.offsetLeft)得到的值是58是50左外边距8body的默认外边距!DOCTYPE html html langzh-CN head meta charsetUTF-8 title动画/title style .box { display: inline-block; height: 100px; background-color: pink; width: 100px; margin: 50px; } p { height: 20; width: 20; background-color: green; margin: 10px; } /style /head body div classbox p测试测试测试/p /div script let p document.querySelector(p) console.log(p.offsetLeft) /script /body /htmlp标签的父级div没有加定位属性这种情况下p标签的offsetLeft就是10508如果给div加了相对定位那么p的offsetLeft就是他和div的左边的距离10