1、 HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽
-
HTML5是什么？
1、HTML5 是對 HTML 標準的第五次修訂，2014年10月29日標準規(guī)范制定完成。
2、HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。
3、HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。 -
有哪些新特性？
1、語義：能夠讓你更恰當(dāng)?shù)孛枋瞿愕膬?nèi)容是什么。
2、連通性：能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進行通信。
3、離線 & 存儲：能夠讓網(wǎng)頁在客戶端本地存儲數(shù)據(jù)以及更高效地離線運行。
4、多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。
5、2D/3D 繪圖 & 效果：提供了一個更加分化范圍的呈現(xiàn)選擇。
6、性能 & 集成：提供了非常顯著的性能優(yōu)化和更有效的計算機硬件使用。
7、設(shè)備訪問 Device Access：能夠處理各種輸入和輸出設(shè)備。
8、樣式設(shè)計: 讓作者們來創(chuàng)作更加復(fù)雜的主題吧！ - 新增標簽？
| 元素 | 描述 |
|---|---|
| canvas | 標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API |
| audio | 定義音頻內(nèi)容 |
| video | 定義視頻（video 或者 movie） |
| source | 定義多媒體資源 <video> 和<audio> |
| embed | 定義嵌入的內(nèi)容，比如插件 |
| track | 為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道 |
| datalist | 定義選項列表。與 input 元素配合使用該元素，來定義 input 可能的值 |
| keygen | 規(guī)定用于表單的密鑰對生成器字段 |
| output | 定義不同類型的輸出，比如腳本的輸出 |
| article | 定義頁面正文內(nèi)容 |
| aside | 定義頁面內(nèi)容之外的內(nèi)容 |
| bdi | 設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置 |
| command | 定義命令按鈕，比如單選按鈕、復(fù)選框或按鈕 |
| details | 用于描述文檔或文檔某個部分的細節(jié) |
| dialog | 定義對話框，比如提示框 |
| summary | 標簽包含 details 元素的標題 |
| figure | 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等） |
| figcaption | 定義 <figure> 元素的標題 |
| footer | 定義 section 或 document 的頁腳 |
| header | 定義了文檔的頭部區(qū)域 |
| mark | 定義帶有記號的文本 |
| meter | 定義度量衡。僅用于已知最大和最小值的度量 |
| nav | 導(dǎo)航 |
| progress | 定義任何類型的任務(wù)的進度 |
| ruby | 定義 ruby 注釋（中文注音或字符） |
| rt | 定義字符（中文注音或字符）的解釋或發(fā)音 |
| rp | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容 |
| section | 定義文檔中的節(jié)（section、區(qū)段） |
| time | 定義日期或時間 |
| wbr | 規(guī)定在文本中的何處適合添加換行符 |
- 如何讓低版本的 IE 支持 HTML5新標簽
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');
同時，需要在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 | 用于輸入日期的控件（年，月，日，不包括時間）。 |
| datetime | 基于 UTC 時區(qū)的日期時間輸入控件（時，分，秒及幾分之一秒）。 |
| datetime-local | 用于輸入日期時間控件，不包含時區(qū)。 |
| 用于編輯 e-mail 的字段。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。 | |
| month | 用于輸入年月的控件，不帶時區(qū)。 |
| number | 用于輸入浮點數(shù)的控件。 |
| range | 用于輸入不精確值控件。 |
| search | 用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除。 |
| tel | 用于輸入電話號碼的控件；換行會被自動從輸入的值中移除A,，but no other syntax is enforced?？梢允褂脤傩裕热?pattern 和 maxlength 來約束控件輸入的值。恰當(dāng)?shù)臅r候，可以應(yīng)用 :valid 和 :invalid CSS 偽類。 |
| time | 用于輸入不含時區(qū)的時間控件。 |
| url | 用于編輯URL的字段。 The user may enter a blank or invalid address. 換行會被自動從輸入值中移隊?？梢允褂萌纾?strong>pattern 和 maxlength 樣的屬性來約束輸入的值。 恰當(dāng)?shù)臅r候使可以應(yīng)用 :valid 和 :invalid CSS 偽類。 |
| week | 用于輸入一個由星期-年組成的日期，日期不包括時區(qū)。 |
3、 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲刪除數(shù)據(jù)。
- cookie是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息，比如你登錄某個網(wǎng)站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實現(xiàn)的。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來回傳遞；cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會話標識。
- 而localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
- 數(shù)據(jù)生命周期不同，localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie一般由服務(wù)器生成，可設(shè)置失效時間。如果在瀏覽器端生成Cookie，默認是關(guān)閉瀏覽器后失效 。
- localStorage Storage接口的實現(xiàn)，它沒有到期時間，可以通過JavaScript來清除，或者通過清除瀏覽器緩存（Browser Cache ）/本地存儲數(shù)據(jù)（Locally Stored Data）來清除。
4、寫出如下 CSS3效果的簡單事例
- 圓角， 圓形 2. div 陰影 3. 2D 轉(zhuǎn)換：放大、縮小、偏移、旋轉(zhuǎn) 4. 3D 轉(zhuǎn)換：移動、旋轉(zhuǎn) 5. 背景色漸變 6. 過渡效果 7. 動畫
預(yù)覽
（注意：1、當(dāng)rotate旋轉(zhuǎn)時，坐標系也跟著轉(zhuǎn)的。2、transform多值時，translateZ要寫在rotate后面的，注意transform多值的時候的順序問題）
5、實現(xiàn)如下全屏圖加過渡色的效果（具體效果隨意）DEMO188
6、寫出如下 loading 動畫效果 DEMO1197 DEMO2183
(mission 7)
