HTML5簡(jiǎn)介
HTML5簡(jiǎn)介
什么是 HTML5?
HTML5 是下一代 HTML 標(biāo)準(zhǔn)。
HTML , HTML 4.01的上一個(gè)版本誕生于 1999 年。自從那以后,Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而,大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
HTML5 是如何起步的?
HTML5 是 W3C 與 WHATWG 合作的結(jié)果,WHATWG 指 Web Hypertext Application Technology Working Group。。
WHATWG 致力于 web 表單和應(yīng)用程序,而 W3C 專注于 XHTML 2.0。在 2006 年,雙方?jīng)Q定進(jìn)行合作,來(lái)創(chuàng)建一個(gè)新版本的 HTML。
HTML5 中的一些有趣的新特性:
用于繪畫(huà)的 canvas 元素
用于媒介回放的 video 和 audio 元素
對(duì)本地離線存儲(chǔ)的更好的支持
新的特殊內(nèi)容元素,比如 article、footer、header、nav、section
新的表單控件,比如 calendar、date、time、email、url、search
1、音頻視頻播放
視頻已經(jīng)在 Web 上廣泛流行了,但是其格式幾乎都是專有的。YouTube 使用 Flash,Microsoft 使用 Windows Media?,Apple 使用 QuickTime。在一種瀏覽器中用來(lái)嵌入這些內(nèi)容的標(biāo)記在另一種瀏覽器中是無(wú)效的。
HTML5新增<audio>和<video>標(biāo)簽使得瀏覽器不需要插件即可播放視頻和音頻。
對(duì)于以哪種格式和解碼器作為首選,仍然有爭(zhēng)議??赡軙?huì)強(qiáng)力推薦或要求使用 Ogg Theora。還可以可選地支持 QuickTime 等專有格式和 MPEG-4 等受專利限制的格式。實(shí)際使用的格式很可能由市場(chǎng)決定,就像是 GIF、JPEG 和 PNG 格式那樣(這些格式通過(guò)市場(chǎng)競(jìng)爭(zhēng)壓倒了 BMP、X-Bitmap 和 JPEG 2000 等競(jìng)爭(zhēng)者,成為 img 元素的首選格式)。
2、動(dòng)畫(huà) Canvas
HTML 5 引進(jìn)了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通過(guò) JavaScript 繪制圖形的方法,此方法使用簡(jiǎn)單但功能強(qiáng)大。每一個(gè) canvas 元素都有一個(gè)"上下文( context )" (想象成繪圖板上的一頁(yè)),在其中可以繪制任意圖形。瀏覽器支持多個(gè) canvas 上下文,并通過(guò)不同的 API 提供圖形繪制功能。下圖為基于 HTML5 Canvas 對(duì)象的 Invaders 經(jīng)典游戲。
3、地理信息
點(diǎn)擊地圖中,黃色小人上方的圓圈,可以告訴 Google 地圖你的地理位置。
HTML5 的另一個(gè)功能是地理信息定位功能,一些瀏覽器提供了 geolocation API ,這個(gè) API 也由 W3C 管理,可以結(jié)合 HTML5 實(shí)現(xiàn)你當(dāng)前地理位置定位。Google Maps 在使用該功能,在 Google 地圖上,有一個(gè)小圓圈,點(diǎn)擊一下,就能告訴 Google 地圖你現(xiàn)在的地理位置。目前,Geolocation API 并沒(méi)有被眾多桌面瀏覽器廣泛采用(只有 Chrome 和 Firefox 3.6+ 采用了),但 Google Gears 插件可以幫助那些舊瀏覽器實(shí)現(xiàn)該功能。
Twitter 借此實(shí)現(xiàn)地理信息感知的 tweets 消息,當(dāng)瀏覽器支持geolocation API 的時(shí)候,會(huì)自動(dòng)使用該 API,否則,則使用 Google Gears。
4、硬件加速、WEB SOCKET
5、本地離線應(yīng)用程序(即使在 Internet 連接中斷之后)
6、本地存儲(chǔ)
相對(duì)于HTML4只能使用cookie在客戶端存儲(chǔ)數(shù)據(jù),大小受限制,占用帶寬,操作復(fù)雜的情況,HTML5支持使用Web Storage在客戶端進(jìn)行存儲(chǔ)數(shù)據(jù),容量更大,減輕帶寬壓力,操作簡(jiǎn)便。
7、語(yǔ)義化標(biāo)記
HTML5的最大的意義在于改變了 Web 文檔的結(jié)構(gòu)方式,借助 header, footer, section, article 這些標(biāo)簽,我們可以實(shí)現(xiàn)更具結(jié)構(gòu)化,語(yǔ)義化的 Web 文檔。這樣,搜索引擎可以更容易索引 Web 站點(diǎn),我們也可以搜索到更快,更準(zhǔn)確的信息。
另外,借助 Microdata, HTML5 還可以實(shí)現(xiàn)更強(qiáng)大的語(yǔ)義結(jié)構(gòu),這個(gè)標(biāo)準(zhǔn)化的數(shù)據(jù)格式(類似 microformats),可以讓你的站點(diǎn)不僅能夠提供數(shù)據(jù),還能提供數(shù)據(jù)定義。Microdata 對(duì)瀏覽器和搜索引擎都意義深遠(yuǎn),搜索引擎可以借助 Microdata 發(fā)現(xiàn)你網(wǎng)絡(luò)中的好友,而瀏覽器則可以藉此連接到你的社會(huì)網(wǎng)絡(luò)好友站點(diǎn)。
HTML5 <!DOCTYPE>
<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡(jiǎn)單:
<!DOCTYPE html>
語(yǔ)義元素
HTML5 添加了很多語(yǔ)義元素如下所示:
HTML5的優(yōu)勢(shì)
1、提高可用性和改進(jìn)用戶的友好體驗(yàn);
2、新標(biāo)簽這將有助于開(kāi)發(fā)人員定義重要的內(nèi)容;
3、可以給站點(diǎn)帶來(lái)更多的多媒體元素(視頻和音頻);
4、可以很好的替代FLASH和Silverlight;
5、當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候,對(duì)于SEO很友好;
6、大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲。
HTML5的不足
1、HTML5 本身還在發(fā)展中,它不是用戶應(yīng)用的最迫切需求,更多是廠商試圖改變軟件生態(tài)格局的戰(zhàn)略需求。
2、HTML5的兼容性受限于各大瀏覽器表現(xiàn),例如微軟的IE和fireforx之間存在很多差別。
3、HTML5需要一個(gè)成熟完整的開(kāi)發(fā)環(huán)境,目前還缺少。
4、HTML5功能的暴增,瀏覽器必須有一個(gè)高效的圖形引擎和腳本引擎。
5、HTML5需要?dú)⑹旨?jí)應(yīng)用來(lái)吸引和引導(dǎo)用戶升級(jí)瀏覽器,最終完成HTML5終端的部署。
未來(lái)前景
從2012年1月的數(shù)據(jù)來(lái)看,全球已有超過(guò)34%的網(wǎng)站使用了HTML5技術(shù)。除去IE6-8瀏覽器外,其他主流瀏覽器都支持HTML5,其中僅有iPhone/iPad不支持Flash。
據(jù)IDC調(diào)查研究顯示,2013年全球各地將有10億人使用HTML5瀏覽器,將有200萬(wàn)開(kāi)發(fā)人員為HTML5瀏覽器開(kāi)發(fā)應(yīng)用。HTML5在未來(lái)的5-10年中,將成為移動(dòng)發(fā)展的一個(gè)重要因素。