題目1： HTML5是什么就斤？有哪些新特性洋机？有哪些新增標(biāo)簽绷旗？如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5是超?本標(biāo)記語?的第五次重?修改副砍，2014年10?29?標(biāo)準(zhǔn)規(guī)范制定完成。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體膀懈。
HTML5 中的一些有趣的新特性：
- 用于繪畫的
canvas元素 - 用于媒介回放的
video和audio元素 - 對(duì)本地離線存儲(chǔ)的更好的支持
Localstorage - 新的語義化特殊內(nèi)容元素启搂，比如
article胳赌、footer匙隔、header、nav撼短、section - 新的表單控件曲横，比如
calendar不瓶、date蚊丐、time麦备、email、url、search
新增的結(jié)構(gòu)元素：
article元素 : 代表文檔膀捷、頁面或應(yīng)用程序中獨(dú)立的全庸、完整的壶笼、可以獨(dú)自被外部引用的內(nèi)容雁刷，與上下文不相關(guān)的獨(dú)立內(nèi)容
section元素 :表示頁面中的一個(gè)內(nèi)容區(qū)塊沛励，比如章節(jié)、頁眉坤候、頁腳或頁面中的其他部分 - 不要為沒有標(biāo)題的內(nèi)容區(qū)塊使用section元素
nav元素 :表示頁面中導(dǎo)航鏈接的部分白筹，例如：傳統(tǒng)導(dǎo)航條，側(cè)邊欄導(dǎo)航系馆，頁內(nèi)導(dǎo)航它呀，翻頁等
aside元素 : 表示article元素的內(nèi)容之外的棒厘、與article元素的內(nèi)容相關(guān)的輔助信息，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用淆院、側(cè)邊欄支救、廣告拷淘、導(dǎo)航條启涯，以及其他類似的有別于主要內(nèi)容的部分
header元素 :表示頁面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的標(biāo)題
footer元素 : 表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說黎做，它會(huì)包含創(chuàng)作者的姓名松忍、創(chuàng)作日期以及創(chuàng)作者聯(lián)系信息
figure元素 :表示一段獨(dú)立的流內(nèi)容蒸殿，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題鸣峭，這個(gè)標(biāo)簽經(jīng)常是在主文中引用圖片宏所，插圖，表格叽掘，代碼段等等
元素的調(diào)整：
具有boolean值的屬性:
<!-- 只寫屬性不寫屬性值代表屬性為true -->
<input type="checkbox" checked>
<!-- 不寫屬性代表屬性為false -->
<input type="checkbox">
<!-- 屬性值=屬性名,代表屬性為true -->
<input type="checkbox" checked="checked">
<!-- 屬性值=空字符串楣铁，代表屬性為true -->
<input type="checkbox" checked="">
低版本的IE支持HTML5：
- 第一種方式：引用google的html5.js文件。
<!--[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->
上面這段代碼僅會(huì)在IE瀏覽器下運(yùn)行更扁，還有一點(diǎn)需要注意盖腕，在頁面中調(diào)用html5.js文件必須添加在頁面的head元素內(nèi)赫冬，因?yàn)镮E瀏覽器必須在元素解析前知道這個(gè)元素，所以這個(gè)js文件不能在頁面底部調(diào)用劲厌。
- 第二種方式：自己創(chuàng)建這些元素：
(function() {
// 頁面頭部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
css 添加屬性：
section,article,nav,header,footer{display:block;}
題目2： input 有哪些新增類型雅任？
- url
- number
- range
- color
- Date Picker
- Date
- month
- week
- time
- datatime
題目3： 瀏覽器本地存儲(chǔ)中 cookie 、 localStorage寇漫、sessionStorage 有什么區(qū)別逸月？ localStorage 如何存儲(chǔ)刪除數(shù)據(jù)。
-
cookie：
Cook是小甜餅的意思岭粤。顧名思義猎物，Cookie是存儲(chǔ)在客戶端的小型文本文件淘讥，可以包含若干鍵值對(duì)，每個(gè)鍵值對(duì)可以設(shè)置過期時(shí)間（默認(rèn)過期時(shí)間為關(guān)閉瀏覽器時(shí)）。 Cookie會(huì)在每次發(fā)送HTTP請(qǐng)求時(shí)附加到Cookie頭字段，服務(wù)器以此得知用戶所處的狀態(tài)。它的主要用途有保存登錄信息，比如你登錄某個(gè)網(wǎng)站市場可以看到“記住密碼”，這通常就是通過在Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實(shí)現(xiàn)的。
localStorage
localStorage是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)奠货，它并不是什么劃時(shí)代的新東西溢陪。早在 IE 6 時(shí)代，就有一個(gè)叫userData的東西用于本地存儲(chǔ)邓馒，而當(dāng)時(shí)考慮到瀏覽器兼容性脉课，更通用的方案是使用 Flash。而如今庆揩，localStorage被大多數(shù)瀏覽器所支持蚌吸，如果你的網(wǎng)站需要支持 IE6+，那以userData 作為你的 polyfill 的方案是種不錯(cuò)的選擇
sessionStorage
sessionStorage與 localStorage 的接口類似缝彬，但保存數(shù)據(jù)的生命周期與 localStorage 不同奶卓。做過后端開發(fā)的同學(xué)應(yīng)該知道 Session這個(gè)詞的意思，直譯過來是“會(huì)話”。而 sessionStorage 是一個(gè)前端的概念，它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會(huì)話中保存下來孵稽，刷新頁面數(shù)據(jù)依舊存在惦积。但當(dāng)頁面關(guān)閉后，sessionStorage 中的數(shù)據(jù)就會(huì)被清空睦柴。
三者異同：
使用場景：
因?yàn)榭紤]到每個(gè) HTTP 請(qǐng)求都會(huì)帶著Cookie的信息，所以Cookie 當(dāng)然是能精簡就精簡啦越锈，比較常用的一個(gè)應(yīng)用場景就是判斷用戶是否登錄。針對(duì)登錄過的用戶，服務(wù)器端會(huì)在他登錄時(shí)往Cookie 中插入一段加密過的唯一辨識(shí)單一用戶的辨識(shí)碼粹湃，下次只要讀取這個(gè)值就可以判斷當(dāng)前用戶是否登錄啦歧斟。曾經(jīng)還使用 Cookie來保存用戶在電商網(wǎng)站的購物車信息，如今有了localStorage，似乎在這個(gè)方面也可以給Cookie放個(gè)假了~
而另一方面localStorage接替了 Cookie管理購物車的工作倾鲫，同時(shí)也能勝任其他一些工作。比如HTML5游戲通常會(huì)產(chǎn)生一些本地?cái)?shù)據(jù)悼做，localStorage也是非常適用的庶灿。如果遇到一些內(nèi)容特別多的表單，為了優(yōu)化用戶體驗(yàn)跷敬，我們可能要把表單頁面拆分成多個(gè)子頁面，然后按步驟引導(dǎo)用戶填寫。這時(shí)候sessionStorage 的作用就發(fā)揮出來了。
Localstorage如何操作數(shù)據(jù)：
- 設(shè)置值：
localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)
- 獲取值：
localStorage.a;
localStorage["a"];
localStorage.getItem("a")
- 刪除值：
localStorage.removeItem("a")
參考：詳說 Cookie, LocalStorage 與 SessionStorage
題目4： 寫出如下 CSS3效果的簡單事例
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)如下全屏圖加過渡色的效果（具體效果隨意）
效果
源碼
題目6： 寫出如下 loading 動(dòng)畫效果
效果1
源碼1
效果2
源碼2
