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

• 含義：HTML5是超文本標(biāo)記語言的第五次重大修改，2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成
• 特性
  • 語義特性
    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說明文檔。
  • 設(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ù)“推送”到客戶端的功能。
  • 網(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)簽
  <header>, <footer>,<dialog>, <aside>,< figure>等，這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用.
• 如何讓低版本的 IE 支持 HTML5新標(biāo)簽
  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)建的。·
  html5shiv的使用非常的簡(jiǎn)單，考慮到IE9是支持html5的，所以只需要在頁面head中添加如下代碼即可：
  <!–[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]–>

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

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

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

• 區(qū)別

1.Cookie是存儲(chǔ)在客戶端的小型文本文件，可以包含若干鍵值對(duì)，每個(gè)鍵值對(duì)可以設(shè)置過期時(shí)間（默認(rèn)過期時(shí)間為關(guān)閉瀏覽器時(shí)）。Cookie會(huì)在每次發(fā)送HTTP請(qǐng)求時(shí)附加到Cookie頭字段(浪費(fèi)帶寬)，服務(wù)器以此得知用戶所處的狀態(tài)。
2.LocalStorage是本地存儲(chǔ)（瀏覽器提供給js一個(gè)接口，可以讓js把一些變量存到本地），不會(huì)被發(fā)送到服務(wù)器上。同時(shí)空間比Cookie大很多，一般支持5-10M。

cookie、 localStorage 、sessionStorage的區(qū)別

• localStorage 如何存儲(chǔ)刪除數(shù)據(jù)

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// 存儲(chǔ)
localStorage.setItem('testObject', JSON.stringify(testObject));

// 獲取
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject))；
//清除
localStorage.removeItem("testObject");

題目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)畫
代碼地址

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

效果展示

題目6： 寫出如下 loading 動(dòng)畫效果 DEMO1171 DEMO2161

loading1
loading2