html5标签、css3样式、css3选择器

壹、html5标签

html5标签是相对于html4标签进行了一些升级，废除掉了一些旧标签，生成了一些新标签，其在手机上的适应性最强。

html5和html5区别：语义化更明确。

html5新元素

一、canvas：画布，想当于画板， 一般用js来绘制API。使用它一般做一些统计图折线图、 数据访问表格。

二、新的多媒体元素

1.video：视频播放器

注：autopaly自动播放   controls控制器     loop循环播放

2.audio：音频播放器(MP3格式)

三、新表单元素

1.datalist：定义选项列表。与input关联使用。(在input中写list，在datalist写id可进行关联)与select类似。

注：select只能下拉菜单进行选择，datalist即能下拉菜单进行选择也可输入选择。

2.******：加密(需安全证书)（不常用）。

3.output：类似span、p标签，在html5中语义化更明确，输出标签，显示标签（不常用）。

四、新的语义和结构元素（div）

1.article：定义独立于网页的内容，侧边栏。

2.aside：定义主内容之外的内容。

3.figure：放图片，标记文档中的一个图像。figcaption：在figure中嵌套，说明图片。

4.footer：声明网页的底部。

5.header：声明网页的顶部。

6.section：声明网站中的区段。

7.nav：定义网站中的导航。

8.time：定义时间、显示时间。

9.progress：进度条。

贰、css3样式

一、border相关的

1.盒子阴影：box-shadow:-10px -10px 20px pink；（正右负左，正下负上，扩散范围，阴影颜色）前两个值是控制阴影的方向。

box-shadow:-10px -10px 20px pink,-20px -20px 30px blue；双阴影。

2.圆角：border-radius:10px;（50%即为圆角）

border-image：source slice width outset repeat

（图片位置 裁剪 宽度范围 环绕或平铺）

二、背景

1.background-size：大小

2.background-origin：border-box;或padding-box；或content-box；

box-sizing(改边框向内或向外)

三、渐变

1.圆形渐变：radial-gradient

2.线性渐变：linear-gradient

四、文本效果

text-shadow文字阴影

叁、css3动画

1.平移动画(平移、变形、旋转)

平移

拉伸(正向左，负向右)

放大 (一般写一个值)

旋转

2.过渡动画(一般和悬停一起使用)

悬停时延迟一秒，宽度以 0.5秒的匀速方式变为400px。

注：linear：匀速          ease：慢快慢             ease-in：慢速开始             

ease-out：慢速结束             ease-in-out：以慢速开始，以慢速结束

3.自定义动画

animation：动画名称 时间 运动方式 是否循环

animation-fill-mode: 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

 

写自定义动画时需要先声明动画的播放序列：

动画序列有两种写法

1.from{ } to{ };

2.百分形式