HTML5是什么?有哪些新特性玫鸟?有哪些新增標(biāo)簽妥曲?如何讓低版本的 IE 支持 HTML5新標(biāo)簽
HTML5是最新的HTML標(biāo)準(zhǔn),2014年10月29日標(biāo)準(zhǔn)規(guī)范制定完成葵萎。
新特性:
語義特性
HTML5賦予網(wǎng)頁(yè)更好的意義和結(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)頁(yè)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è)應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇葫哗,帶來了更多體驗(yàn)功能的優(yōu)勢(shì)缔刹。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連劣针,例如視頻影音可直接與microphones及攝像頭相聯(lián)校镐。連接特性
更有效的連接工作效率,使得基于頁(yè)面的實(shí)時(shí)聊天捺典,更快速的網(wǎng)頁(yè)游戲體驗(yàn)鸟廓,更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)襟己,Server-Sent Event和WebSockets就是其中的兩個(gè)特性引谜,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。網(wǎng)頁(yè)多媒體特性
支持網(wǎng)頁(yè)端的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)簽:
- <article></article>
標(biāo)簽定義外部的內(nèi)容楼雹。比如來自一個(gè)外部的新聞提供者的一篇新的文章,或者來自 blog 的文本,或者是來自論壇的文本贮缅。亦或是來自其他外部源內(nèi)容榨咐。 - <aside></aside>
標(biāo)簽定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān) - <audio></audio>
標(biāo)簽定義聲音谴供,比如音樂或其他音頻流 - <canvas></canvas>
標(biāo)簽定義圖形块茁,比如圖表和其他圖像。這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的桂肌。它自己沒有行為数焊,但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。 - <command>
標(biāo)簽定義命令按鈕崎场,比如單選按鈕佩耳、復(fù)選框或按鈕。 - <datalist> </datalist>
標(biāo)簽定義可選數(shù)據(jù)的列表谭跨。與 input 元素配合使用干厚,就可以制作出輸入值的下拉列表。 - <details></details>
標(biāo)簽定義元素的細(xì)節(jié)饺蚊,用戶可進(jìn)行查看萍诱,或通過點(diǎn)擊進(jìn)行隱藏。與 <legend> 一起使用污呼,來制作 detail 的標(biāo)題。該標(biāo)題對(duì)用戶是可見的包竹,當(dāng)在其上點(diǎn)擊時(shí)可打開或關(guān)閉 detail燕酷。
- <figcaption></figcaption>
<figcaption> 是與其相關(guān)聯(lián)的圖片的說明/標(biāo)題,用?于描述其父節(jié)點(diǎn) 元素里的其他數(shù)據(jù), figcaption 元素應(yīng)該被置于 figure元素的第一個(gè)或最后一個(gè)子元素的位置周瞎。苗缩。同時(shí) figcaption 元素是可選的;如果沒有該元素声诸,這個(gè)父節(jié)點(diǎn)的圖片只是會(huì)沒有說明/標(biāo)題酱讶。 - <figure></figure>
標(biāo)簽用于對(duì)元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題彼乌。 - <footer></footer>
標(biāo)簽定義 section 或 document 的頁(yè)腳泻肯。典型地,它會(huì)包含創(chuàng)作者的姓名慰照、文檔的創(chuàng)作日期以及/或者聯(lián)系信息灶挟。 - <header></header>
標(biāo)簽定義 section 或 document 的頁(yè)眉。 - <nav></nav>
標(biāo)簽定義導(dǎo)航鏈接的部分毒租。 - <progress></progress>
標(biāo)簽運(yùn)行中的進(jìn)程稚铣。可以使用 <progress> 標(biāo)簽來顯示 JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。
讓低版本的 IE 支持 HTML5新標(biāo)簽:
HTML5 Shiv是JavaScript的一種備選方案惕医,該方案在IE9版本中優(yōu)先啟用HTML5元素樣式耕漱,但不允許使用沒有由JavaScript定義過的元素樣式。html5shiv.js用于在IE9以下的瀏覽器模擬html5的標(biāo)簽抬伺。
當(dāng)使用IE9以下版本的瀏覽器時(shí)孤个,加載html5shiv.js文件,其它的不加載沛简。
<!--[if lt IE 9 ]><script src="js/html5shiv.js"></script><![endif]-->
input 有哪些新增類型齐鲤?
- email
類型用于驗(yàn)證email的格式,當(dāng)提交表單時(shí)會(huì)自動(dòng)驗(yàn)證email域的值 - url
類型用于驗(yàn)證 URL 地址的格式椒楣,當(dāng)提交表單時(shí)會(huì)自動(dòng)驗(yàn)證url域的值 - number
類型會(huì)根據(jù)你的設(shè)置提供選擇數(shù)字的功能给郊,min屬性設(shè)置最小值、max屬性設(shè)置最大值捧灰,value屬性設(shè)置當(dāng)前值淆九,step屬性設(shè)定每次增長(zhǎng)的值,某些瀏覽器還不支持 - range
類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域毛俏,其會(huì)以一個(gè)滑塊的形式展現(xiàn)炭庙,min屬性設(shè)置最小值、max屬性設(shè)置最大值煌寇,value屬性設(shè)置當(dāng)前值焕蹄,如果沒有設(shè)置,則其默認(rèn)值的范圍是1-100
日期和時(shí)間類型:HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型: - date
選取日阀溶、月腻脏、年 - month
選取月、年 - week
選取周和年 - time
選取時(shí)間(小時(shí)和分鐘) - datetime
選取時(shí)間银锻、日永品、月、年(UTC 時(shí)間) - datetime-local
選取時(shí)間击纬、日鼎姐、月、年(本地時(shí)間) - search
類型用于搜索域更振,比如站點(diǎn)搜索或 Google 搜索炕桨,為其加上results="s"屬性,則會(huì)在搜索框前面加上一個(gè)搜索圖標(biāo) - tel
類型用于驗(yàn)證輸入的是否是電話格式的內(nèi)容殃饿,此元素現(xiàn)在還沒有瀏覽器支持 - color
類型會(huì)提供一個(gè)顏色拾取器谋作,供用戶選擇顏色,并將用戶選擇的顏色填充到此元素中
瀏覽器本地存儲(chǔ)中 cookie 和 localStorage 有什么區(qū)別乎芳? localStorage 如何存儲(chǔ)刪除數(shù)據(jù)遵蚜。
cookie
cookie是指瀏覽器存儲(chǔ)的少量數(shù)據(jù)帖池,同時(shí)它是與具體的web頁(yè)面或者站點(diǎn)相關(guān)的。cookie的數(shù)據(jù)會(huì)自動(dòng)在web瀏覽器和web服務(wù)器之間傳輸?shù)目跃唬虼朔?wù)端的腳本就可以讀睡汹、寫存儲(chǔ)在客戶端的cookie的值。在javascript中寂殉,cookie用于保存狀態(tài)以及能夠?yàn)閣eb瀏覽器提供一種身份識(shí)別機(jī)制囚巴,因此它們是不安全的。
localStorage
實(shí)現(xiàn)了web存儲(chǔ)草案標(biāo)準(zhǔn)的瀏覽器在window對(duì)象上定義了兩個(gè)屬性:localStorage 和sectionStorage,這兩個(gè)屬性都代表同一個(gè)對(duì)象Storage,
都是一個(gè)持久化關(guān)聯(lián)的數(shù)組友扰,數(shù)組使用字符串來索引彤叉,存儲(chǔ)的值也都是字符串形式的。Storage對(duì)象設(shè)置它的屬性為字符串值村怪,瀏覽器會(huì)將該值存儲(chǔ)起來秽浇。localStorage保存的數(shù)據(jù)長(zhǎng)期存在,下一次訪問該網(wǎng)站的時(shí)候甚负,網(wǎng)頁(yè)可以直接讀取以前保存的數(shù)據(jù)柬焕。除了保存期限的長(zhǎng)短不同,這兩個(gè)對(duì)象的屬性和方法完全一樣梭域。
cookie 和 localStorage 的區(qū)別:
localStorage擁有setItem getItem RemoveItem clear等方法斑举,其容量有10M,用于持久化的存儲(chǔ)病涨。cookie一般由服務(wù)器生成富玷,可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie没宾,默認(rèn)是關(guān)閉瀏覽器后失效,每個(gè) Cookie 的大小一般不能超過4KB凌彬。
localStorage 存儲(chǔ)刪除數(shù)據(jù)
localStorage保存的數(shù)據(jù),以“鍵值對(duì)”的形式存在,每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值循衰。所有的數(shù)據(jù)都是以文本格式保存。存入數(shù)據(jù)使用setItem方法褐澎。它接受兩個(gè)參數(shù)会钝,第一個(gè)是鍵名,第二個(gè)是保存的數(shù)據(jù)工三。
存儲(chǔ)數(shù)據(jù):
localStorage.setItem("x",1);//以x的名字存儲(chǔ)一個(gè)變量1
或者
localStorage.x= 1;//設(shè)置x為"1"
刪除數(shù)據(jù):
localStorage.removeItem("x");//刪除x項(xiàng)
localStorage.clear();//全部刪除
寫出如下 CSS3效果的簡(jiǎn)單事例
1. 圓角迁酸, 圓形
2. div 陰影
3. 2D 轉(zhuǎn)換:放大、縮小俭正、偏移奸鬓、旋轉(zhuǎn)
4. 3D 轉(zhuǎn)換:移動(dòng)、旋轉(zhuǎn)
5. 背景色漸變
6. 過渡效果
7. 動(dòng)畫