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 動畫效果

效果預覽