css3/H5新增特性

一、 css3新增特性

css3 中新增的一些特性大概可以分为：选择器、背景和边框属性，本文特效，2D/3D转换

1、选择器

常用的有
：last-child //选择元素最后一个孩子
：first-child //选择元素第一个孩子
：nth-child(1) //选择元素第几个孩子
：nth-child(event) //选择元素偶数
：nth-child(odd) //选择元素奇数
：disabled //选择每个禁用的 dom元素
：checked // 选择每个被选中的dom元素

2、背景和边框

背景：
规定背景图片的尺寸：background-size
规定背景图片的定位区域：backgrund-origin(content-box、padding-box、margin-box)
边框：
border-radius： 圆角
border-shadow: 阴影
border-image ：边框图片

3、文本效果

text-shadow 向文本添加阴影
text - outilne 规定文本的轮廓
text-wrap 规定本文的换行规则

4、2D/3D 转换

变形transform：
有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition：
transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
动画animation
动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

注意：这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

二、html5新增特性

1、语义化标签

头部：header、尾部：footer、节点：section、导航：nav、侧边栏aside、独立内容区域：article

2、增强型表单

HTML5拥有多个新增的表单input 输入类型。这些新特性提供了更好的输入控制和验证

3、新增表单属性

placehoder 输入框的默认提示，在用户输入后消失
min和max 设置元素的最大值和最小值
height 和 width 用于image类型的input 类型的图像高度和宽度

html5新事件

事件	描述
onresize	当调整窗口大小时触发
ondrag	当拖动元素触发
onscroll	当滚动元素滚动的滚动条时触发
onmousewheel	当转动鼠标滚动时触发
onerror	当错误发生时触发
onplay	当媒介数据将要开始播放时触发
onpause	当媒介数据暂停时触发