淺談HTML5技術(shù)
2012-12-31 00:00:00劉杰
科技創(chuàng)新導(dǎo)報(bào) 2012年10期
摘 要:本文簡(jiǎn)單描述了HTML5的技術(shù)規(guī)范，對(duì)比HTML4.01標(biāo)準(zhǔn)介紹了HTML5的優(yōu)點(diǎn)和特性，結(jié)合實(shí)際運(yùn)用，描述了新增元素的功能和使用方法，從技術(shù)層面分析當(dāng)前HTML5改進(jìn)和補(bǔ)充的內(nèi)容，最后分析和總結(jié)HTML5發(fā)展的前景以及對(duì)未來(lái)市場(chǎng)的競(jìng)爭(zhēng)優(yōu)勢(shì)。
關(guān)鍵詞:HTML5 CSS3 JAVASCRIPT
中圖分類號(hào):ＴＰ３文獻(xiàn)標(biāo)識(shí)碼:A 文章編號(hào):1674-098X(2012)04(a)-0029-01
掌握HTML5技術(shù)，對(duì)于開發(fā)人員來(lái)說(shuō)不僅僅是掌握HTML語(yǔ)言，還包括CSS3、DOM 以及 JavaScript語(yǔ)言。雖然HTML5規(guī)范目前沒(méi)有完全確定，但絕大部分的瀏覽器已經(jīng)支持HTML5的部分功能，如Firefox、Chrome、Opera、IE9和Safari。每種瀏覽器對(duì)于HTML5技術(shù)的支持都不是完整的，因此想要實(shí)現(xiàn)一段在多瀏覽器中兼容的應(yīng)用程序仍然是今后程序員為之努力的重要工作之一。
HTML5技術(shù)標(biāo)準(zhǔn)是W3C聯(lián)盟和WHATWG組織在2007年開始合作提出的。新的HTML5標(biāo)準(zhǔn)避免了HTML4某些標(biāo)簽的復(fù)雜性，同時(shí)對(duì)舊版本提供良好的兼容性，既增強(qiáng)了自身繪圖能力及圖形硬件加速的功能，又增強(qiáng)了容錯(cuò)處理，并且增加了適合WEB需要的新的元素。
1 描述內(nèi)容的元素
以往在使用CSS+DIV來(lái)描述網(wǎng)頁(yè)架構(gòu)的過(guò)程中，由于使用統(tǒng)一的DIV標(biāo)簽，在描述表示內(nèi)容的過(guò)程中必須增加ID屬性或者CLASS屬性來(lái)區(qū)分不同的版塊，例如使用
來(lái)表示網(wǎng)頁(yè)頭部版塊，
來(lái)表示內(nèi)容版塊部分。在HTML5中使用了article、footer、header、nav、section和aside六類標(biāo)簽來(lái)分別表述頁(yè)面中的文章內(nèi)容、頁(yè)腳、頁(yè)眉、導(dǎo)航、分區(qū)和側(cè)邊欄。增加這六種標(biāo)簽的目的不是為了替換掉DIV標(biāo)簽，而是為了更好的定義頁(yè)面的各個(gè)部分，讓每個(gè)區(qū)塊更具有實(shí)際的意義，同時(shí)這六類標(biāo)簽還可以嵌套使用，例如在article標(biāo)簽中增加header和footer標(biāo)簽，這樣就可以非常方便設(shè)計(jì)和表述網(wǎng)頁(yè)的架構(gòu)結(jié)構(gòu)，同時(shí)可以讓搜索引擎方便的找到網(wǎng)頁(yè)的主要內(nèi)容并減少搜索時(shí)間。
2 改進(jìn)的表單驗(yàn)證
Input標(biāo)簽一直在表單中扮演重要的角色，相應(yīng)的type屬性在HTML4標(biāo)準(zhǔn)中包括了10種可以使用的類型(Text，Password，Radio，CheckBox，F(xiàn)ile，Button，Reset，Submit，Image，Hidden)，我們?cè)谖谋居?type=“Text”)中輸入符合格式要求的郵箱、日期、年齡、電話號(hào)碼等信息時(shí)，往往需要借助javascript及正則表達(dá)式來(lái)驗(yàn)證數(shù)據(jù)的有效性，雖然這是非常有效的，但是卻需要編寫一定量的腳本來(lái)完成，對(duì)于開發(fā)中經(jīng)常出現(xiàn)的驗(yàn)證內(nèi)容，如郵箱、日期等則增加了開發(fā)的工作量。HTML5標(biāo)準(zhǔn)中擴(kuò)展了Input標(biāo)簽中的Type屬性值，例如:color， date，datetime，datetime-local，month， week，time，email，number，range，search，tel以及url等，這些擴(kuò)展的屬性可以更加明確的表述文本框用戶應(yīng)該輸入些什么(請(qǐng)注意不同的瀏覽器支持的程度不同，不是所有的效果都可以實(shí)現(xiàn))。當(dāng)你使用Google Chrome瀏覽器運(yùn)行代碼則呈現(xiàn)的效果如圖1所示。如果執(zhí)行代碼
3 兼容的視頻和聲音處理
HTML5標(biāo)準(zhǔn)增加了video和audio兩個(gè)重要的元素，它將提供視頻和音頻回放能力。提及視頻播放，目前出現(xiàn)的兩大陣營(yíng):FLASH和HTML5，一個(gè)是當(dāng)前視頻播放的首選，一個(gè)是未來(lái)發(fā)展的方向。兩大陣營(yíng)各自都想打敗另一方。其實(shí)HTML5的設(shè)計(jì)目標(biāo)不是為了排斥某項(xiàng)技術(shù)，而是為了更好的兼容不同的瀏覽器。請(qǐng)看下面的代碼:
1.
2.
3.
4.
5.download
6.
7.
上面的代碼中包含了4個(gè)不同的層次。
1、如果瀏覽器支持video元素，也支持H264，用第一個(gè)視頻。
2、如果瀏覽器支持video元素，支持mov，那么用第二個(gè)視頻。
3、如果瀏覽器不支持video元素，那么試試Flash影片。
4、如果瀏覽器不支持video元素，也不支持Flash，只能給出了下載鏈接。
有了這幾個(gè)層次，已經(jīng)能夠適應(yīng)不同設(shè)備的大多數(shù)的瀏覽器了。
4 用于繪畫的canvas元素
HTML在表達(dá)頁(yè)面動(dòng)畫渲染中一直是有所欠缺，為了表示復(fù)雜絢麗的動(dòng)畫效果不得不借助FLASH或者JAVA等第三方插件技術(shù)，HTML5的最重要的特性非canvas畫布元素莫屬，借助canvas 元素，可以實(shí)現(xiàn)富客戶端的絢麗多彩的應(yīng)用程序，而不必借助第三方技術(shù)。
5 其他重要的元素，為了更好的適應(yīng)越來(lái)越復(fù)雜的頁(yè)面要求，HTML5還增加了details 、datagrid 、menu 、command等交互元素，figure、progress進(jìn)度顯示元素，配合javascript和css3，更加的豐富了頁(yè)面的顯示內(nèi)容
如此豐富多彩的特性，將會(huì)給用戶帶來(lái)新的瀏覽體驗(yàn)，可是遺憾的是目前瀏覽器的開發(fā)商對(duì)HTML5的支持仍然有所保留，想體驗(yàn)文中提到的新的特性和效果，用戶需要安裝2～3種不同的瀏覽器，現(xiàn)實(shí)中是不可能這樣的，沒(méi)有一個(gè)用戶會(huì)為了使用幾個(gè)新的特性而更換瀏覽器，因此HTML5標(biāo)準(zhǔn)中的特性最終能夠保留下來(lái)的，僅僅是各大瀏覽器廠商最終達(dá)成共識(shí)后統(tǒng)一保留下來(lái)的那些部分。這個(gè)標(biāo)準(zhǔn)取代舊的標(biāo)準(zhǔn)真正成為新的標(biāo)準(zhǔn)的過(guò)程中，仍然需要相當(dāng)一段時(shí)間努力。
