高级任务7
2017-04-26 本文已影响0人
饥人谷_風逝
题目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数据
