`
為什么設(shè)計(jì)HTML5規(guī)范?
1.HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體

`

1. HTML5是什么？有哪些新特性？有哪些新增標(biāo)簽？如何讓低版本的 IE 支持 HTML5新標(biāo)簽?CSS3新特性有哪些?

• HTML5是超文本標(biāo)記語言的第五次重大修改，2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成.
  新特性:
• 語義：能夠讓你更恰當(dāng)?shù)孛枋瞿愕膬?nèi)容是什么.
• 連通性：能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進(jìn)行通信符糊。
• 離線 & 存儲(chǔ)：能夠讓網(wǎng)頁在客戶端本地存儲(chǔ)數(shù)據(jù)以及更高效地離線運(yùn)行。
• 多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民呛凶。
• 2D/3D 繪圖 & 效果：提供了一個(gè)更加分化范圍的呈現(xiàn)選擇男娄。
• 性能 & 集成：提供了非常顯著的性能優(yōu)化和更有效的計(jì)算機(jī)硬件使用。
• 設(shè)備訪問 Device Access：能夠處理各種輸入和輸出設(shè)備漾稀。
• 樣式設(shè)計(jì): 讓作者們來創(chuàng)作更加復(fù)雜的主題.
• Html5取代Flash在移動(dòng)設(shè)備的地位
• websocket:是一種協(xié)議模闲，可以讓我們建立客戶端到服務(wù)器端的全雙工通信，這就意味著服務(wù)器端可以主動(dòng)推送數(shù)據(jù)到客戶端

新增標(biāo)簽
canvas 標(biāo)簽定義圖形县好，比如圖表和其他圖像围橡。該標(biāo)簽基于 JavaScript 的繪圖 API
audio 定義音頻內(nèi)容
video 定義視頻（video 或者 movie）
output 定義不同類型的輸出，比如腳本的輸出
article 定義頁面正文內(nèi)容
aside 定義頁面內(nèi)容之外的內(nèi)容
footer 定義 section 或 document 的頁腳
header 定義了文檔的頭部區(qū)域
nav 導(dǎo)航
progress 定義任何類型的任務(wù)的進(jìn)度
section 定義文檔中的節(jié)（section缕贡、區(qū)段）

如何讓低版本的 IE 支持 HTML5新標(biāo)簽?

• 針對(duì)于IE6-9翁授，Safari 4.x和FF 3.x的HTML5元素的基本樣式.
  使用html5shiv

//安裝:bower install html5shiv --save-dev
<拣播！ - [if lt IE 9]> 
    <script src =“bower_components / html5shiv / dist / html5shiv.js”> </ script> 
<！[endif] - >

html5/css3參考

2.input 有哪些新增類型收擦？

button 定義可點(diǎn)擊的按鈕（通常與 JavaScript 一起使用來啟動(dòng)腳本）贮配。
checkbox 定義復(fù)選框。
email 定義用于 e-mail 地址的字段塞赂。
file 定義文件選擇字段和 "瀏覽..." 按鈕泪勒，供文件上傳。
hidden 定義隱藏輸入字段宴猾。
image 定義圖像作為提交按鈕圆存。

number 定義用于輸入數(shù)字的字段。
password 定義密碼字段（字段中的字符會(huì)被遮蔽）仇哆。
radio 定義單選按鈕沦辙。
range 定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。
reset 定義重置按鈕（重置所有的表單值為默認(rèn)值）讹剔。
search 定義用于輸入搜索字符串的文本字段油讯。
submit 定義提交按鈕。
tel 定義用于輸入電話號(hào)碼的字段延欠。
text 默認(rèn)陌兑。定義一個(gè)單行的文本字段（默認(rèn)寬度為 20 個(gè)字符）。
time 定義用于輸入時(shí)間的控件（不帶時(shí)區(qū)）由捎。
url 定義用于輸入 URL 的字段兔综。

//search
<input type="number" name="quantity" min="1" max="5">
//search
<input type="search" name="googlesearch">
//E-mail
<input type="email" name="usremail">

參考

3.瀏覽器本地存儲(chǔ)中 cookie 和 localStorage和sessionStorage 有什么區(qū)別？localStorage 如何存儲(chǔ)刪除數(shù)據(jù)?

Cookie

• Cookie 是小甜餅的意思隅俘。顧名思義邻奠，cookie 確實(shí)非常小，它的大小限制為4KB左右为居，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息杀狡，比如你登錄某個(gè)網(wǎng)站市場可以看到“記住密碼”蒙畴，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實(shí)現(xiàn)的。

localStorage

• localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)呜象，它并不是什么劃時(shí)代的新東西膳凝。早在 IE 6 時(shí)代，就有一個(gè)叫 userData 的東西用于本地存儲(chǔ)恭陡，而當(dāng)時(shí)考慮到瀏覽器兼容性蹬音，更通用的方案是使用 Flash。而如今休玩，localStorage 被大多數(shù)瀏覽器所支持著淆，如果你的網(wǎng)站需要支持 IE6+劫狠，那以 userData 作為你的 polyfill 的方案是種不錯(cuò)的選擇。

**sessionStorage 與 localStorage **的接口類似永部，但保存數(shù)據(jù)的生命周期與 localStorage 不同独泞。做過后端開發(fā)的同學(xué)應(yīng)該知道 Session 這個(gè)詞的意思，直譯過來是“會(huì)話”苔埋。而 sessionStorage 是一個(gè)前端的概念懦砂，它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會(huì)話中保存下來，刷新頁面數(shù)據(jù)依舊存在组橄。但當(dāng)頁面關(guān)閉后荞膘，sessionStorage 中的數(shù)據(jù)就會(huì)被清空。

三者的異同

image.png

localStorage和sessionStorage都具有相同的操作方法

• 存儲(chǔ)key: setItem("key","value").接收2個(gè)參數(shù)

sessionStorage.setItem("key", "value");     
localStorage.setItem("name", "tom");

• 獲取指定key本地存儲(chǔ)的值: getItem(key)

var value1 = sessionStorage.getItem("key");     
var site = localStorage.getItem("name");//'tom'

• removeItem刪除key: 刪除指定key本地存儲(chǔ)的值

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

• clear清除所有的key/value

sessionStorage.clear();    
localStorage.clear();

4.寫出如下 CSS3效果的簡單事例

1. 圓角玉工， 圓形
2. div 陰影
3. 2D 轉(zhuǎn)換：放大衫画、縮小、偏移瓮栗、旋轉(zhuǎn)
4. 3D 轉(zhuǎn)換：移動(dòng)削罩、旋轉(zhuǎn)
5. 背景色漸變
6. 過渡效果
7. loading圓環(huán)動(dòng)畫
   --->代碼預(yù)覽

5.實(shí)現(xiàn)全屏圖加過渡色的效果

代碼預(yù)覽

6. loading 動(dòng)畫效果demo

效果
代碼