題目1： HTML5是什么？有哪些新特性荣月？有哪些新增標(biāo)簽？如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5是超文本標(biāo)記語言的第五次重大修改, 2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成
特性:
- 語義特性
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)捐下。更加豐富的標(biāo)簽將隨著對RDFa的萌业，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序婴程、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web抱婉。
- 本地存儲特性
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度蒸绩，這些全得益于HTML5 APP Cache患亿，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術(shù)之一）和API說明文檔步藕。
- 設(shè)備兼容特性
從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇沾歪，帶來了更多體驗功能的優(yōu)勢雾消。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)士骤。
- 連接特性
更有效的連接工作效率，使得基于頁面的實時聊天到旦，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)采呐。HTML5擁有更有效的服務(wù)器推送技術(shù)搁骑，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能仲器。
- 網(wǎng)頁多媒體特性
支持網(wǎng)頁端的Audio乏冀、Video等多媒體功能， 與網(wǎng)站自帶的APPS辆沦，攝像頭，影音功能相得益彰妒茬。
- 三維鹃彻、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas团赁、WebGL及CSS3的3D功能谨履，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果怀挠。
- 性能與集成特性
沒有用戶會永遠(yuǎn)等待你的Loading——HTML5會通過XMLHttpRequest2等技術(shù)害捕，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作尝盼。
- CSS3特性
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強的效果裁赠。此外，較之以前的Web排版绞幌，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性一忱。
| 元素 | 描述 |
|---|---|
| canvas | 標(biāo)簽定義圖形，比如圖表和其他圖像菇夸。該標(biāo)簽基于 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 | 用于描述文檔或文檔某個部分的細(xì)節(jié) |
| dialog | 定義對話框，比如提示框 |
| summary | 標(biāo)簽包含 details 元素的標(biāo)題 |
| figure | 規(guī)定獨立的流內(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 | 定義日期或時間 |
| wbr | 規(guī)定在文本中的何處適合添加換行符 |
兼容
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
//如果版本小于IE9就引入html5shiv.js, IE9以前的瀏覽器就能使用h5標(biāo)簽, 并使用定義好的樣式了; 這個標(biāo)簽必須放在head標(biāo)簽內(nèi), 因為瀏覽器要在解析之前知道這個元素
題目2： input 有哪些新增類型簿透？
- color 用于指定顏色
- email 用于編輯email的字段
- url 用于編輯URL的字段
- number 用于輸入浮點數(shù)
- range 用于輸入不精確值解藻，如果未指定相應(yīng)的屬性，控件使用如下缺省值：
- min：0
- max：100
- value：min + (max-min)/2啡浊，或者當(dāng)max小于min時使用min
- step：1
- search 用于輸入搜索字符串的單行文本字段胶背。換行會被從輸入的值中自動移除。
- tel 用于輸入電話號碼
- Date Picker
- date 用于輸入日期（年廷粒、月红且、日，不包括時間）
- month 用于輸入年月嗤放，不帶時區(qū)
- week 用于輸入由星期-年組成的日期壁酬，不帶時區(qū)
- time 用于輸入不含時區(qū)的時間控件
- datetime 基于 UTC 時區(qū)的日期時間輸入控件（時，分舆乔，秒及幾分之一秒）
- datetime-local 用于輸入日期時間控件，不包含時區(qū)派阱。
題目3： 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別斜纪？ localStorage 如何存儲刪除數(shù)據(jù)。
cookie
cookie的內(nèi)容主要包括：名字腺劣，值因块，過期時間，路徑和域趾断。路徑與域一起構(gòu)成cookie的作用范圍。若不設(shè)置過期時間芋酌，則表示這個cookie的生命期為瀏覽器會話期間，關(guān)閉瀏覽器窗口同云，cookie就消失堵腹。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不存儲在硬盤上而是保存在內(nèi)存里旱易，當(dāng)然這種行為并不是規(guī)范規(guī)定的荡含。若設(shè)置了過期時間，瀏覽器就會把cookie保存到硬盤上全释，關(guān)閉后再次打開瀏覽器误债，這些cookie仍然有效直到超過設(shè)定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進(jìn)程間共享李命，比如兩個IE窗口箫老。而對于保存在內(nèi)存里的cookie，不同的瀏覽器有不同的處理方式阔籽。
cookie的特點：
- cookie的大小受限制牲蜀，cookie大小被限制在4KB，不能接受像大文件或郵件那樣的大數(shù)據(jù)涣达。
- 只要有請求涉及cookie，cookie就要在服務(wù)器和瀏覽器之間來回傳送（這解釋為什么本地文件不能測試cookie）匆篓。而且cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），這也是Cookie不能太大的重要原因俺泣。正統(tǒng)的cookie分發(fā)是通過擴(kuò)展HTTP協(xié)議來實現(xiàn)的完残，服務(wù)器通過在HTTP的響應(yīng)頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應(yīng)的cookie横漏。
- 用戶每請求一次服務(wù)器數(shù)據(jù)缎浇，cookie則會隨著這些請求發(fā)送到服務(wù)器，服務(wù)器腳本語言如PHP等能夠處理cookie發(fā)送的數(shù)據(jù)素跺，可以說是非常方便的。當(dāng)然前端也是可以生成Cookie的刊愚，用js對cookie的操作相當(dāng)?shù)姆爆嵅妊椋瑸g覽器只提供document.cookie這樣一個對象，對cookie的賦值牡借，獲取都比較麻煩袭异。而在PHP中御铃，我們可以通過setcookie()來設(shè)置cookie畅买，通過$_COOKIE這個超全局?jǐn)?shù)組來獲取cookie。
localStorage
這是一種持久化的存儲方式谷羞，也就是說如果不手動清除溜徙，數(shù)據(jù)就永遠(yuǎn)不會過期蠢壹。
它也是采用Key - Value的方式存儲數(shù)據(jù)九巡，底層數(shù)據(jù)接口是sqlite，按域名將數(shù)據(jù)分別保存到對應(yīng)數(shù)據(jù)庫文件里疏日。它能保存更大的數(shù)據(jù)（IE8上是10MB撒汉，Chrome是5MB），同時保存的數(shù)據(jù)不會再發(fā)送給服務(wù)器睬辐，避免帶寬浪費溯饵。
localStorage的缺點
- localStorage大小限制在500萬字符左右，各個瀏覽器不一致
- localStorage在隱私模式下不可讀取
- localStorage本質(zhì)是在讀寫文件丰刊，數(shù)據(jù)多的話會比較卡（firefox會一次性將數(shù)據(jù)導(dǎo)入內(nèi)存啄巧，想想就覺得嚇人啊）
- localStorage不能被爬蟲爬取棵帽，不要用它完全取代URL傳參
localStorage.removeItem(key)：清除鍵值為key的數(shù)據(jù) localStorage.clear()：清除所有數(shù)據(jù)
題目4： 寫出如下 CSS3效果的簡單事例
1\. 圓角逗概， 圓形
2\. div 陰影
3\. 2D 轉(zhuǎn)換：放大、縮小逾苫、偏移铅搓、旋轉(zhuǎn)
4\. 3D 轉(zhuǎn)換：移動、旋轉(zhuǎn)
5\. 背景色漸變
6\. 過渡效果
7\. 動畫
地址
題目5： 實現(xiàn)如下全屏圖加過渡色的效果（具體效果隨意）DEMO260
地址
題目6： 寫出如下 loading 動畫效果 DEMO1268 DEMO2249
