題目1： HTML5是什么拆内？有哪些新特性涮俄？有哪些新增標(biāo)簽通砍？如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5簡介
HTML的英文全稱為Hyper Text Markup Language卑硫，即超文本標(biāo)記語言球昨。HTML5是HTML的一個新版本尔店。
HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定主慰。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)嚣州，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到匹配當(dāng)代的網(wǎng)絡(luò)需求共螺。廣義論及HTML5時该肴，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合璃谨。
HTML5新特性
- 用于繪畫的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內(nèi)容元素沙庐，比如 article鲤妥、footer佳吞、header、nav棉安、section
- 新的表單控件底扳，比如 calendar、date贡耽、time衷模、email、url蒲赂、search
HTML5 的改進(jìn)
- 新元素
- 新屬性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制圖
- 本地存儲
- 本地 SQL 數(shù)據(jù)
- Web 應(yīng)用
HTML5 多媒體
HTML5 應(yīng)用
- 使用 HTML5 你可以簡單地開發(fā)應(yīng)用-本地數(shù)據(jù)存儲
- 訪問本地文件
- 本地 SQL 數(shù)據(jù)
- 緩存引用
- Javascript 工作者
- XHTMLHttpRequest 2
HTML5 圖形
- 使用 HTML5 你可以簡單的繪制圖形:
- 使用 <canvas> 元素。
- 使用內(nèi)聯(lián) SVG滥嘴。
- 使用 CSS3 2D 轉(zhuǎn)換木蹬、CSS3 3D 轉(zhuǎn)換。
HTML5 使用 CSS3
- 圓角若皱， 圓形
- div 陰影
- 2D 轉(zhuǎn)換：放大镊叁、縮小、偏移走触、旋轉(zhuǎn)
- 3D 轉(zhuǎn)換：移動晦譬、旋轉(zhuǎn)
- 背景色漸變
- 過渡效果
- 動畫
HTML5 添加了很多語義元素如下所示：
| 標(biāo)簽 | 描述 |
|---|---|
| <article> | 定義頁面獨立的內(nèi)容區(qū)域。 |
| <aside> | 定義頁面的側(cè)邊欄內(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ī)定在文本中的何處適合添加換行符沈贝。 |
HTML5 瀏覽器支持
最新版本的 Safari、Chrome勋乾、Firefox 以及 Opera 支持某些 HTML5 特性宋下。Internet Explorer 9 將支持某些 HTML5 特性。
IE9 以下版本瀏覽器兼容HTML5的方法辑莫，使用本站的靜態(tài)資源的html5shiv包：
<!--[if lt IE9]><script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
載入后学歧，初始化新標(biāo)簽的CSS：
/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
題目2： input 有哪些新增類型？
- email類型（不是一個有效的email地址各吨，不允許提交該表單）
<input type=”email”/>
- url類型（輸入正確的url）
<inputy type=”url”/>
- date輸入類型（Opera上彈出一個日歷小掛件）
<input type=”date”/>
- time輸入類型（允許輸入一個24小時格式的時間并驗證）
<input type=”time”/>
- datetime類型
<input type=”datetime”/>
- month輸入類型（允許輸入和驗證一個月份枝笨，Opera彈出小掛件）
<input type=”month”/>
- week輸入類型（允許輸入和驗證一個周數(shù)，Opera彈出小掛件）
<input type=”week”/>
- number輸入類型
<input type=”number”/>
- range輸入類型（顯示一個滑塊條）
<input type=”range”/>
- search輸入類型
<input type=”search”/>
- tel輸入類型（沒有特殊的驗證）
<input type=”tel”/>
- color輸入類型(允許用戶通過選取器輸入一個顏色值绅你。目前伺帘，它只有BlackBerry上實現(xiàn)了。)
<input type=”color”/>
題目3： 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別忌锯？ localStorage 如何存儲刪除數(shù)據(jù)伪嫁。
Cookie
Cookie 是小甜餅的意思。顧名思義偶垮，cookie 確實非常小张咳，它的大小限制為4KB左右帝洪，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息脚猾，比如你登錄某個網(wǎng)站市場可以看到“記住密碼”葱峡，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實現(xiàn)的。
localStorage
localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)龙助，它并不是什么劃時代的新東西砰奕。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲提鸟，而當(dāng)時考慮到瀏覽器兼容性军援，更通用的方案是使用 Flash。而如今称勋，localStorage 被大多數(shù)瀏覽器所支持胸哥，如果你的網(wǎng)站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇赡鲜。
特性 |Chrome |Firefox (Gecko) |Internet Explorer |Opera |Safari (WebKit)
---|---|
localStorage |4 |3.5 |8 |10.50 |4
sessionStorage |5 |2 |8 |10.50 |4
sessionStorage
sessionStorage 與 localStorage 的接口類似空厌，但保存數(shù)據(jù)的生命周期與 localStorage 不同。做過后端開發(fā)的同學(xué)應(yīng)該知道 Session 這個詞的意思银酬，直譯過來是“會話”嘲更。而 sessionStorage 是一個前端的概念，它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會話中保存下來捡硅，刷新頁面數(shù)據(jù)依舊存在哮内。但當(dāng)頁面關(guān)閉后盗棵，sessionStorage 中的數(shù)據(jù)就會被清空壮韭。
三者的異同
localStorage和sessionStorage的方法
localStorage和sessionStorage都具有相同的操作方法，例如setItem纹因、getItem和removeItem等
setItem存儲value
用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem獲取value
用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例：
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例：
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代碼示例：
sessionStorage.clear(); localStorage.clear();
題目4： 寫出如下 CSS3效果的簡單事例
1. 圓角喷屋， 圓形
2. div 陰影
3. 2D 轉(zhuǎn)換：放大、縮小瞭恰、偏移屯曹、旋轉(zhuǎn)
4. 3D 轉(zhuǎn)換：移動、旋轉(zhuǎn)
5. 背景色漸變
6. 過渡效果
7. 動畫
