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)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值