題目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 的津辩，有各種效果的頁面( 一種錯(cuò)誤但普遍的觀點(diǎn) )

有哪些新特性

• 語義特性
  HTML5 賦予網(wǎng)頁更好的意義和結(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)頁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ù)庫

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

• 連接特性
  更有效的連接工作效率青柄，使得基于頁面的實(shí)時(shí)聊天，更快速的網(wǎng)頁游戲體驗(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)頁自動(dòng)獲取來自服務(wù)器的更新

• 網(wǎng)頁多媒體特性
  支持網(wǎng)頁端的 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è)頁面
    • 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