【HTML5&CSS3】知识点总结

html5在html4的基础上增删了一些标签，也让更多语义化的结构化代码标签代替了大量的div标签，提升了网页的质量和用户体验。
☆html5布局与传统布局

    传统布局

    html5布局

从这两张图可以看出，html5的大的结构可以减少对class和id属性的使用。
☆html5新增的标签

• 结构标签（都相当于div，就是上图中标注的一些标签）
• 多媒体标签

<video src=" " autoplay controls loop></video>  //视频
<audio src=" " autoplay controls loop></audio>  //音频
								//autoplay 页面加载后自动播放
								//loop 循环播放
								//controls 控制栏，方便调节音量或者
								//若引用source标签，src属性可以不设
								
<source/>                                       //标记定义媒体资源

<canvas></canvas>                               //标记定义图片

<embed src="" type=""/>       //标记或定义外部的可交互的内容或者插件，比如flash

多媒体标签的出现，支持不使用插件的情况下也可以操作媒体文件，极大地提高了用户体验。

• Web应用标签（比如progress、datalist标签，不太常用）
• 其他标签（ruby、rt标签）
  ☆html5新增input类型

<input type="url"/>       //用于包含url地址的输入域
<input type="email"/>     //用于包含email的输入域
<input type="number"/>    //用于包含数值的输入域，可加减一
<input type="range"/>     //一定范围内的滑动条
<input type="search"/>    //用于搜索域
<input type="color"/>     //拾色器，用来获取颜色
<input type="tel"/>       //用于电话号码的文本字段
<input type="date"/>      //选取年月日
<input type="month"/>     //选取年月
<input type="week"/>      //选取年周
<input type="time"/>      //选取时间（小时和分钟）

☆CSS3渐变
线性渐变：

background: linear-gradient(angle,color1,color2,color3,color4...);

角度是指水平线和渐变线之前的角度，逆时针方向计算。
0deg将创建一个从上到下的渐变，90deg将创建一个从左向右的渐变。

径向渐变：

background: radial-gradient(center,shape,size,start-color,...,last-color);
background: radial-gradient(start-color,...,last-color);  //最常用的情况，颜色从内到外

形状shape的值可以为circle,也可以为ellipse(椭圆 默认)
☆CSS3过渡 transition

语法：transition:transition-property transition-duration transition-timing-function transition-delay

属性值说明：
1.transition-property：none(没有属性改变)/all(默认是全部属性)/property（需要过渡的属性名称）;
2.transition-duration：time(过渡效果花费的时间(s或者ms)，默认是0);
3.transition-timing-function：linear/ease-in/ease-out/ease-in-out;
4.transition-delay:time(制定秒或毫秒之前要等待切换效果开始);

☆CSS3动画 transform animation

注意：transform和animation不能同时操作一个元素，可以通过给元素外面再包层div,通过对外面div的操作来实现对它的控制！！！！

animation:

引用自定义动画语法：animation:	name duration timing-function delay iteration-count direction fill-mode play-state

属性值说明：
1.name:keyframename/none;
2.duration：time(动画播放的时间，默认0)；
3.timing-function：linear/ease-in/ease-out/ease-in-out；
4.delay:time(动画的延迟时间（s/ms），默认0)；
5.iteration-count：infinite/num(循环的次数);
6.direction：normal(正常方向)/reserve(反方向)/alternate(先正常方向，再反方向，交替进行)
7.fill-mode：none(默认)/forwards（设置对象状态为结束时的状态）/backwards（设置对象状态为开始时的状态）/both（设置对象状态为结束或开始时的状态）

**☆CSS3自定义动画keyframe**
@keyframes keyframeName {
            keyframes-selector{
            css-styles;
        }
        
keyframes-selector有两种：1.from{}  to{}  2.num%{}  num%{}

transform:

transform:rotate(deg) / traslate() / scale() / skew()

1.rotate(正数：顺时针 负数：逆时针)
2.traslateX() x轴移动
traslateY() y轴移动
traslate(x,y) xy轴同时移动
3.scaleX() x轴缩放
scaleY() y轴缩放
scale(x,y) xy轴同时缩放
4.skew 变形，方法同上

☆CSS3 3D转换

语法：transform-style:preserve-3d;