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

HTML5是HTML標(biāo)準(zhǔn)最新的（第五次）修訂版本访娶，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)觉阅，將互聯(lián)網(wǎng)語(yǔ)義化崖疤，以便更好地被人類和機(jī)器閱讀，并同時(shí)提供更好地支持各種媒體的嵌入留拾。

新特性

• 語(yǔ)義特性
  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開(kāi)發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度豪嚎，這些全得益于HTML5 APP Cache搔驼，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說(shuō)明文檔侈询。
• 設(shè)備兼容特性
  從Geolocation功能的API文檔公開(kāi)以來(lái)舌涨，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)扔字。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口囊嘉。使外部應(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ù)“推送”到客戶端的功能博其。
• 網(wǎng)頁(yè)多媒體特性、
  支持網(wǎng)頁(yè)端的Audio迂猴、Video等多媒體功能慕淡， 與網(wǎng)站自帶的APPS，攝像頭错忱，影音功能相得益彰儡率。
  三維、圖形及特效特性（Class: 3D, Graphics & Effects）
  基于SVG以清、Canvas儿普、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中掷倔，所呈現(xiàn)的驚人視覺(jué)效果眉孩。
• 性能與集成特性
  沒(méi)有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，解決以前的跨域等問(wèn)題勒葱，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作浪汪。
• CSS3特性
  在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果凛虽。此外死遭，較之以前的Web排版，Web的開(kāi)放字體格式（WOFF）也提供了更高的靈活性和控制性凯旋。

新增標(biāo)簽

兼容IE9以下老版本
1.htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別丢习，這些新元素不能作為父節(jié)點(diǎn)包裹子元素牵触，并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實(shí)現(xiàn)咐低。html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的揽思。只需要在頁(yè)面head中添加如下代碼即可：

<!–[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]–>

添加css樣式：

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

2.如果需要的元素可知，并且是很少见擦，只需要添加以下js代碼在頭部就可以：

<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

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

email:定義用于 e-mail 地址的文本字段
url：定義用于 URL 的文本字段。
tel:定義用于電話號(hào)碼的文本字段鲤屡。
search:定義用于搜索的文本字段损痰。
number：定義帶有 spinner 控件的數(shù)字字段
range:定義帶有 slider 控件的數(shù)字字段。
Date:定義日期字段（帶有 calendar 控件）
month:定義日期字段的月（帶有 calendar 控件）
week:定義日期字段的周（帶有 calendar 控件）
time：定義日期字段的時(shí)酒来、分卢未、秒（帶有 time 控件）
datatime：定義日期字段（帶有 calendar 和 time 控件）

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

共同點(diǎn)：都是保存在瀏覽器端辽社，且同源的。
區(qū)別：

• cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）翘鸭，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞滴铅；cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下就乓。localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器汉匙，僅在本地保存拱烁。
• 存儲(chǔ)大小限制也不同。cookie數(shù)據(jù)不能超過(guò)4k盹兢，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie邻梆，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)绎秒。localStorage 雖然也有存儲(chǔ)大小的限制浦妄，但比cookie大得多，可以達(dá)到5M或更大见芹。
• 數(shù)據(jù)有效期不同剂娄。localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存玄呛，因此用作持久數(shù)據(jù)阅懦；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉徘铝。
• 作用域不同耳胎。localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的惕它。

localStorage 存儲(chǔ)數(shù)據(jù)

localStorage.name ='vanida怕午；
//localStorage["name"]='vanida'；
localStorage.setItem("name","vanida");

localStorage刪除數(shù)據(jù)

//清除name的值
localStorage.removeItem("name");
//localStorage.name＝'';
//localStorage清除所有值方法
localStorage.clear()

參考1
參考2

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

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

demo

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

demo

題目6： 寫(xiě)出如下 loading 動(dòng)畫(huà)效果

demo