2020-12-25

文章内容输出来源：拉勾教育-前端就业

# html5新增语义化标签
1. 这种语义化标准主要是针对搜索引擎的
2. 这些新标签 页面中可以使用多次
3. 在IE9中，需要把这些元素转换为块级元素
4. 其实，我们移动端更喜欢使用这些标签
5. html5还增加来很多其他标签
## html5中新增多媒体标签
多媒体标签包含两个：
1. 音频：audio
2. 视频：video
使用它们我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件
总结：
1. 音频标签和视频标签使用基本一致
2. 浏览器支持情况不同
3. 我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以
4. 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件（controls属性有兼容问题后期用js来控制前进后退等操作）
### 音频标签 audio
html5中在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的：
1. Ogg audio/mpeg Firefox3.5、Opera10.5、Chrome3.0、
2. MP3 audio/ogg  IE9、Chrome3.0、Safari3.0
3. Wav audio/wav  Firefox3.5、Opera10.5、Safari3.0
#### audio音频标签常见属性
1. autoplay：autoplay，如果出现该属性，则音频在就绪后马上播放(谷歌禁用这一功能)
2. controls：controls，如果出现该属性，则向用户显示空间，比如播放按钮
3. loop：loop，如果出现该属性，则每当音频结束时重新开始播放
4. preload：preload，如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用autoplay，则忽略该属性（一般是用户点击播放时开始加载资源，该属性可以提前加载）
5. src：url，要播放的音频的url
#### audio音频标签语法格式：
`<audio src="01 岁月神偷.mp3" controls loop preload=""></audio>`
兼容写法：按顺序来，当执行第一个source时符合条件就用第一个，不行就往后找，直到最后全部都不支持，提示用户
` <audio controls>
        <source src="01 岁月神偷.mp3" type="audio/mpeg">
        <source src="01 岁月神偷.ogg" type="audio/ogg">
            您的浏览器暂不支持audio标签
    </audio>
`
### 视频标签 video
html5在不使用插件的情况下也可以原生支持视频格式文件的播放，当然支持格式是有限的
1. Ogg：video/ogg  Firefox3.5+、Opera10.5+、Chrome5.0+
2. MP4：video/mp4  IE9+、Chrome5.0+、Safari3.0+
3. WebM：video/webm Firefox4.0+、Opera10.6+、Chrome6.0+
#### video视频标签常见属性
1. autoplay:autoplay,视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
2. controls：controls，向用户显示播放控件
3. loop：loop，放完是否继续播放该视频，循环播放
4. preload：auto（预先加载视频）/none（不应加载视频），规定是否加载视频（如果有了autoplay就忽略该属性）
5. src：url，视频url地址
6. width：Pixels（像素），设置播放器宽度
7. height：Pixels（像素），设置播放器高度
8. poster：Imgurl，加载等待的画面图片
9. muted：muted，静音播放
#### video视频标签语法格式：
`<video src="ScreenRecording_11-11-2020 11-21-58.MP4" controls  muted width="200px" height="500px" poster="image2.jpg"></video>
`
兼容写法：
`
 <video controls width="300">
        <source src="ScreenRecording_11-11-2020 11-21-58.ogg" type="video/ogg">
            <source src="ScreenRecording_11-11-2020 11-21-58.MP4" type="video/mp4">
                您的浏览器暂不支持video播放视频的标签
    </video>`

## html5中新增表单标签
1. 输入标签
2. 表单属性
   
### 新增input表单类型
1. type：email，限制用户输入必须为email类型
2. type：url，限制用户输入必须为URL类型
3. type：date，限制用户输入必须为日期类型
4. type：time，限制用户输入必须为时间类型
5. type：month，限制用户输入必须为月类型
6. type：week，限制用户输入必须为周类型
7. type：number，限制用户输入必须为数字类型
8. type：range，滑动条
9. type：tel，手机号码
10. type：search，搜索框
11. type：color，生成一个颜色选择表单
### 新增可输入表单 datalist
datalist标签规定来input元素可能的选项列表
datalist元素包含来一组option元素，这些元素表示预定义可选值，在input元素输入过程中，会自动响应option元素的值
绑定的input标签必须设置list属性，属性值等于datalist标签的id属性值
`
城市：<input type="text" list="list01">
        <!-- 预定义一些选项 -->
        <datalist id="list01">
            <option value="广州">gz</option>
            <option value="深圳">sz</option>
            <option value="北京">bj</option>
        </datalist>
`
 ### 新增表单属性
 1. required：required，表单拥有该属性表示其内容不能为空，必填
 2. placeholder：提示文本，表单的提示信息，存在默认值将不显示
 3. autofocus：autofocus，自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放一个
 4. autocomplete：off/on，当用户在字段开始键入时，浏览器基于之前键入过的内容，应该显示出在字段填写的选项。默认已经打开，需要放在表单内同时加上name属性，同时成功提交
 5. multiple：multiple，可以多选文件提交      

