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