HTML5是什么翘瓮？有哪些新特性？有哪些新增標(biāo)簽？如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5是超文本標(biāo)記語言的第五次重大修改蔬胯，2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成
新特性:
- 語義特性
- 本地存儲特性
- 設(shè)備兼容特性
- 連接特性
- 網(wǎng)頁多媒體特性
- 性能與集成特性
新增標(biāo)簽:
- header: 定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo位他、頁面標(biāo)題和導(dǎo)航性的目錄氛濒。
- nav: 標(biāo)簽定義導(dǎo)航鏈接的部分。
- footer: 定義頁面或章節(jié)的尾部鹅髓。它經(jīng)常包含版權(quán)信息舞竿、法律信息鏈接和反饋建議用的地址。
- section: 定義文檔中的一個章節(jié)窿冯。
- article: 定義可以獨立于內(nèi)容其余部分的完整獨立內(nèi)容塊骗奖。
- aside: 定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理醒串。
- figure: 代表一個和文檔有關(guān)的圖例执桌。
- video: 定義視頻。像電影片段或其他視頻流厦凤。
- audio: 定義音頻鼻吮。如音樂或其他音頻流。
- canvas: 代表位圖區(qū)域 较鼓，可以通過腳本在它上面實時呈現(xiàn)圖形椎木，如圖表、游戲繪圖等博烂。
讓低版本的 IE 支持 HTML5新標(biāo)簽
方式一：Coding JavaScript
如果是IE9以下的IE瀏覽器將創(chuàng)建HTML5標(biāo)簽香椎， 而非IE瀏覽器就會忽視這段代碼。
<!--[if lt IE 9]>
<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 IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
不管使用以上哪種方法,都要初始化新標(biāo)簽的CSS.因為HTML5在默認(rèn)情況下表現(xiàn)為內(nèi)聯(lián)元素禽篱，對這些元素進(jìn)行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
input 有哪些新增類型畜伐？
<input type="email"> //用于編輯 e-mail 的字段。
<input type="url"> //用于編輯URL的字段躺率。
<input type="number"> //用于輸入浮點數(shù)的控件玛界。
<input type="date"> //用于輸入日期的控件（年万矾，月，日慎框，不包括時間）
<input type="datetime"> // 基于 UTC 時區(qū)的日期時間輸入控件（時良狈，分，秒及幾分之一秒）笨枯。
<input type="datetime-local"> // 用于輸入日期時間控件薪丁，不包含時區(qū)。
<input type="month"> //用于輸入年月的控件馅精，不帶時區(qū)严嗜。
<input type="week"> //用于輸入一個由星期-年組成的日期，日期不包括時區(qū)洲敢。
<input type="time"> //用于輸入不含時區(qū)的時間控件漫玄。
<input type="tel"> //用于輸入電話號碼的控件；換行會被自動從輸入的值中移除
<input type="color"> //用于指定顏色的控件沦疾。
<input type="range"> //用于輸入不精確值控件称近。
<input type="search"> //用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除哮塞。
瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別刨秆？ localStorage 如何存儲刪除數(shù)據(jù)。
cookie 和 localStorage的區(qū)別
| 特性 | cookie | localStorage |
|---|---|---|
| 數(shù)據(jù)的生命周期 | 可設(shè)置失效時間忆畅，默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除,否則永久保存 |
| 存放數(shù)據(jù)大小 | 4k左右 | 一般為5M |
| 與服務(wù)器端通信 | 每次都會攜帶在HTTP頭中衡未，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 |
| 易用性 | 需要程序員自己封裝家凯，源生的Cookie接口不友好 | 源生接口可以接受缓醋，亦可再次封裝來對Object和Array有更好的支持 |
localStorage 如何存儲刪除數(shù)據(jù)
| 屬性方法 | 說明 |
|---|---|
| localStorage.length | 獲得storage中的個數(shù) |
| localStorage.key(n) | 獲得storage中第n個元素對的鍵值（第一個元素是0） |
| localStorage.getItem(key) | 獲取鍵值key對應(yīng)的值 |
| localStorage.key | 獲取鍵值key對應(yīng)的值 |
| localStorage.setItem(key, value) | 添加數(shù)據(jù)，鍵值為key绊诲，值為value |
| localStorage.removeItem(key) | 移除鍵值為key的數(shù)據(jù) |
| localStorage.clear() | 清除所有數(shù)據(jù) |
寫出如下 CSS3效果的簡單事例
1. 圓角送粱， 圓形 2. div 陰影 3. 2D 轉(zhuǎn)換：放大、縮小掂之、偏移抗俄、旋轉(zhuǎn) 4. 3D 轉(zhuǎn)換：移動、旋轉(zhuǎn) 5. 背景色漸變 6. 過渡效果 7. 動畫
demo
