1： HTML5是什么？有哪些新特性？有哪些新增標(biāo)簽？如何讓低版本的 IE 支持
HTML5是超文本標(biāo)記語言的第五次重大修改，2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成。
新特性：
- 語義特性：HTML5增加了許多新標(biāo)簽，可以賦予網(wǎng)頁更好的意義和價值。使文檔語義化。
- 本地存儲特性：基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
1.localStorage - 沒有時間限制的數(shù)據(jù)存儲
2.sessionStorage - 針對一個 session 的數(shù)據(jù)存儲 - 設(shè)備兼容特性：HTML5提供了更多的數(shù)據(jù)和應(yīng)用接口，使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連。例如視頻影音可直接與攝像頭相聯(lián)。
- 連接特性： HTML5有更有效的連接工作效率，使得基于頁面的實時聊天技術(shù)、更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到實現(xiàn)。
- 網(wǎng)頁多媒體特性：HTML5支持了網(wǎng)頁端的Audio、Video等多媒體功能。同時也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
- 性能與集成特性：HTML5通過XMLHttpRequest2等技術(shù)，更好的解決了跨域等問題。
- CSS3特性：CSS3提供了更多的風(fēng)格和更強(qiáng)的效果。
新增標(biāo)簽
HTML5新增標(biāo)簽
廢棄的元素和屬性
讓低版本的 IE 支持
html5shiv.js
通過JavaScript 來創(chuàng)建HTML5元素(如 main, header, footer等)。在某種程度上通過JavaScript 創(chuàng)建的元素是 styleable(可樣式)的。
在 <head>中引入
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
2： input 有哪些新增類型？
1. email 輸入的郵箱要滿足郵箱地址的規(guī)范 @
2. url 輸入的連接要滿足連接的規(guī)范 http://...
3. number 輸入的是數(shù)字才有效，輸入其他無效
email、url、number相當(dāng)于對輸入的數(shù)值進(jìn)行正則驗證，不符合要求則出現(xiàn)提示框
4. range(拖動選擇數(shù)值，變成一個百分比條)
5. date (直接生成了一個日歷)
- Date
- month
- week
- time
- datatime
3： 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲刪除數(shù)據(jù)。
Cookie
Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息，比如你登錄某個網(wǎng)站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實現(xiàn)的。
localStorage
localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)，它并不是什么劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲，而當(dāng)時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數(shù)瀏覽器所支持，如果你的網(wǎng)站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。
sessionStorage
sessionStorage 與 localStorage 的接口類似，但保存數(shù)據(jù)的生命周期與 localStorage 不同。 sessionStorage 可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會話中保存下來，刷新頁面數(shù)據(jù)依舊存在。但當(dāng)頁面關(guān)閉后，sessionStorage 中的數(shù)據(jù)就會被清空。
三者的異同
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數(shù)據(jù)的生命期 | 一般由服務(wù)器生成，可設(shè)置失效時間。如果在瀏覽器端生成Cookie，默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除 |
| 存放數(shù)據(jù)大小 | 4K左右 | 5MB | 5MB |
| 與服務(wù)器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 |
應(yīng)用場景
- Cookie 應(yīng)用場景: 判斷用戶是否登錄。針對登錄過的用戶，服務(wù)器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當(dāng)前用戶是否登錄。
- localStorage 接替了 Cookie 保存用戶在電商網(wǎng)站的購物車信息，同時也用于保存HTML5游戲產(chǎn)生的一些本地數(shù)據(jù)。
- 如果遇到一些內(nèi)容特別多的表單，為了優(yōu)化用戶體驗，將把表單頁面拆分成多個子頁面，然后按步驟引導(dǎo)用戶填寫。這時候 sessionStorage 的作用就發(fā)揮出來了。
參考資料
what is the difference between localStorage, sessionStorage, session and cookie?
HTML5 localStorage security
維基百科 - Cookie
Web Storage API
瀏覽器本地數(shù)據(jù)（sessionStorage、localStorage、cookie）與server端數(shù)據(jù)
HTMl5的sessionStorage和localStorage
HTML5 LocalStorage 本地存儲
4： 寫出如下 CSS3效果的簡單事例
1. 圓角， 圓形
2. div 陰影
3. 2D 轉(zhuǎn)換：放大、縮小、偏移、旋轉(zhuǎn)
4. 3D 轉(zhuǎn)換：移動、旋轉(zhuǎn)
5. 背景色漸變
6. 過渡效果
7. 動畫
圓角 陰影 2D 轉(zhuǎn)換 背景色漸變 過渡效果 動畫
3D 轉(zhuǎn)換