# css3新增选择器
css3中，相对于css2.1版本的7个选择器，增加了更多其他的选择器，实线了更多的选择方式
## 子级选择器
子级选择器用于选取带有特定父元素的元素
书写语法：element1>element2
注意：如果element2元素不是父元素element1的直接子元素，则不会被选择（父子，不能是祖先）
>符号之前书写父级的选择器，>符号之后写子级选择器，必须满足父子级关机才能被选中标签
## 兄弟选择器
1. element1+element2,匹配同一个父元素中紧跟在element1后面的**一个**element2元素
2. element1～element2，匹配同一个父元素中紧跟在element1后面的**所有**element2元素
### 相邻兄弟选择器
相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素
书写语法E1+E2
注意：选中的是紧跟在E1之后的同级元素E2（挨着的），只能选中紧跟在后面的一个E2元素（一个，ps如果E1有多个的话，E2也有可能是多次一个E2），二者有相同的父元素
+符号前后可以添加空格书写
### 其他兄弟选择器
其他兄弟选择器匹配同一个父元素中在element1后面的所有element2元素（不挨在一起也是可以选中的）
书写语法：element1～element2
注意：选择element1之后出现的所有element2.两种元素必须拥有相同的父元素，但是element2不必直接紧随element1.
～符号前后可以添加空格书写

## 结构伪类选择器
常用的结构伪类选择器：
1. E:first-child,匹配父元素中的第一个子元素E**如果E是父元素，则选中下面子元素中的第一个；如果E是父元素中的一个子元素，那么需要和父元素中的第一个子元素是同一个，例如E是父元素后代的p，但是父元素的第一个子元素是h1，那么没有效果**
2. E:last-child，匹配父元素中最后一个E元素,，同上
3. E:nth-child(n)，匹配父元素中的第n个子元素E，**n可以是数字，关键字和公式；如果是数字就是选择第n个（1开始）；常见的关键字even偶数和odd奇数（选中所有偶数/奇数个数的子元素）;公式中会用到n（从0开始计算，n是从0，1，2，3.一直递增，但是0元素或者超出了元素的个数会被忽略）**同上
4. E:first-of-type，指定类型E的第一个，**type有类型的意思，上面的都是直接拿父元素中全部子元素来算，type是在E中指定的子元素类型分成一个组，然后在这个组里的子元素来算first、last、第n个**，
5. E:last-of-type，指定类型E的最后一个，同上
6. E:nth-of-type(n)，指定类型E的第n个，同上
## 伪元素选择器
前面学到的清除浮动影响的有使用到after
伪元素只能给双标签添加，不能给单标签添加
伪元素的冒号前不能有空格
伪元素里面必须写上书写content：“”
before 和 after创建一个元素，但是属于行内元素
因为在DOM里面看不见刚才创建的元素，所以称为伪元素
新增伪元素
1. E::before,在E元素内部的前面插入一个元素
2. E::after,在E元素内部的后面插入一个元素
3. E::first-letter,选择到了E容器内的第一个字母
4. E:first-line,选择到了E容器内的第一行文本
## 属性选择器
属性选择器用来选择包含指定属性的标签
1. E[att],选择具有att属性的E元素
2. E[att="val"],选择具有att属性且属性值等于val的E元素
3. E[att^="val"],匹配具有att属性，且值以val开头的E元素
4. E[att$="val"],匹配具有att属性，且值以val结尾的E元素
5. E[att*="val"],匹配具有att属性，且值中含有val的E元素
## 选择器权重
1. 基础选择器：id选择器》类选择器》标签选择器》*
2. 伪类选择器、属性选择器的权重等于类选择器
3. 伪元素选择器的权重等于标签选择器
   
