HTML新特性
div 没有语义，可以专门的有语义的标签
多媒体标签
视频：
autoplay 自动播放
muted 静音播放（谷歌浏览器禁止自动播放，要加muted才可以）（音频加muted也不能自动播放）
controls 播放控件
controls="controls"
loop 自动循环播放
poster 未播放时的图片显示
音频：和视频基本一样
input标签
如果输入不正确，点击确认按钮时会有提醒
有自带的日期选择
新增的表单属性
required
表单内容必须书写，不能为空
<form action="">
<input type="search" required="required">
<input type="submit" value="提交">
</form>
placeholder
提示信息
<input type="search" required="required" placeholder="lyt">
<input type="submit" value="提交">
修改提示信息的颜色：
input::placeholder {
color: pink;
}
autofocus
自动聚焦，光标闪动
autofocus="autofocus"
autocomplete
提示之前输入过的内容
默认时打开的 on/off
一般我们要关上
multiple
用于选择文件的，默认只能选择一个文件，加了multiple可以选多个
CSS新特性
属性选择器
input[value] {
color: pink;
}
input[type=text] {
color: aqua;
}
选择属性值开头相等的元素
class^=
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<div class="icon5">5</div>
div[class^=icon] {
color: pink;
}
选择属性值结尾相同的元素
class&=.....
选择属性值含有相同的元素
class*=.....
结构伪类选择器
ul :first-child {
color: pink;
}
ul :last-child {
color: blueviolet;
}
nth-child 选择一个或多个特定子元素，小括号里加序号，偶数，奇数，n(选择所有子元素了)
ul :nth-child(2) {
color: red;
}
ul :nth-child(even) {
color: red;
}
ul :nth-child(n) {
color: red;
}
2n(偶数)
2n+1(奇数)
n+5 (5,6,7,8,9) 从第五个开始
nth-of-type选择器
和nth-child 基本一样
区别：
nth-child 对所有孩子都进行排序，先看后面，把第一个孩子选出来，再看和前面是否匹配得上，不匹配就没有效果
section div:nth-child(1) {
background-color: red;
}
nth-of-type 先看指定的元素，再看第几个孩子
section div:nth-of-type(1) {
background-color: red;
}
伪元素选择器（重点）
CSS创建标签，减少嵌套标签
::before ::after
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
content: '我';
}
div::after {
content: 'lyt';
}
before和after都是行内标签，不能直接给它们设置大小，要用display：inline-block
伪元素选择器和标签选择器一样权重为1
案例：
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '';
color: red;
}
结构更简单了，只用了一个div
土豆播放页面优化案例
原来的：
.tudou {
position: relative;
width: 480px;
height: 360px;
margin: 30px auto;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(image.png) no-repeat center;
}
.tudou:hover .mask {
display: block;
}
用伪元素选择器后：
效果完全一样
.tudou {
position: relative;
width: 480px;
height: 360px;
margin: 30px auto;
}
.tudou::before {
content: '';
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(image.png) no-repeat center;
}
.tudou:hover::before {
display: block;
}
伪元素清除浮动
伪元素清除浮动是额外标签法的升级优化
父级添加:after伪元素
clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
双伪元素清除浮动
.clearfix:before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
黑盒子本来应该排在粉盒子，紫盒子下面的，因为没有清除父盒子的浮动，所以导致影响了父盒子外的黑盒子
CSS3盒子模型
由于边框的增加导致盒子大小增加，之前采用的是加边框后回去减小盒子的大小
box-sizing：content-box 最终大小是border+高宽
box-sizing：border-box 最终大小是就是高宽
CSS3其他特性（了解）
图片变模糊
img {
filter: blur(5px);
}
calc函数
需求子盒子永远比父盒子小30px
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
width: calc(100% - 30px);
height: 35px;
background-color: skyblue;
}
CSS3过渡（重点）
让页面动起来
经常和 :hover搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始
后面两个可以省略
div {
width: 200px;
height: 200px;
background-color: pink;
transition: width 1s ease 0s;
}
div:hover {
width: 400px;
}
如果选用多个属性，用逗号进行分隔
transition: width 1s ease 0s, height 1s ease 0s;
