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

• HTML5是超文本标记语言(HTML)的第五次重大修改，2014年10月29日标准规范制定完成。
• 新特性
• 语义特性
  HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
• 本地存储特性
  基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
• 设备兼容特性
  从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
• 连接特性
  更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
• 网页多媒体特性
  支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
• 三维、图形及特效特性（Class: 3D, Graphics & Effects）
  基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
• 性能与集成特性
  没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
• CSS3特性
  在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
• 新标签

• 让IE支持新标签

• 方式一：让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。

   <!–[if lt IE9]> 
   <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
   <![endif]–>
  

• 方式二：在页面头部加入代码

   <script> 
      (function() {
        if (! 
        /*@cc_on!@*/
        0) return;
        var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);
        var i= e.length;
        while (i–){
            document.createElement(e[i])
        } 
   })() 
   </script>
  

2. input 有哪些新增类型？

• email 输入邮箱地址至少含有@
• url 输入的链接至少含有http://
• number 输入的是数字才有效，输入其他无效
• range 变成一个可拖动的百分比条
• Date Picker 生成一个日历
• Date
• month
• week
• time
• datatime

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

• cookie:存储在用户本地终端上的数据。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
  localStorage 和 cookie 都是保存在浏览器端，且同源的。

• HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储

• sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

• 区别
• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
• localStorage不会自动把数据发给服务器，仅在本地保存。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• localStorage 存储删除数据
  localStorage.setItem('name', 'liqi');//存储
  localStorage.getItem("name"); //获取
  localStorage.removeItem("name");//删除
  localStorage.clear(); //删除所有数据

4. CSS3效果的简单实例

效果预览

5. 全屏图加过渡色的效果

效果预览

6. loading 动画效果

效果预览