Html5+CSS3新特性

HTML5新增的语义化标签

语义化标签优点：1、提升可访问行 2、SEO 3、结构清晰，利于维护

Header 页面头部
main 页面主要内容
footer 页面底部
Nav 导航栏
aside 侧边栏
article 加载页面一块独立内容
Section 相当于div
figure 加载独立内容（上图下字）
figcaption figure的标题
video 视频
audio 音频

CSS3新增的特性

边框：
border-radius 圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，insetr（内/外部阴影）） border-image：设置边框图像 
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移 
border-image-width 图片边框的宽度 
border-image-outset 边框图像区域超出边框的量 
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）

背景：
Background-size 背景图片尺寸 
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box， content-box）

渐变： 
Linear-gradient（）线性渐变 
Radial-gradient（）径向渐变

文本效果： 
Word-break：定义如何换行 
Word-wrap：允许长的内容可以自动换行 
Text-overflow：指定当文本溢出包含它的元素，应该干啥 
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）

转换： 
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜 
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴） 
Transform-style 指定嵌套元素怎么样在三位空间中呈现

2D 转换方法： 
rotate 旋转 
translate（x，y）指定元素在二维空间的位移 
scale（n） 定义缩放转换

3D 转换方法： 
Perspective（n）为 3D 转换 translate rotate scale

过渡： 
Transition-proprety 过渡属性名 
Transition-duration 完成过渡效果需要花费的时间 
Transition-timing-function 指定切换效果的速度 
Transition-delay 指定什么时候开始切换效果 

动画：animation 
Animation-name 为@keyframes 动画名称 
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期 
animation-delay 动画启动前的延迟间隔 
animation-iteration-count 动画播放次数 
animation-direction 是否轮流反向播放动画