HTML5和CSS3新特性（常用）

1. HTML5新特性

HTML5的新特性主要针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性。

1.1 HTML5 新增的语义化标签

以前布局，基本都是用div来做。但是div对于搜索引擎来说，是没有语义的。

<header>:头部标签
<nav>：导航标签
<section>：定义文档某个区域的标签
<article>：内容标签
<aside>：侧边栏标签
<footer>：尾部标签

注意：

这些语义化标签主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
这些标签更多地使用在移动端
HTML5 还增加了很多其他的标签，这些只是较常用的。

1.2 HTML5新增的多媒体标签：

音频：<audio>：用于在文档中表示音频内容

<audio> 元素常见属性：

src：媒体的来源

controls：增加控制工具栏

autoplay：自动播放，但是存在兼容性问题

muted：静音

loop：循环播放

视频：<video>

<video>元素常见属性：

controls： controls 增加控制工具栏（加上controls属性，视频才会播放）

autoplay： autoplay 自动播放(谷歌浏览器禁用了自动播放功能，加了muted属性就可以自动播放了)

muted： muted 静音，增加后静音并且自动播放会生效

loop： loop 循环播放

preload： auto（预加载） none(不预加载) 规定是否预加载视频(如果有了autoplay 就忽略该属性)

src： url() 视频url地址

poster： imgurl() 加载等待的画面图片

width： px 设置播放器宽度

height： px 设置播放器高度
```
<video src="movies.mp4"
       controls 
       autoplay 
       muted 
       loop>
</video>
```

<source>元素：

如果存在兼容性问题，可以将多个视频格式的数据源放到source元素中

<video controls>
    <source src="... .mp4">
    <source src="... .avi">
    <source src="... .webm"
</video>

1.3 HTML5 对表单的扩展：

HTML5 新增的表单属性
- required ：值 required 表示其内容不能为空
- placeholder：输入框的占位文字
- multiple：可以多选文件提交
- autofocus：自动聚焦
对于input的type值也有很多扩展
- url： URL类型
- date：日期类型
- time：时间类型
- month：月类型
- week：周类型
- number：数字类型
- tel：手机号码
- search：搜索框
- color：会显示一个取色板，可以选择颜色
- email：邮件类型

2. CSS3 新特性

2.1 CSS3 的现状

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛

2.2 CSS3 新增选择器

CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素

属性选择器
结构伪类选择器
伪元素选择器

1. 属性选择器

属性选择器可以根据元素特定的属性来选择元素。这样就不用借助于类或者id选择器。

input[value]

input[type=text]

E[att^="cal"]匹配具有att属性且值以val开头的 E 元素

E[att$="val"]匹配具有att属性且值以val结尾的 E 元素

E[att*="val"]匹配具有att属性且值中含有val的 E 元素

注意：类选择器属性选择器伪类选择器权重都为10

2. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素

E:first-child 匹配父元素中的第一个子元素 E

E:last-child 匹配 E 元素中的最后一个子元素

E:nth-child(n) 匹配 E 元素中的第n个子元素

ul li:first-child {
    
    ...} /*选择ul里面的第一个li*/
ul li:last-child {
    
    ...} /*选择ul里面的最后一个li*/
ul li:nth-child(n) {
    
    }/*选择ul里面的第n个li n可以是：
1. 数字 1,2,3...
2. 关键字(even偶数，odd奇数)
3. 公式:
	n:选择所有
	-n+5:选择前5个
*/

E:first-of-type指定类型 E 第一个元素

E:last-of-type 指定类型 E 最后一个元素

E:nth-of-type(n) 指定类型 E 元素中的第n个

<style>
    section div:nth-child(1) {
     
     ...}/*谁都选不出 原因：nth-child会把所有的孩子都排列序号 本段代码执行的时候先找到第一个孩子p 但是p不是我们要找的div 所以选不出我们要找的元素*/
    
    section div:nth-of-type(1){
     
     ...}/*选出熊大 执行过程：先找到div然后选出第一个div*/
