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

HTML5是超文本標(biāo)記語言的第五次重大修改

特性

• 語義特性
  HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)敏弃。更加豐富的標(biāo)簽將隨著對(duì)RDFa的拟赊，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序过吻、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web蔗衡。

• 本地存儲(chǔ)特性
  基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間纤虽，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache粘都，以及本地存儲(chǔ)功能廓推。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說明文檔。

• 設(shè)備兼容特性
  從Geolocation功能的API文檔公開以來翩隧，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇樊展，帶來了更多體驗(yàn)功能的優(yōu)勢(shì)呻纹。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連专缠，例如視頻影音可直接與microphones及攝像頭相聯(lián)雷酪。

• 連接特性
  更有效的連接工作效率，使得基于頁面的實(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ù)“推送”到客戶端的功能。

• 網(wǎng)頁多媒體特性
  支持網(wǎng)頁端的Audio渔工、Video等多媒體功能锌钮， 與網(wǎng)站自帶的APPS，攝像頭引矩，影音功能相得益彰梁丘。
  三維、圖形及特效特性（Class: 3D, Graphics & Effects）
  基于SVG旺韭、Canvas氛谜、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中区端，所呈現(xiàn)的驚人視覺效果值漫。

• 性能與集成特性
  沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題织盼，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作惭嚣。

• CSS3特性
  在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果悔政。此外，較之以前的Web排版延旧，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性谋国。

新增標(biāo)簽

image.png

低版本的 IE 支持 HTML5新標(biāo)簽的方法：
使用第三方j(luò)s庫，例如：html5shiv
例子：

<!--[if lt IE 9]>            
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->

2. input 有哪些新增類型迁沫？

參考

1. email
2. url
3. number
4. range
5. Date Picker

• Date
• month
• week
• time
• datatime

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

• Cookie
  Cookie 是小甜餅的意思集畅。顧名思義近弟，cookie 確實(shí)非常小，它的大小限制為4KB左右挺智，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明祷愉。它的主要用途有保存登錄信息，比如你登錄某個(gè)網(wǎng)站市場(chǎ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ò)的選擇程拭。
  區(qū)別

Cookie一般由服務(wù)器生成，可設(shè)置失效時(shí)間帆阳。如果在瀏覽器端生成Cookie哺壶，默認(rèn)是關(guān)閉瀏覽器后失效,大小在4k左右，每次都會(huì)攜帶在HTTP頭中蜒谤，如果使用cookie保存過多數(shù)據(jù)會(huì)帶來性能問題山宾，需要程序員自己封裝，源生的Cookie接口不友好鳍徽。

localStorage除非被清除资锰，否則永久保存,存放數(shù)據(jù)的大小一般為5M，僅在客戶端（即瀏覽器）中保存阶祭，不參與和服務(wù)器的通信绷杜，源生接口可以接受，亦可再次封裝來對(duì)Object和Array有更好的支持濒募。

localSorage例子：

        save.addEventListener('click', function() {
            var name_input = document.querySelector('#name');

            localStorage.setItem('save-name', name_input.value);
        });

        read.addEventListener('click', function() {
            var readContent = document.querySelector('#read-content');

            var nameVal = localStorage.getItem('save-name');
            console.log('read 內(nèi)容', nameVal);
            readContent.innerHTML = nameVal;
        });

        deleteBtn.addEventListener('click', function() {
            localStorage.removeItem('save-name');
        })

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

代碼

image.png

5.實(shí)現(xiàn)如下全屏圖加過渡色的效果（具體效果隨意）

代碼

image.png

6. 寫出如下 loading 動(dòng)畫效果

代碼

image.png