1、 HTML5是什么？有哪些新特性模孩？有哪些新增標(biāo)簽隅津？如何讓低版本的 IE 支持 HTML5新標(biāo)簽
-
HTML5是什么陨闹？
1违施、HTML5 是對 HTML 標(biāo)準(zhǔn)的第五次修訂首量，2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成宰译。
2琐谤、HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體蟆技。
3、HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)斗忌。 -
有哪些新特性质礼？
1、語義：能夠讓你更恰當(dāng)?shù)孛枋瞿愕膬?nèi)容是什么织阳。
2眶蕉、連通性：能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進(jìn)行通信。
3唧躲、離線 & 存儲：能夠讓網(wǎng)頁在客戶端本地存儲數(shù)據(jù)以及更高效地離線運(yùn)行造挽。
4、多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民弄痹。
5饭入、2D/3D 繪圖 & 效果：提供了一個(gè)更加分化范圍的呈現(xiàn)選擇。
6界酒、性能 & 集成：提供了非常顯著的性能優(yōu)化和更有效的計(jì)算機(jī)硬件使用圣拄。
7、設(shè)備訪問 Device Access：能夠處理各種輸入和輸出設(shè)備毁欣。
8庇谆、樣式設(shè)計(jì): 讓作者們來創(chuàng)作更加復(fù)雜的主題吧！ - 新增標(biāo)簽凭疮？
| 元素 | 描述 |
|---|---|
| canvas | 標(biāo)簽定義圖形饭耳，比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API |
| audio | 定義音頻內(nèi)容 |
| video | 定義視頻（video 或者 movie） |
| source | 定義多媒體資源 <video> 和<audio> |
| embed | 定義嵌入的內(nèi)容执解，比如插件 |
| track | 為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道 |
| datalist | 定義選項(xiàng)列表寞肖。與 input 元素配合使用該元素，來定義 input 可能的值 |
| keygen | 規(guī)定用于表單的密鑰對生成器字段 |
| output | 定義不同類型的輸出衰腌，比如腳本的輸出 |
| article | 定義頁面正文內(nèi)容 |
| aside | 定義頁面內(nèi)容之外的內(nèi)容 |
| bdi | 設(shè)置一段文本新蟆，使其脫離其父元素的文本方向設(shè)置 |
| command | 定義命令按鈕，比如單選按鈕右蕊、復(fù)選框或按鈕 |
| details | 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) |
| dialog | 定義對話框琼稻，比如提示框 |
| summary | 標(biāo)簽包含 details 元素的標(biāo)題 |
| figure | 規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表饶囚、照片帕翻、代碼等等） |
| figcaption | 定義 <figure> 元素的標(biāo)題 |
| footer | 定義 section 或 document 的頁腳 |
| header | 定義了文檔的頭部區(qū)域 |
| mark | 定義帶有記號的文本 |
| meter | 定義度量衡鸠补。僅用于已知最大和最小值的度量 |
| nav | 導(dǎo)航 |
| progress | 定義任何類型的任務(wù)的進(jìn)度 |
| ruby | 定義 ruby 注釋（中文注音或字符） |
| rt | 定義字符（中文注音或字符）的解釋或發(fā)音 |
| rp | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容 |
| section | 定義文檔中的節(jié)（section嘀掸、區(qū)段） |
| time | 定義日期或時(shí)間 |
| wbr | 規(guī)定在文本中的何處適合添加換行符 |
- 如何讓低版本的 IE 支持 HTML5新標(biāo)簽
1紫岩、簡單的辦法是創(chuàng)建元素，然后添加css屬性睬塌。
(function() {
// 頁面頭部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
//或者用數(shù)組：
function createHtml5Mark(){
// arguments 序列化泉蝌，成為真下的數(shù)組
var args = Array.prototype.slice.call(arguments,0);
argLen = args.length,
doc = document;
// 循環(huán)數(shù)據(jù)創(chuàng)建元素
for(var i=0;i<argLen;i++){
doc.createElement(args[i]);
}
}
createHtml5Mark('article','aside','details','figcaption','figure','footer','header','hgroup','nav','section');
同時(shí)，需要在css添加屬性：
section,article,nav,header,footer{display:block;}
2衫仑、我們可以使用 Sjoerd Visscher 創(chuàng)建的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:
將以下代碼放在<head>中
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2梨与、input 有哪些新增類型堕花？
| 類型 | 含義 |
|---|---|
| color | 用于指定顏色的控件文狱。 |
| date | 用于輸入日期的控件（年，月缘挽，日瞄崇，不包括時(shí)間）。 |
| datetime | 基于 UTC 時(shí)區(qū)的日期時(shí)間輸入控件（時(shí)壕曼，分苏研，秒及幾分之一秒）。 |
| datetime-local | 用于輸入日期時(shí)間控件腮郊，不包含時(shí)區(qū)摹蘑。 |
| 用于編輯 e-mail 的字段。 合適的時(shí)候可以使用 :valid 和 :invalid CSS 偽類轧飞。 | |
| month | 用于輸入年月的控件衅鹿，不帶時(shí)區(qū)。 |
| number | 用于輸入浮點(diǎn)數(shù)的控件过咬。 |
| range | 用于輸入不精確值控件大渤。 |
| search | 用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動(dòng)移除掸绞。 |
| tel | 用于輸入電話號碼的控件泵三；換行會被自動(dòng)從輸入的值中移除A,，but no other syntax is enforced衔掸√棠唬可以使用屬性，比如 pattern 和 maxlength 來約束控件輸入的值敞映。恰當(dāng)?shù)臅r(shí)候较曼，可以應(yīng)用 :valid 和 :invalid CSS 偽類。 |
| time | 用于輸入不含時(shí)區(qū)的時(shí)間控件驱显。 |
| url | 用于編輯URL的字段诗芜。 The user may enter a blank or invalid address. 換行會被自動(dòng)從輸入值中移隊(duì)瞳抓。可以使用如：pattern 和 maxlength 樣的屬性來約束輸入的值伏恐。 恰當(dāng)?shù)臅r(shí)候使可以應(yīng)用 :valid 和 :invalid CSS 偽類孩哑。 |
| week | 用于輸入一個(gè)由星期-年組成的日期，日期不包括時(shí)區(qū)翠桦。 |
3横蜒、 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲刪除數(shù)據(jù)销凑。
- cookie是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明丛晌。它的主要用途有保存登錄信息，比如你登錄某個(gè)網(wǎng)站市場可以看到“記住密碼”斗幼，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實(shí)現(xiàn)的澎蛛。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞蜕窿；cookie數(shù)據(jù)還有路徑（path）的概念谋逻，可以限制cookie只屬于某個(gè)路徑下。存儲大小限制也不同桐经，cookie數(shù)據(jù)不能超過4k毁兆，同時(shí)因?yàn)槊看蝖ttp請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)阴挣，如會話標(biāo)識气堕。
- 而localStorage不會自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存畔咧。localStorage 雖然也有存儲大小的限制茎芭，但比cookie大得多，可以達(dá)到5M或更大盒卸。
- 數(shù)據(jù)生命周期不同骗爆，localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存蔽介，因此用作持久數(shù)據(jù)摘投；cookie一般由服務(wù)器生成，可設(shè)置失效時(shí)間虹蓄。如果在瀏覽器端生成Cookie犀呼，默認(rèn)是關(guān)閉瀏覽器后失效 。
- localStorage Storage接口的實(shí)現(xiàn)薇组，它沒有到期時(shí)間外臂，可以通過JavaScript來清除，或者通過清除瀏覽器緩存（Browser Cache ）/本地存儲數(shù)據(jù)（Locally Stored Data）來清除律胀。
4宋光、寫出如下 CSS3效果的簡單事例
- 圓角貌矿， 圓形 2. div 陰影 3. 2D 轉(zhuǎn)換：放大、縮小罪佳、偏移逛漫、旋轉(zhuǎn) 4. 3D 轉(zhuǎn)換：移動(dòng)、旋轉(zhuǎn) 5. 背景色漸變 6. 過渡效果 7. 動(dòng)畫
預(yù)覽
（注意：1赘艳、當(dāng)rotate旋轉(zhuǎn)時(shí)酌毡，坐標(biāo)系也跟著轉(zhuǎn)的。2蕾管、transform多值時(shí)枷踏，translateZ要寫在rotate后面的，注意transform多值的時(shí)候的順序問題）
5掰曾、實(shí)現(xiàn)如下全屏圖加過渡色的效果（具體效果隨意）DEMO188
6旭蠕、寫出如下 loading 動(dòng)畫效果 DEMO1197 DEMO2183
(mission 7)
