高级任务7

题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

HTML5是超文本标记语言的第五次重大修改。

新增特性包括

• 语义特性
• 本地存储特性
• 设备兼容特性
• 连接特性
• 网页多媒体特性
• 性能与集成特性
• CSS3特性

新增标签

canvas audio video source embed track datalist keygen output article aside bdi command details dialog summary figure figcaption
footer header mark meter nav progress ruby rt rp section time wbr

让低版本支持html5

• 引入Modernizr.js,它可以根据浏览器对HTML5/CSS3特性的支持，对标签进行补丁，以在低版本正确显示。
• 此外也可以使用htmlshiv.js、selectivizr.js。它们分别可以让低版本浏览器支持html5和CSS3

题目2： input 有哪些新增类型？

email
url
number
range
Date Picker
Date(month、week、time、datatime)

题目3： 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

对比

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

localStorage存储删除

localStorage.setItem("keyname","value");//设置keyname为"value"//
var b = localStorage.getItem("keyname")//获取keyname的值
var a = localStorage.key(0); // 获取第0个数据项的键名
localStorage.removeItem("keyname");//清除keyname的值
localStorage.clear();//清除当前域名下的所有localstorage数据

题目4： 写出如下 CSS3效果的简单事例

http://js.jirengu.com/xupa/

题目5： 实现如下全屏图加过渡色的效果（具体效果随意）

http://js.jirengu.com/yimuk

题目6： 写出如下 loading 动画效果

http://js.jirengu.com/lofez/

http://js.jirengu.com/rosu/