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