H5 和 C3 的新特性

H5 新增新特性

1、拖拽释放

• 拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 种，拖放是标准的一部分，任何元素都能够拖放

2、自定义属性

• 如：data-id

3、语义化标签

• 如：header、nav、footer、aside、article、section等

4、音频（audio）、视频（video）

• 如果浏览器不支持自动播放怎么办？在属性中添加 autoplay

5、画布（Canvas）

1. getContext() 方法返回一个用于画布上的绘图的环境
   Canvas.getContext( contextID ) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 ”2d“，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。
2. cxt.stroke() 如果没有这一步线条是不会显示在画布上的
3. canvas 和 image 在处理图片的时候有什么区别？
   image 是通过对象的形式描述图片的，cnavas 通过专门的 API 将图片绘制在画布上

6、地理（Genlocation）

7、本地存储（localStorage）

• 长期存储数据，浏览器关闭后数据不丢失

8、会话存储（sessionStorage）

• 数据只在当前浏览器页面删除，浏览器关闭后删除

9、表单属性

• 如：calendar、date、time、email、url 等

10、新技术

• 如：webworker、webSocket、Geoloation

C3新特性

1、颜色

• 新增 RGBA、HSLA模式

2、文字阴影（text-shadow）

3、边框

• 圆角：border-radius
• 边框阴影：box-shadow

4、盒子模型（box-sizing）

5、背景

• 背景图片大小：background-size
• 指定绘图区的背景：background-clip
• 内容框相对定位的背景图片：background-origin

6、渐变

• 用于创建一个表示两种或多种颜色线性渐变的图片：linear-grdient
• 用径向渐变创建 "图像"：radial-gradient

7、自定义动画 animate @keyfrom

8、过渡

• transition 可实现动画

9、媒体查询多栏布局

• @media screen and ( width:800px ) { ... } 

10、边框图片( border - image )

11、2D转换 

• transform、translate（x，y）、rotate（x，y）、scale（x，y）

12、3D转换

13、字体图标（font - face）

14、弹性布局 （flex）