H5 C3新特性
HTML5新特性:
-
托拽释放:拖拽是一种常见的特性,即抓取对象拖到另一个位置,在HTML5中
-
自定义属性data-d
-
语义化更好的标签(header,nav,aside,article,section)
-
音视频若浏览器不支持播放,可在标签中添加autoplay
-
画布cavans
-
地理(Geolaction)
-
本地离线存储(localstorage),长期存储数据,浏览器关闭后数据不丢失
-
sessionstorage 在浏览器关闭后,数据自动删除
-
表单控件:calendar,date,time,url,search,tel,file,number
-
新的技术:webworker,websocket,Gelocation
CSS3新特性:
-
颜色:新增rgba,hsla模式
-
文字阴影:(text-shadow)
-
边框圆角:border-radius 边框阴影: (box-shadow)
-
盒子模型:box-sizing
-
背景:background-size,background-origin,background-clip(削弱)
-
渐变:linear-gradient(线性渐变)
-
过渡:transition 可实现动画
-
自定义动画:animate@keyform
-
媒体查询:多栏布局
-
border-image
-
2D转换,3D转换
-
字体图标 弹性布局
localstorage,sessionstorage,cookie 区别:
相同之处:
这三者都是浏览器存储数据的方式
不同之处:
生命周期:
cookie:可以设置失效时间,不设置默认关闭浏览器后失效
localstorage:除非手动删除,否则永久保存
sessionstorage:只在浏览器会话下有效,关闭浏览器或页面即清除
存放数据大小:
cookie:4KB左右
localstorage,sessionstorage:可以保存5MB的数据
http请求:
cookie:每次都会携带在HTTP请求头中,如果使用cookie保存过多数据,将带来性能问题
localstorage,sessionstorage:只保存在浏览器中,并不参与服务器的通信
易用性:
需要程序员自己封装,原生的cookie接口不友好
localstorage,sessionstorage:原生接口可以接受,也可二次封装,这样对object和array有更好的支持