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賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。比如HTML5增加了新的內(nèi)容標(biāo)簽，這些標(biāo)簽帶有一定的語義，使搜索引擎爬取你的網(wǎng)站信息更高效。比如：article、footer、header、nav、section。
②網(wǎng)頁多媒體特性
支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
三維、圖形及特效特性。
比如：新增 video、audio、Canvas 、SVG。
③離線 & 存儲(chǔ)特性
能夠讓網(wǎng)頁在客戶端本地存儲(chǔ)數(shù)據(jù)以及更高效地離線運(yùn)行(localStorage Indexed DB)
④連接特性
更有效的連接工作效率，使得基于頁面的實(shí)時(shí)聊天，更快速的網(wǎng)頁游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。
比如：HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
⑤設(shè)備兼容特性
HTML5提供了更多的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
⑥性能與集成特性
HTML5會(huì)通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
⑦CSS3特性
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。 -
新增標(biāo)簽
頁面結(jié)構(gòu)標(biāo)簽
<article>定義頁面正文內(nèi)容
<header>定義了文檔的頭部區(qū)域
<footer>定義一個(gè)文檔底部
<section>定義了文檔的某個(gè)區(qū)域
<aside>定義頁面內(nèi)容之外的內(nèi)容，比如：側(cè)邊欄
<nav>導(dǎo)航
<details>用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
<dialog>定義對(duì)話框，比如提示框
<summary>定義一個(gè)可見的標(biāo)題。 當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)會(huì)顯示出詳細(xì)信息,包含 details 元素的標(biāo)題
多媒體
<canvas>定義圖形標(biāo)簽，比如圖表和其他圖像。該標(biāo)簽基于JavaScript的繪圖API
<audio>定義音頻
<video>定義視頻
<source>定義多媒體資源<video> 和 <audio>
<embed>定義嵌入的內(nèi)容，比如插件
<track>為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道。
表單控件標(biāo)簽
<calendar>、<date>、<time>、<email>、<url>、<search>,<range>,<DatePickers>
新增的其它標(biāo)簽
<mark>,<progress>,<datalist>,<keygen>，<output>,<wbr>,<menu>等
Paste_Image.png
如何讓低版本的 IE 支持 HTML5新標(biāo)簽
<head>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>
這樣就可以支持HTML5的新標(biāo)簽
2.input 有哪些新增類型？
input 新增type主要有：
email 類型用于應(yīng)該包含 e-mail 地址的輸入域。
url 類型用于應(yīng)該包含 URL 地址的輸入域。
number 類型用于應(yīng)該包含數(shù)值的輸入域。
range 類型顯示為滑動(dòng)條。
Date Pickers日期選擇器
Paste_Image.png
3.瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別？ localStorage 如何存儲(chǔ)刪除數(shù)據(jù)。
①儲(chǔ)存方式不同：loaclStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，數(shù)據(jù)僅在客戶端（即瀏覽器）中保存；cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)器間來回傳遞，但如果使用cookie保存過多數(shù)據(jù)會(huì)帶來性能問題。
②數(shù)據(jù)大小限制不同：存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過4k，localStorage 雖然也有存儲(chǔ)大小的限制；但比cookie大得多，可以達(dá)到5M或更大
③數(shù)據(jù)有效期不同：一般由服務(wù)器生成，可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie，默認(rèn)是關(guān)閉瀏覽器后失效。cookie只在設(shè)置的cookie過期時(shí)間之前一直有效；而loaclStorage則是始終生效，除非清除緩存。
Localstorage如何操作數(shù)據(jù)：
- 設(shè)置值：
localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)
- 獲取值
localStorage.a;
localStorage["a"];
localStorage.getItem("a")
- 刪除值
清空全部數(shù)據(jù)：localStorage.clear()
刪除數(shù)據(jù)：localStorage.removeItem('a')
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)畫效果
Paste_Image.png