# css3盒模型
css3中可以通过box-sizing来指定盒模型，这样就可以设置如何计算一个元素的总宽度和高度
属性值：
1. content-box，默认值，标准盒子模型，盒模型是外扩的。width和height只包括内容的宽和高，**在width和height之外绘制元素的内边距和边框**
2. border-box，怪异模式，盒模型是内减的。width和height属性包括内容，内边距和边框，但不包含外边距**为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制**
   
# css3新增属性
## 边框圆角
属性名：border-radius
作用：设置边框的圆角
属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。**border开始往内的一个圆角**
1. x-radius/y-radius，/分隔两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆角
2. radius，一个属性值，则水平和垂直都设置为同一个值，得到的是圆角
单一属性：
1. border-top-left-radius：左上角圆角半径,空格隔开
2. border-top-right-radius：右上角圆角半径
3. border-bottom-left-radius：左下角圆角半径
4. border-bottom-right-radius：右下角圆角半径
简写方法
border-radius相当于四个单一属性的简写方法，类似padding也可以有四种值的写法
1. 四值法：左上角、右上角、右下角、左下角
2. 三值法：左上角、右上角和左下角、右下角
3. 两值法：左上角和右下角、右上角和左下角
4. 单值法：四个角相同
/的属性值写法
border-radius属性值中出现了/斜线，那么/前面可以设置水平方向四种值的写法，/后面可以设置垂直方向四种值的写法
浏览器兼容
internet Explorer 8及以下版本浏览器不支持border-radius属性，其他浏览器都支持
## 文字阴影
在css3中，text-shadow可向文本应用阴影。通过属性值能够规定水平阴影，垂直阴影、模糊距离，以及阴影的颜色：
1. h-shadow，必需，水平阴影的位置，允许负值
2. v-shadow，必需，垂直阴影的位置，允许负值
3. blur，可选，模糊的距离
4. color，可选，阴影的颜色
text-shadow属性向文本添加阴影，属性值有2-3（x，y，模糊的距离）个长度值（像素值）和一个可选的颜色值进行规定，省略的长度是0
多层阴影：text-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上
## 盒子阴影
在css3中，box-shadow属性用于对盒子边框添加阴影
属性值：
1. h-shadow，必需，水平阴影的位置，允许负值
2. v-shadow，必需，垂直阴影的位置，允许负值
3. blur，可选，模糊的距离，模糊半径
4. spread,可选，阴影的尺寸,就是指阴影外延出去总的长度
5. color，可选，阴影的颜色
6. inset，可选，将外部阴影改为内部阴影
box-shadow属性向盒子添加阴影，属性值有2-4个长度值，可选的颜色值以及可选的inset关键字来规定，省略的长度是0
多层阴影：box-shadow属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。

## 过渡属性
动画效果
css3出现之前，前端一般使用flash动画或JavaScript制作动画。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。
属性名：transition
作用：在不使用flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡动画），并且当前元素只要有属性发生变化时即存在两种状态（A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果，为了方便看效果，我们使用：hover切换状态
语法格式：
transition：过渡的属性 过渡时间 运动曲线 延时时间；
单一属性写法：
1. transition，简写属性，用于一个属性中设置四个过渡属性
2. transition-property，规定应用过渡的css属性的名称
   1. none，表示没有属性过渡
   2. all表示所有变化的属性都过渡
   3. 属性名，使用具体的属性名，多个属性名中间逗号分隔
3. transition-duration，定义过渡效果花费的时间，默认是0.以s秒为单位
4. transition-timing-function，规定过渡效果的时间曲线，默认是ease
   1. linear，规定以相同速度开始至结束的过渡效果
   2. ease，规定慢速开始，然后变快，然后慢速结束的过渡效果
   3. ease-in，规定以慢速开始的过渡效果
   4. ease-out，规定以慢速开始和结束的过渡效果
   5. cubic-bezier（x1，y1，x2，y2）在cubic-bezier函数中定义自己的值，x1，x2就是0至1之间的数值，y1，y2取值任意，四个数值表示拉扯的点的两个坐标
