H5 新增新特性
1、拖拽释放
- 拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 种,拖放是标准的一部分,任何元素都能够拖放
2、自定义属性
- 如:data-id
3、语义化标签
- 如:header、nav、footer、aside、article、section等
4、音频(audio)、视频(video)
- 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay
5、画布(Canvas)
- getContext() 方法返回一个用于画布上的绘图的环境
Canvas.getContext( contextID ) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 ”2d“,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API。 - cxt.stroke() 如果没有这一步线条是不会显示在画布上的
- 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)