</style>
<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
    
</body>

3. 伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

::before在元素内部的前面插入内容

::after在元素内部的后面插入内容

注意：

before 和 after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称之为伪元素
语法：element::before{content: ’ '}
before 和 after必须有content属性
before 在父元素内容的前面创建元素， after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

div::before {
    
    
    content:'你好';/*content必须要写*/
    width:14px;
    heith:20px;
}

伪元素使用场景：

伪元素字体图标
伪元素清除浮动

.clearfix:after {
    
    
    content:""; /* 伪元素必须写的属性 */
    display: block; /* 插入的元素必须是块级 */
    height:0; /* 不要看见这个元素 */
    clear:both; /* 核心代码清除浮动 */
    visibility:hidden; /* 不要看见这个元素 */
}

2.3 CSS3 过渡(重点)

过渡(transition) 是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变化为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态

可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持(ie9一下版本) 但是不会影响页面布局。

经常和 :hover 一起搭配使用。

transition:要过渡的属性花费时间运动曲线何时开始

属性：想要变化的属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
花费时间：单位是秒(必须写单位) 比如0.5s
运动曲线：默认是ease(可以省略)
何时开始：单位是秒(必须写单位) 可以设置延迟触发时间默认是0s(可以省略)

div {
    
    
    width:200px;
    height:100px;
    background-color:pink;
    /* transition:要过渡的属性 花费时间 运动曲线 何时开始*/
    /*如果想写多个属性，利用逗号分割*/
    /*如果想变化多个属性，可以使用 all*/
    transtion:width 1s ease 1s,height .5s;
}
div:hover {
    
    
    width:400px;
    height:200px;
}

2.4 CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

移动：translate
旋转：rotate
缩放：scale

2D转换是改变标签在二维平面上的位置和形状的一种技术。
在这里插入图片描述

1. 2D移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform:translate(x,y);或者分开写：
transform:translateX(n);
transform:transateY(n);

div {
    
    
    width:200px;
    height:200px;
    background-color:pink;
    /* x就是x轴移动位置 y就是y轴移动位置 */
    /* transform:translate(x,y) */
    transform:translate(100px,100px);
    /*1. 如果只移动x坐标*/
    transform:translate(100px,0);/*y坐标不可省略*/
    transform：translateX(100px);
    /*2. 如果只移动y坐标*/
    transform:translate(0,100px);/x坐标不可省略*/
    transform：translateY(100px);
}

重点：

定义2D转化中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate(50%，50%)
对行内标签没有效果

2. 2D旋转 rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数)

重点

rotate里面跟度数，单位是deg比如rotate(45deg)
角度为正时，顺时针，为负时，逆时针
默认旋转的中心点是元素的中心点

3. 2D转换中心点 transform-origin

设置元素转换的中心点

语法

transform-origin: x y;

重点

注意后面参数x和y用空格隔开
x y 默认转换的中心点是元素的中心点(50% 50%)
还可以给x y 设置像素或者方位名词 (top bottom left right center)

transform-origin: left bottom;/*转换点为左下角*/

4. 2D缩放 scale

只要给元素添加上了这个属性就能控制它放大还是缩小

语法：

transform:scale(x,y);

注意：

其中的x y 用逗号隔开
transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
transform:scale(2,2)：宽和高都放大了2 倍
transform：scale(2)：只写一个参数，第二个参数则和第一个参数一样
transform:scale(0.5,0.5)：缩小
scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

5. 2D转换的综合写法

注意：

同时使用多个转换，其格式为：transform:translate() rotate() scale()等
其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
当同时有位移和其他属性的时候，记得要将位移放到最前面

2.5 CSS3 动画

动画(animation)是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1. 动画的基本使用

制作动画分为两步

先定义动画
再使用(调用)动画

用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
	0% {
		width:100px;
	}
	100% {
		width:200px;
	}
}

