HTML5和CSS3新特性

注意:新特性兼容性不行,低版本有些浏览器是用不起的

HTML5新特性 

1.HTML5新增语义化标签

(1)<header> : 头部标签
(2)<nav> : 导航标签
(3)<article> : 内容标签
(4)<section> : 定义文档某个区域
(5)<aside> : 侧边栏标签
(6)<footer> : 尾部标签

注意:1.更多在移动端使用2.在IE9使用要转换为块级元素

2.HTML5视频标签

 1.音频: <audio>

语法:<audio src="文件地址" 属性值></audio>

属性值:

2.视频 : <video>

语法:<video src="文件地址" 属性值></video>

属性值:

总结:

1.音频标签和视频标签使用方式基本一致
2.谷歌浏览器把音频和视频自动播放禁止了,只允许静音播放 

3.input表单更多特性

(1).表单新增类型(type):

(2).表单新增属性: 

CSS3新特性 

1.CSS3新增选择器

(1).属性选择器

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

语法:

例如:
input表单,一个有value值一个没有,要选择有的那个就写:input[value] {};

注意∶类选择器、属性选择器、伪类选择器(结构伪类也算)，权重为10。
 

(2).结构伪类选择器

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

语法:

区别:
1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

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

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

语法:

注意:

1.before和after创建一个元素,但是都属于行内元素,要加宽和高先转换;
2.必须要有content:'文字(可以没有文字)'这个属性; 
3.伪元素选择器和标签选择器一样,权重为1;

2.CSS3新盒子模型

含义:可以通过box-sizing来指定盒子模型,这样我们计算盒子大小的方式就会发生改变

语法:

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

3.CSS3滤镜filter(可以使图片变模糊)

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

语法:filter: 函数();

例如:filter: blur(5px); blur模糊处理,数值越大越模糊

4.CSS3属性过渡

含义:过渡(transition)使我们可以在不使用Flash动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
 

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

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

如果是多个属性变化可以用逗号连接或直接使用all
例如:transition: width 0.5s, height 0.5s

注意:一般都需要和hover连用,过渡写到本身上,谁做动画给谁加

5.2D转换

(1)移动:可以改变元素在页面中的位置,类似定位

语法:transform: translate(x,y);

重点:①不会影响到其他元素的位置
        ②对行内标签没有效果
        ③百分比单位是相对于自身元素的translate:(50%,50%);

(2)旋转:让元素在2维平面内顺时针旋转或逆时针旋转

语法:transform:rotate(度数)

重点:①rotate里面跟度数,单位是deg 比如rotate(45deg)
        ②角度为正时,顺时针,负时,逆时针
        ③默认旋转的中心点是元素的中心点(用transform-origin: x y;来改变中心点,xy像素或者方位名词)

注意:可以与hover连用,做出旋转动画效果

(3)缩放:可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法:transform:scale(x , y);

与直接加宽高的区别:

sacle可以设置中心点缩放,默认以中心缩放,并且不影响其他盒子。宽高只会往左右和下放大,上面是不动的,并且会影响其他盒子

2D转换复合写法:transform: translate() rotate() scale(),空格分隔,默认是位移放在最前面

2D转换总结(一图流):

 

6.动画

 流程:

1.先定义(用keyframes定义动画,类似定义类选择器)动画

可以设置多个节点,比如25%,50%等 

 

  2.再使用(调用)动画,下面两个都要用

用animation-name: 动画名称;调用动画
用animation-duration: 持续时间;

常用属性:

animation-timing-function:速度曲线常用属性:

复合写法:

元素可以有多个动画,用逗号分隔

7.3D转换 

语法:translate3d

z越大,物体就变得越大

 要往z轴移动,就必须要用透视

(1)透视

语法:perspective: *px(*越小,物体变得越大)

注意:透视是要写在被观察的父盒子上面的

透视和z轴移动都能使物体变大,但一般都选择透视值固定,然后移动z轴

(2)3D呈现

语法:transfrom-style

不开这个用不了三维立体环境