5. transition-delay，规定过渡效果何时开始，默认是0.以秒为单位，0s也必须加单位
浏览器兼容
Internet Explore10、Firefox、Chrome以及Opera支持transition属性
Safari需要前缀-webkit
注意：Internet Explore9以及更早的版本，不支持transition属性
## 2D转换
属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠flash才可以实现的效果
属性值：多种转换方法的属性值，可以实现不同的转换效果
### 2D转换-位移 translate（）
transform的属性值为translate（）时，可以实现位移效果
书写语法：
1. translate（x，y）：x，y分别为水平和垂直方向位移的距离，可以为px值或者百分比（参考的是自身宽度或宽度值border及以内），区分正负
2. translate（x）：只有一个数值，表示水平方向的位移
实际使用中可以来配合居中
### 2D转换-缩放 scale（）
transform的属性值为scale（）时，可以实现元素缩放效果
书写语法：
1. scale（x，y）x，y分别为改变元素的宽度和高度的倍数
2. scale（）只有一个值，表示宽度和高度同时缩放n倍
3. scaleX（n）改变元素的宽度
4. scaleY（n）改变元素的高度

### 2D转换-旋转 rotate（）
transform属性值设置为rotate时，实现元素的旋转
书写语法：
rotate（数字deg）其中deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2D旋转只有一个属性值
注意：元素旋转后，坐标轴也跟着发生转变，因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异

### 2D转换-倾斜 skew（）
transform属性值设置为skew时，实现元素的倾斜
书写语法：
transform：skew（数字deg，数字deg）
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0

### 2D转换-基准点 transform-origin属性
作用：设置调整元素的水平和垂直方向原点的位置
调整元素的基准点
属性值：包含两个，中间使用空格分隔
1. x，定义x轴的原点。可能的值：left、center、right、像素值、百分比
2. y，定义y轴的原点。可能的值：left、center、right、像素值、百分比

### 2D转换-卡包特效案例
要点：压盖效果使用子绝父相，再设置公共基准点右上，每张图片设置旋转角度递增，最后公共设置图片的过渡属性实现动画

## 3D转换
transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的x，y轴组成的平面效果多来一条z轴，
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现次目的
透视可以将一个2D平面，在转换的过程中，呈现3D效果
透视特点：近大远小
注意：并非任何情况下需要透视效果，根据开发进行设置，如果需要展示z轴的变化，则设置透视效果

### 3D转换-透视perspective
属性名：perspective
作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
属性值：像素值、数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸
注意：透视属性需要设置给3D变化元素的父级

### 3D转换-3D旋转
3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：
属性值：
rotateX（angle），定义沿着x轴的3D旋转
rotateY（angle），定义沿着y轴的3D旋转
rotateZ（angle），定义沿着z轴的3D旋转

### 3D转换-3D位移
位移也分为三个方向的移动
属性值：
translate（x），设置x轴的位移值
translate（y），设置y轴的位移值
translate（z），设置z轴的位移值
属性值为像素值或百分比，正负表示位移的方向，正值向对应轴的正方向移动，负值向对应轴的负方向以移动
### 3D转换-正方体案例
transform-style 属性
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
属性值
flat：所有子元素在2D平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style：preserve-3d，来使其变成一个真正的3D图形
一般来说，该属性设置给3D变换图形的父级元素

### 浏览器兼容
Internet Explorer10、Firefox以及Opera支持transform属性
Chrome和Safari需要前缀-webkit-。
Internet Explorer9需要前缀-ms-

## css3动画
css3中提供来自己的动画制作方法，这可以在许多网页中取代动画图片、flash动画以及JavaScript
css3动画制作分两步：创建动画、绑定动画
### 创建动画
@keyframes规则
@keyframes规则用于创建动画，在@keyframes中规定某项css样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
需要使用百分比来规定变化发生的时间，或用关键词“from”和“to”。等同于0%和100%。0%是动画的开始，100%是动画的完成
@keyframes书写方法
@keyframes 动画名称{
    动画过程，可以添加任意百分比处的动画细节
}
### 绑定动画
animation属性
需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果。
animation属性用于对动画进行捆绑
语法：
div {
    animation：动画名称 过渡时间 速度曲线 动画次数 掩饰时间
}
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
单一属性列表
1. animation-name，规定@keyframes动画的名称
2. animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0
3. animation-timing-function 规定动画的速度曲线，默认是ease
4. animation-delay 规定动画何时开始，默认是0
5. animation-iteration-count 规定动画被播放的次数，默认是1，infinite表示无限次播放

浏览器兼容
Internet Explorer10、Firefox以及Opera支持@keyframes规则和animation属性
Chrome和Safari需要前缀-webkit-。
Internet Explorer9，以及更早版本不支持@keyframes规则和animation属性