HTML5是什么铸抑?有哪些新特性?有哪些新增標(biāo)簽刨啸?如何讓低版本的 IE 支持 HTML5新標(biāo)簽获茬?、
HTML5?是 HTML標(biāo)準(zhǔn)的最新演進(jìn)版本,它是一個(gè)新的 HTML?語言版本包含了新的元素锰茉,屬性和行為呢蔫,同時(shí)包含了一系列可以被用來讓 Web 站點(diǎn)和應(yīng)用更加多樣化,功能更強(qiáng)大的技術(shù)飒筑。 這套技術(shù)往往被稱作?HTML5 和它的朋友們片吊,通常簡(jiǎn)稱為?HTML5
新特性
1.語意特性,添加<header><header/><nav><nav>等標(biāo)簽
2.多媒體, 用于媒介回放的 video 和 audio 元素
3.圖像效果协屡,用于繪畫的 canvas 元素俏脊,svg元素等
4.離線 & 存儲(chǔ),對(duì)本地離線存儲(chǔ)的更好的支持,local Store,Cookies等
5.設(shè)備兼容特性 ,HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口肤晓。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連爷贫,
6.連接特性,更有效的連接工作效率材原,使得基于頁面的實(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ù)“推送”到客戶端的功能
7.性能與集成特性威酒,HTML5會(huì)通過XMLHttpRequest2等技術(shù)窑睁,幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作
新增標(biāo)簽
1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表單元素:<datalist> ,<output> , <keygen>
3.新文檔節(jié)段和綱要:<header>頁面頭部挺峡、<section>章節(jié)、<aside>邊欄担钮、<article>文檔內(nèi)容橱赠、<footer>頁面底部、<section>章節(jié)箫津、<aside>邊欄狭姨、<article>文檔內(nèi)容、<footer>頁面底部等
使用html5shiv可以解決ie低版本不兼容的問題苏遥,只需要在head中加上,當(dāng)版本低于IE9時(shí)饼拍,瀏覽器會(huì)加載html5.js腳本,使得支持html5的新功能田炭,也可以將腳本文件下載到本地
兼容
使用html5shiv可以解決ie低版本不兼容的問題师抄,只需要在head中加上,當(dāng)版本低于IE9時(shí),瀏覽器會(huì)加載html5.js腳本教硫,使得支持html5的新功能叨吮,也可以將腳本文件下載到本地
<!--[if lt IE 9]>
? <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
? </script>
? <![endif]-->
input 有哪些新增類型?
color,選擇顏色
date 選擇日期
email 用于檢測(cè)輸入的是否為email格式的地址
month 選擇月份
number? 用于應(yīng)該包含數(shù)值的輸入域瞬矩,可以設(shè)定對(duì)輸入值的限定
range 用于定義一個(gè)滑動(dòng)條茶鉴,表示范圍
search 用于搜索,比如站點(diǎn)搜索或 Google 搜索
tel 輸入電話號(hào)碼
-time 選擇時(shí)間
url 輸入網(wǎng)址
week 選擇周和年
瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別丧鸯? localStorage 如何存儲(chǔ)刪除數(shù)據(jù)蛤铜。
共同點(diǎn):sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)丛肢。
區(qū)別
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞剿干,localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器蜂怎,僅在本地保存
2.cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下置尔,存儲(chǔ)大小限制也不同杠步,cookie數(shù)據(jù)不能超過4k,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie榜轿,所以cookie只適合保存很小的數(shù)據(jù)幽歼,如會(huì)話標(biāo)識(shí)。localStorage 雖然也有存儲(chǔ)大小的限制谬盐,但比cookie大得多甸私,可以達(dá)到5M或更大。localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器
3.cookie只在設(shè)置的cookie過期時(shí)間之前一直有效飞傀,即使窗口或?yàn)g覽器關(guān)閉皇型。localStorage:始終有效诬烹,窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù)
4.localStorage支持事件通知機(jī)制弃鸦,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者绞吁。 api 接口使用更方便。而cookie的原生接口不友好唬格,需要程序員自己封裝
HTML5中提供了localStorage對(duì)象可以將數(shù)據(jù)長(zhǎng)期保存在客戶端家破,除非人為清除,localStorage提供了幾個(gè)方法:
1.存儲(chǔ):localStorage.setItem(key,value)如果key存在時(shí)购岗,更新value
2.獲取localStorage.getItem(key)如果key不存在返回null
3.刪除localStorage.removeItem(key)一旦刪除汰聋,key對(duì)應(yīng)的數(shù)據(jù)將會(huì)全部刪除
4.全部清除localStorage.clear()使用removeItem逐個(gè)刪除太麻煩,可以使用clear,執(zhí)行的后果是會(huì)清除所有l(wèi)ocalStorage對(duì)象保存的數(shù)據(jù)
注意:localStorage存數(shù)的數(shù)據(jù)是不能跨瀏覽器共用的藕畔,一個(gè)瀏覽器只能讀取各自瀏覽器的數(shù)據(jù),儲(chǔ)存空間5M马僻。