題目1： HTML5是什么？有哪些新特性？有哪些新增標(biāo)簽？如何讓低版本的 IE 支持 HTML5新標(biāo)簽

HTML5 是什么

HTML5 是對(duì) HTML 標(biāo)準(zhǔn)的第五次修訂，不是一個(gè)新技術(shù)，而是一個(gè)標(biāo)準(zhǔn)。
現(xiàn)在國(guó)內(nèi)普遍說的 H5 是包括了 CSS3，JavaScript 的說法，表示符合新標(biāo)準(zhǔn)的，足夠 cool 的，有各種效果的頁(yè)面( 一種錯(cuò)誤但普遍的觀點(diǎn) )

有哪些新特性

• 語義特性
  HTML5 賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì) RDFa 的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

• 本地存儲(chǔ)特性
  基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說明文檔。

  • sessionStorage 會(huì)話級(jí)別的 WebStorage
  • localStorage 永久的 WebStorage
  • Web SQL 瀏覽器端的數(shù)據(jù)庫(kù)

• 設(shè)備兼容特性
  從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁(yè)應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與 microphones 及 攝像頭 相聯(lián)。

• 連接特性
  更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5 擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。javascript:void(null)

  • Server-Sent 事件指的是網(wǎng)頁(yè)自動(dòng)獲取來自服務(wù)器的更新

• 網(wǎng)頁(yè)多媒體特性
  支持網(wǎng)頁(yè)端的 Audio、Video 等多媒體功能， 與網(wǎng)站自帶的 APPS，攝像頭，影音功能相得益彰。
  三維、圖形及特效特性（Class: 3D, Graphics & Effects）
  基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。

• 性能與集成特性
  沒有用戶會(huì)永遠(yuǎn)等待你的 Loading —— HTML5 會(huì)通過 XMLHttpRequest2
  等技術(shù)，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

• CSS3特性
  在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

有哪些新增標(biāo)簽？

如何讓低版本的 IE 支持 HTML5新標(biāo)簽

• 方式一：Coding JavaScript

<!--[if lt IE9]> 
<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>
<![endif]-->

• 方式二：使用Google的html5shiv包（推薦）

<!--[``if` `lt IE9]>`
<script src=``"[http://html5shiv.googlecode.com/svn/trunk/html5.js](http://html5shiv.googlecode.com/svn/trunk/html5.js)"``></script>`
<![endif]-->`

但是不管使用以上哪種方法,都要初始化新標(biāo)簽的CSS.因?yàn)镠TML5在默認(rèn)情況下表現(xiàn)為內(nèi)聯(lián)元素，對(duì)這些元素進(jìn)行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素方便布局

題目2： input 有哪些新增類型？

• email
  • email 類型用于應(yīng)該包含 e-mail 地址的輸入域
  • 在提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email的格式

  <input type="email">

• url
  • url 類型用于應(yīng)該包含 URL 地址的輸入域
  • 在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 url 域的值

<input type="url" />

• number
  • number 類型用于應(yīng)該包含數(shù)值的輸入域
  • 可以設(shè)定對(duì)所接受的數(shù)字的限定
    • 屬性 描述
      max 規(guī)定允許的最大值
      min 規(guī)定允許的最小值
      step 規(guī)定合法的數(shù)字間隔（如果 step="3"，則合法的數(shù)是 -3,0,3,6 等）
      value 規(guī)定默認(rèn)值

 <input type="number" name="points" min="1" max="10" />

• range
  • range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域
  • range 類型顯示為滑動(dòng)條
  • 可以設(shè)定對(duì)所接受的數(shù)字的限定

<input type="range" name="points" min="1" max="10" />

• Date Picker
  HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型

  • date 選取日、月、年
  • month 選取月、年
  • week 選取周和年
  • time 選取時(shí)間（小時(shí)和分鐘）
  • datatime 選取時(shí)間、日、月、年（UTC 時(shí)間）
  • datetime-local 選取時(shí)間、日、月、年（本地時(shí)間）

<input type="date" name="user_date" />

• search
  • search 類型用于搜索域

<input type="search" name="search" />

題目3： 瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲(chǔ)刪除數(shù)據(jù)

瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別？

• 共同點(diǎn)
  都是保存在瀏覽器端，且同源的

• 區(qū)別

  • cookie 數(shù)據(jù)始終在同源的 http 請(qǐng)求中攜帶（即使不需要），即:

    • cookie 在瀏覽器和服務(wù)器間來回傳遞
    • cookie 數(shù)據(jù)還有路徑（path）的概念，可以限制 cookie 只屬于某個(gè)路徑下
    • 存儲(chǔ)大小限制也不同，cookie 數(shù)據(jù)不能超過 4k，同時(shí)因?yàn)槊看?http 請(qǐng)求都會(huì)攜帶 cookie，所以 cookie 只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)

  • 而 sessionStorage 和 localStorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。sessionStorage 和 localStorage 雖然也有存儲(chǔ)大小的限制，但比 cookie 大得多，可以達(dá)到 5M 或更大。

  • 數(shù)據(jù)有效期不同

    • sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持
    • localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)
    • cookie 只在設(shè)置的 cookie 過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

  • 作用域不同

    • sessionStorage 不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面
    • localStorage 在所有同源窗口中都是共享的
    • cookie 也是在所有同源窗口中都是共享的
    • Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便。

參考

題目4： 寫出如下 CSS3效果的簡(jiǎn)單事例

    1. 圓角， 圓形
    2. div 陰影
    3. 2D 轉(zhuǎn)換：放大、縮小、偏移、旋轉(zhuǎn)
    4. 3D 轉(zhuǎn)換：移動(dòng)、旋轉(zhuǎn)
    5. 背景色漸變
    6. 過渡效果
    7. 動(dòng)畫

預(yù)覽地址

題目5：實(shí)現(xiàn)如下全屏圖加過渡色的效果（具體效果隨意）DEMO

DEMO

題目6： 寫出如下 loading 動(dòng)畫效果 DEMO1 & DEMO2

DEMO 1
DEMO 2