HTML5和CSS3新增属性

新增选择器

E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

CSS圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

css阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法）

盒子透明度表示法：opacity:0.1; filter:alpha(opacity=10)（兼容IE）;
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

transition动画

transition:proprety duration timing-function delay

proprety (设置过渡属性如width height background-color) 

duration (过渡时间)

timing-function(运动方式一般为ease)

delay(延迟)

一般和hover属性连用

用法，在元素属性内写transition:proprety duration timing-function delay；

在hover属性中写变化后样式。

transform变形

transform：translate(100px,100px);位移

transform：scale（0.5.,0.2）;缩放

transform：rotate（30deg）；旋转                                              

transform：skew （x，y）；斜切

与hover连用

同时在原始样式中写transition:proprety duration timing-function delay；

形成变形动画

旋转

{rotateX Y Z}

transform-style：flat or preserve-3d

transform:prespective(800px)设置透视距离。

设置初始旋转值解决跳变bug；

旋转方向判断，箭头对向自己顺时针。

tranform-origin：left top （x y）左上角为原点 设置旋转中心点

backface-visibility 设置背面是否可见

animation

（annimation-play-state:）设置暂停

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

• linear 匀速
• ease 开始和结束慢速
• ease-in 开始是慢速
• ease-out 结束时慢速
• ease-in-out 开始和结束时慢速
• steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n| infinite
7、animation-direction

• normal 默认动画结束不返回
• Alternate 动画结束后返回

8、animation-play-state 动画状态

• paused 停止
• running 运动

9、animation-fill-mode 动画前后的状态

• none 不改变默认行为
• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
• both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

新增标签

一般不用，因为与浏览器不匹配

国内搜索引擎不识别

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

示意图

 

新增表单控件

一般也不用 因为样式在不同浏览器下不同

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete=“off 联想关键词 一般关掉

新增音频和视频标签

<audio autoplay controls loop preload> <source src="source/audio.mp3" type=""> <source src="source/audio02.wav" type=""> </audio>
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音


 支持格式：ogg、wav、mp3

 <video autoplay controls loop preload> <source src="source/audio.mp3" type=""> <source src="source/audio02.wav" type=""> </video>

支持格式：ogg、mp4、webM

属性：
1、width
2、height
3、Poster

 

实际中一般引用第三方播放器

1、cyberplayer
2、tencentPlayer
3、youkuplayer