定义动画

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式，任意多的次数
请用百分比来规定变化发生的时间，或用"from"和"to" ,等同于0%和100%(百分比是对总的时间的划分)

元素使用动画

例：
div {
    
    
    width: 200px;
    height:200px;
    background-color: pink;
    margin: 100px auto;
    /* 调用动画 */
    animation-name:动画名称;
    /* 持续时间 */
    animation-duration:持续时间;
}

2. 动画常用属性

在这里插入图片描述

@keyframes move {
    
    
    0% {
    
    
        transform:translate(0,0);
    }
    100% {
    
    
        transform: translate(1000px,0);
    }
}
div {
    
    
    width:100px;
    height:100px;
    background-color:pink;
    /* 动画名称(必写) */
    animation-name:move;
    /* 持续时间 (必写)*/
    animation-duration: 2s;
    /* 运动曲线 */
    animation-timing-function:ease;
    /* 何时开始 */
    animation-delay:1s;
    /* 动画重复次数 默认为1 ， infinite 无限循环 */
    animation-iteration-count:infinite;
    /* 是否反方向播放 默认normal alternate 反方向播放*/
    animation-direction:alternate;
    /* 动画结束后的状态 默认backwards 回到起始状态， 停在结束状态 forwards*/
    animation-fill-mode:forwards;
}
div:hover {
    
    
    /*鼠标经过div 动画停止 鼠标离开 继续动画*/
    animation-play-state:paused
}

3. 动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

animation: name duration timing-function delay iteration-count direction fill-mode;

简写属性里面不包含animation-play-state
暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是跳回来：animation-direction: altermate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

4. 速度曲线细节

在这里插入图片描述

div {
    
    
    width:0;
    height:30px;
    background-color:pink;
    /*steps 就是分几步来完成动画 有了steps 就不要写ease了*/
    animation: w 4s steps(5) forwards;
}
@keyframes w {
    
    
    0% {
    
    
        width:0;
    }
    100% {
    
    
        width:200px;
    }
}

2.6 CSS3 3D转换

1. 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右右边是正值，左边是负值
y轴：垂直向下下面是正值，上面是负值
z轴：垂直屏幕往外面是正值，往里面是负值

2. 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

transform:translateX(100px);仅在x轴上移动
transform:translateY(100px);仅在y轴上移动
transform:translateZ(100px);仅在z轴上移动（注意：一般用px作为单位）
transform:translate3d(x,y,z);其中x,y,z分别指在x,y,z轴上移动的距离，不可省略，如果没有就写0

注意：z轴上的效果需要借助接下来的透视才能看到

3. 透视 perspective

如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面

body {
    
    
    perspective: 500px;
}
div {
    
    
    width:200px;
    height:200px;
    background-color:pink;
    transform:translate3d(100px,100px,100px)
}

4. 3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45度
transform:rotateZ(45deg):沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可),例如transform:rotate3d(1,1,0,45deg): 这句代码表示的方向是x轴和y轴的矢量叠加

对于元素旋转的方向，借助左手准则

左手准则：

左手拇指指向x轴的正方向
其余手指的弯曲方向就是rotateX(deg)中deg取正值的旋转方向

5. 3D呈现 transfrom-style

控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启3d立体空间默认值
transform-style:preserve-3d; 子元素开启立体空间
代码写给父级但是影响的是子盒子
这个属性很重要

2.7 CSS3 盒子模型

CSS3中可以通过box-sizing 来指定盒子模型，有2个值：即可指定为content-box 、 border-box

计算盒子大小的方式

box-sizing: content-box; 盒子大小为width + padding + border(以前默认的)
box-sizing: border-box; 盒子大小为width,即padding和border就不会撑大盒子了

2.8 CSS 其他特性(了解)

1. CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

filter:函数(); 例如：filter:blur(5px)

2. CSS3 calc 函数：

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width:calc(100% - 80px);可以让子盒子的宽度永远比父盒子少80px