Html
图片标签
<img src="1.png" alt="这是一个图片" title="图片">超链接标签
target="_blank":打开新窗口跳转页面
<a href="www.baidu.com" target="_blank">点击跳转</a>音频
<video src="music.mp3" controls loop autoplay> </video>视频
<video src="vue.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> <td>90</td> <td>95</td> <td>98</td> </tr> <tr> <td>李四</td> <td>88</td> <td>95</td> <td>99</td> </tr> </table>表单
45
文本框
placeholder:显示占位文本
<input type="text" placeholder="请输入文字">单选框
常用属性 作用
name 单选功能，同组只能选一个
checked 默认选中
男<input type="radio" name="gender" checked> 女<input type="radio" name="gender">上传文件
multiple属性可以实现文件多选功能
<input type="file" multiple>下拉标签
城市 <select> <option>北京</option> <option>上海</option> <option>广州</option> <!--selected表示默认选中--> <option selected>深圳</option> </select>文本域标签
可以输入多行文本的标签 <textarea></textarea>label标签
按钮
要想按钮起作用,要把表单控件和按钮放在一个form里 <form action="www.baidu.com"> 用户名:<input type="text"> <br> 密码:<input type="password"> <br> <button type="button">按钮</button> <button type="reset">重置</button> <button type="submit">提交</button> </form>CSS
css引入位置
标签选择器
使用标签名称选择标签
div { color: red; font-size: 50px; }类选择器
使用 .类名 选择标签
.cls1 { color: blue; font-size: 50px; }id选择器
使用 #id 选择标签
<div id="id1"></div>#id1 { color: green; font-size: 50px; }通配符选择器
使用 * 选择所有的标签
* { color: yellow; }文字控制属性
复合选择器
后代选择器
会选择所有的后代，包括儿子，孙子，重孙子
div span{ color: red; }子选择器
使用 > 号，只会选择儿子标签
div>span{ 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> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>首先是找ul下的li标签，具体就是第一个li
ul li:first-child { background-color: pink; }伪元素选择器
<div>爱</div>div::before{ content:"老鼠" } div::after{ content:"大米" }盒子模型
默认情况下加内边距会撑大盒子
内容溢出
外边距问题
外边距合并
塌陷问题
行内元素内外边距问题
圆角
阴影
浮动
浮动:可以让块级元素在同一行显示
设置了浮动的盒子会脱标
<div class="left"></div> <div class="right"></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-between
space-around
space-evenly
侧轴对齐方式
stretch:默认效果
center
flex-start
flex-end
修改主轴方向
弹性伸缩比
<div class="father"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></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-start
flex-end
center
space-between
space-around
space-evenly
定位
相对定位
position:relative
特点:
1.改变的位置的参照物是自己原来的位置
2.不脱标，占位
3.显示模式改变特点:不改变显示模式
绝对定位
position:absolute(子绝父相)
特点:
1.脱标不占位
2.改变的位置的参照物是祖先元素,如果所有的祖先元素都没有定位,参照浏览器可视区该位置
3.显示模式改变特点:具备了行内块的特点(可以设置宽高)
居中定位
1.使用margin-left,margin-top
2.使用transform:translate(50%, 50%)
固定定位
特点:
1.脱标,不占位
2.参照物:改变位置的参照物是浏览器窗口
3.显示模式改变特点:行内块
黑色盒子没加绝对定位
黑色盒子加了绝对定位：
1.黑色盒子脱标
2.黑色盒子相对窗口位置不会变
堆叠顺序
加z-index改变显示顺序，数字越大越上
想要两个元素用 z-index 比较层级，二者必须是兄弟节点
<div class="box1"> box1 </div> <div class="box2"> 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; }垂直对齐方式
默认情况下是基线对齐，图片下面有空白区域
给占位子大的元素加属性，这里是给图片标签加属性
只要不是基线对其图片都不会有下边的空白边距
middle
top
bottom
过渡属性
透明度
光标类型
平面转换
平移
旋转
改变转换原点
多重转换
缩放
倾斜
渐变
线性渐变
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 lang="en"> <head> <meta charset="UTF-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 lang="UTF-8"> <head> <meta charset="UTF-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 class="cube"> <div class="front">前面</div> <div class="back">后面</div> </div> </body> </html>空间缩放
动画
animation属性
数度曲线
匀速:linear
分布动画:steps(3)(分3步)
重复次数
无限循环:infinite
动画方向
来来回回播放:alternate
执行完毕时状态
结束时停在结束时的位置:forwards
拆分属性
暂停动画比较重要
JavaScript
输出标签
模板字符串
检测数据类型
类型转换
隐式类型转换
显示类型转换
数组
数组新增
删除数组
删最后一个
删第一个
指定删除
函数
函数表达式
立即函数
(function (x,y) {console.log(x+y)})(2,3)(function () {console.log(1)})()(function () {})()对象
查对象属性
1.普通属性：obj.name
2.带符号的属性：obj['goods-name']
遍历对象
获取dom对象
操作元素内容
操作元素属性
操作元素常用属性
操作元素样式属性
通过style属性操作css
遇到background-color这种属性需要使用小驼峰：box.backgroundcolor='pink'
操作类名操作css
通过classList操作类控制css
操作表单元素属性
例如：
通过操作value的值控制内容
const dom=document.querySelector('input')
dom.value='拉啦啦'
<input type="checkbox" checked>const dom=document.queryselector('input') dom.checked=false自定义属性
<div>let dom =document.queryselector('div'); console.log(dom.dataset.aa)定时器-间歇函数
间歇函数:每隔一定时间自动执行
setInterval开启定时器的返回结果是一个数字id，关闭定时器要通过这个id关闭
clearInterval(定时器的id)关闭定时器
事件监听
事件类型
事件对象
事件对象部分常用属性
环境对象
回调函数
事件流
事件捕获
事件冒泡
阻止冒泡
事件解绑
事件委托
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>let 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)//加给document
dom节点加载完，不等待css样式，图片加载完
元素滚动事件
div有了滚动条是div在滚动，scrollTop是下滚的距离(上部分被卷去的距离)，scrollLeft是向右滚动的距离(左部分被卷去的距离)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画</title> <style> * { margin: 0; } .box { margin: 100px 100px; width: 100px; height: 100px; background-color: pink; overflow: scroll; } </style> </head> <body> <div class="box"> 啊啊啊啊啊啊<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是元素+padding
offsetWidth是比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 lang="zh-CN"> <head> <meta charset="UTF-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 class="box"> <p>测试测试测试</p> </div> <script> let p = document.querySelector('p') console.log(p.offsetLeft) </script> </body> </html>p标签的父级div没有加定位属性，这种情况下p标签的offsetLeft就是10+50+8
如果给div加了相对定位，那么p的offsetLeft就是他和div的左边的距离10
