第11頁共11頁HTML5新特性摘要：HTML5的標(biāo)準(zhǔn)幾年前就已經(jīng)被提出，但發(fā)展一直受到各方面的限制，不僅來自于自身的原因，更主要的是由于各瀏覽器供應(yīng)商對HTML5標(biāo)準(zhǔn)的支持程度，在富客戶端發(fā)展迅速的今天，F(xiàn)lash幾乎達(dá)到了一個壟斷的地位，但HTML5向flash提出了挑戰(zhàn)，它添加了諸多的特性，添加了多媒體的支持以及用于圖形繪制的新標(biāo)簽，使用戶可以脫離外部插件達(dá)到豐富的用戶體驗(yàn)，HTML5的發(fā)展是否會一帆風(fēng)順，能否撼動flash的霸主地位，這一切都只有讓時間來告訴我們。關(guān)鍵詞：HTML5;flash;標(biāo)準(zhǔn)

目錄HTML5新特性 1一、HTML的發(fā)展歷史 31.1、標(biāo)記語言的發(fā)展 31.2、HTML版本的演變歷史 3二、HTML5的新特性 42.1、視頻 42.2、音頻 52.3、畫布（Canvas） 52.4、HTML5之Web存儲 62.5、新的input類型 72.6、新的表單類型 72.7、新增加的表單屬性 8三、HTML5與flash 83.1、技術(shù)方面 83.2、商業(yè)方面 10[4]、BruceLawson(著).Introducing.HTML52011-1-2 11

一、HTML的發(fā)展歷史1.1、標(biāo)記語言的發(fā)展HTML的英文全稱是(HyperTextMarkupLanguage),中文名稱則是超文本標(biāo)記語言，主要用于在互聯(lián)網(wǎng)上基于HTTP協(xié)議的網(wǎng)絡(luò)傳輸，它作為標(biāo)記語言的主力成員，首先了解一下它的發(fā)展歷程（圖一）。圖一、HTML發(fā)展歷程GML(GeneralizedMarcupLanguage)通用標(biāo)記語言和SGML(StandardGeneralizedMarkupLanguage)標(biāo)準(zhǔn)通用標(biāo)記語言都是IBM公司的員工創(chuàng)立的，SGML在1986年被國際標(biāo)準(zhǔn)化組織（ISO）所采納，成為了通用的標(biāo)準(zhǔn)語言。但是因?yàn)檫@種語言的使用成本太高，所以在很長的一段時間內(nèi)并沒有被推廣。1989年，簡化版的SGML及HTML誕生，但是HTML的發(fā)展并非一帆風(fēng)順，因?yàn)镠TML的規(guī)范較少，功能也較簡單，在發(fā)展的過程中不斷的添加新的標(biāo)簽，致使后來整個HTML體系十分臃腫，兼容性也非常差。這種情況一直持續(xù)到HTML4.0標(biāo)準(zhǔn)的出臺。XML（eXtensibleMarkupLanguage）可擴(kuò)展的標(biāo)記語言在98年被w3c批準(zhǔn)為1.0版本的規(guī)范，他的出現(xiàn)掀起了電子商務(wù)大潮，國際上許多知名大公司都無一例外地全面擁抱XML，包括微軟、IBM、Sun。甚至有人宣稱只要是電子商務(wù)軟件,它就得必須支持ＸＭＬ。但是HTML4.0標(biāo)準(zhǔn)的通過，讓HTML重新回到了主導(dǎo)地位。也為HTML的發(fā)展找到了一條合適的道路。XML當(dāng)然也并沒有就此退出歷史舞臺，現(xiàn)在經(jīng)常會被應(yīng)用到數(shù)據(jù)傳輸保存等方面。1.2、HTML版本的演變歷史HTML自身版本也經(jīng)歷了很多次演變，從1.0到XHTML2.0，再到現(xiàn)在即將推廣的HTML5。? HTML2.0——1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過時。? HTML3.2——1996年1月14日，W3C推薦標(biāo)準(zhǔn)。? HTML4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)。? HTML4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)? XHTML1.0——發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布。? XHTML1.1,于2001年5月31日發(fā)布。? (XHTML2.0,W3C工作草案)xhtml2.0因?yàn)楦膭舆^大，學(xué)習(xí)這個新技術(shù)的成本過高而最終胎死腹中。現(xiàn)在最常用的還是XHTML1.0的標(biāo)準(zhǔn)了。二、HTML5的新特性HTML5給我們帶來了很多人性化和方便的改變，包括新的解析順序、新的元素、新的方法、新的input屬性等，下面就有特點(diǎn)的幾個主要元素和屬性做簡單的總結(jié)。2.1、視頻對多媒體的支持可以說是HTML5的一個非常大的亮點(diǎn)，用戶再也不用借助于第三方的插件比如flash插件，省去了中間繁雜的配置環(huán)節(jié)，最主要的是運(yùn)行環(huán)境的變化帶來了性能上的提升和資源上的節(jié)約。示例：HTML代碼<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>運(yùn)行效果（圖二）：圖二、HTML5video標(biāo)簽效果<video>標(biāo)簽的屬性：屬性 值 說明autodisplay autoplay 如果出現(xiàn)該值，則會在視頻就緒后立刻播放controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。height pixels 視頻播放器的高度，以像素為單位width pixels 視頻播放器的寬度，以像素為單位loop loop 如果出現(xiàn)該值，則會在播放完畢后自動重新播放preload preload 是否提前加載，如果為autodisplay則會忽略該屬性src url 播放的視頻的URL說明：Video元素允許包含多個source元素，source元素可以鏈接多個不同的視頻文件，瀏覽器會使用第一個可以識別的文件。<video>與</video>之間插入的內(nèi)容是供不支持video元素的瀏覽器顯示的，比如放置一張圖片或者文字替換。2.2、音頻對多媒體支持的第二個關(guān)鍵元素則是對音頻的支持，使用audio標(biāo)簽，使用上和video的使用方法相近，支持的音頻文件格式主要包括wav、MP3、ogg，避免了對flash等外部插件的依賴。2.3、畫布（Canvas）提到畫布這一概念，我想可能會有一點(diǎn)疑問，這就好比想windows自帶的畫圖軟件，我們可以在上面自由的畫圖，而其中的畫布就和此處的Canvas有相似之處。HTML5中canvas使用Javascript在網(wǎng)頁上繪制圖形，畫布是一個舉行的區(qū)域，我們可以在控制上面的每一個像素的屬性，canvas擁有多種繪制圖形、路徑、矩陣和添加圖形的方法。(1) 創(chuàng)建Canvas<canvasid="myCanvas"width="200"height="100"></canvas>指定創(chuàng)建的畫布的寬度和高度。(2)調(diào)用JavaScript進(jìn)行繪圖用于canvas自身不具有畫圖能力，所以必須調(diào)用Javascript來完成繪圖工作。<scripttype="text/javascript">varc=document.getElementById("myCanvas");/*尋找canvas元素*/varcxt=c.getContext("2d");/*c.getContext("2d")返回的是html5內(nèi)建的對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法*/cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);/*設(shè)置填充顏色為紅色，調(diào)用fillRect方法繪制矩形*/</script>更多的API接口方法可查閱相關(guān)資料，利用這些接口我們可以繪制出很多復(fù)雜交互性優(yōu)秀的程序，下面是一個優(yōu)秀應(yīng)用的截圖（圖三）：圖三、Canvas的圖形繪制功能2.4、HTML5之Web存儲在客戶端存儲數(shù)據(jù)，在HTML5中提供了以下兩種方式：? localStorage? sessionStorage在HTML4中客戶數(shù)據(jù)的存儲主要是依靠cookie來實(shí)現(xiàn)的，但是cookie得缺點(diǎn)是不適合大數(shù)據(jù)的存儲，因?yàn)樗麄兊膫鬟f依賴于對服務(wù)器的請求，這使得cookie的速度慢并且效率低下。在HTML5中數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)，HTML5使用JavaScript來存儲和訪問數(shù)據(jù)。localStorage方法說明：localStorage方法存儲的數(shù)據(jù)沒有時間限制使用方式如下：<scripttype="text/javascript">localStorage.lastname="Smith";/*使用javascript寫入數(shù)據(jù)*/document.write(localStorage.lastname);</script>sessionStorage方法說明：該方法是基于會話來存儲數(shù)據(jù)的，當(dāng)瀏覽器關(guān)閉后，存儲的數(shù)據(jù)就會被刪除。<scripttype="text/javascript">sessionStorage.lastname="Smith";/*使用javascript寫入數(shù)據(jù)*/document.write(sessionStorage.lastname);</script>2.5、新的input類型HTML5提供了新的input類型，這些新加的類型可以讓對用戶輸入數(shù)據(jù)的驗(yàn)證變得更加簡單方便，主要有以下幾種類型：? email? url? number? range? Datepickers(date,month,week,time,datetime,datetime-local)? search? color新的input類型提供了新的email、url地址、數(shù)字、范圍、日期選擇、搜索、顏色類型，在提交頁面時會自動進(jìn)行驗(yàn)證，在以前的操作中，主要是使用JavaScript腳本通過正則表達(dá)式來驗(yàn)證用戶輸入數(shù)據(jù)的合法性。2.6、新的表單類型HTML5添加了新的表單類型，主要有以下幾種：? datalistdatalist元素規(guī)定輸入域的選項(xiàng)列表，列表是通過datalist內(nèi)的option元素創(chuàng)建的。? keygenkeygen元素的作用是提供一種驗(yàn)證用戶的可靠方法。? outputoutput元素用于不同類型的輸出，比如計(jì)算或腳本輸出。2.7、新增加的表單屬性新增加的表單包括新的form表單和input表單的屬性，提升網(wǎng)站整體性能提供了更好的表現(xiàn)。三、HTML5與flash在客戶端領(lǐng)域，在flash出現(xiàn)之前出現(xiàn)了很多很優(yōu)秀的圖形繪制工作，其中包括javaapplet，他們都各具特色，但flash推出之后便迅速占據(jù)了市場，結(jié)束了這場戰(zhàn)爭，今天的法拉盛可謂是如日中天，成為了富客戶端不可缺少的一部分，大量應(yīng)用于游戲，廣告等領(lǐng)域，但在HTML5推出后迅速獲得了許多業(yè)內(nèi)巨頭的青睞，包括Google、Apple，就連最不遵守標(biāo)準(zhǔn)的微軟也在IE9中添加了對HTML5的支持，那HTML5與flash各有什么優(yōu)缺點(diǎn)呢，能否順利的普及，下面就就技術(shù)和商業(yè)方面做簡要的比較。3.1、技術(shù)方面HTML5與Flash在功能上并不是完全重疊的，比如對于攝像頭等計(jì)算機(jī)硬件的調(diào)用，仍然只能使用Flash或其他方法實(shí)現(xiàn)。但是HTML5卻引入了一些讓Flash不得不認(rèn)真對待的元素。其中最為人所知的和最重要的即為canvas和video標(biāo)簽。在我看來，其他的新屬性跟Flash的競爭關(guān)系很弱，只有此二者是真真正正要搶Flash的飯碗，而且一旦普及，將深刻的改變整個互聯(lián)網(wǎng)，可謂是HTML5的左膀右臂。canvas相比Flash顯然是有其優(yōu)點(diǎn)的：(1)、它不依賴于外部插件、與瀏覽器渲染引擎緊密結(jié)合、節(jié)約資源，最重要的是極大的簡化了圖形和網(wǎng)頁中其他元素的交互過程。(2)、對于Flash來說，使Flash中的元素與網(wǎng)頁中其他元素進(jìn)行交互是要消耗大量時間和資源的，另外在編程上也相當(dāng)不方便。(3)、而canvas本身就是HTML5的一個元素，可以像操作普通HTML元素一樣操作它。開發(fā)人員可以將所有的代碼整齊的寫在一個文件里，降低了維護(hù)與更新的難度。然而canvas也有其缺點(diǎn)：其一，開發(fā)者不得不編程描繪每一個點(diǎn)和矢量曲線，在旋轉(zhuǎn)縮放時更需要和矩陣變換打交道，這會增加描繪復(fù)雜圖形的難度。而在Flash里，圖形顯示的API被封裝在名為“Sprite(顯示列表)”的類里，大部分圖形元素都繼承于此類，開發(fā)者可以使用多種工具設(shè)計(jì)圖形，對圖形進(jìn)行旋轉(zhuǎn)放縮只需要簡單的調(diào)用類的函數(shù)。其二，動畫的實(shí)現(xiàn)存在缺憾。canvas雖然提供了不同于傳統(tǒng)的通過div塊實(shí)現(xiàn)動畫的方法，但這種方法仍然非常繁瑣。開發(fā)者必須在每一楨動畫顯示時清空畫布，然后重畫所有元素，這必然導(dǎo)致包含大量元素的場景動畫緩慢，只移動少量元素就要重畫整個畫布會浪費(fèi)大量資源。而且創(chuàng)建動畫也是一件十分繁瑣的事情。相比起來，F(xiàn)lash的實(shí)現(xiàn)就方便多了，雖然從最底層來說，動畫時仍然需要重畫整個畫布，但其被交予FlashPlayer自動處理，無需開發(fā)者手動管理。基于字節(jié)碼的Flash在解析的過程中將會比即時編譯的HTML5和JavaScript快速。一般來說，復(fù)雜動畫將會更流暢。另外，良好封裝的圖形類和強(qiáng)大的設(shè)計(jì)工具使得動畫的創(chuàng)建非常方便。其三，沒有提供一套方便的事件體系。開發(fā)者也許需要通過捕獲鼠標(biāo)在canvas中點(diǎn)擊的坐標(biāo)，判斷用戶到底點(diǎn)擊了什么圖形元素。在這個過程中可能要遍歷所有的顯示元素并判定點(diǎn)是否在圖形內(nèi)，實(shí)現(xiàn)起來比較繁瑣，更不要說實(shí)現(xiàn)事件的冒泡和遞歸模型了。雖然今后出現(xiàn)的圖形庫可以解決這個問題，但這實(shí)質(zhì)上相當(dāng)于使用JavaScript構(gòu)建了一套事件響應(yīng)模型，其效率顯然不如內(nèi)建于瀏覽器的原生事件模型高。在Flash中，事件也被良好封裝為類，捕獲點(diǎn)擊等事件自然不在話下，更重要的是提供了判斷兩個圖形是否有交集的事件和函數(shù)，這在游戲編程中非常方便。另外，F(xiàn)lash的最新版本將會支持多點(diǎn)觸摸事件的響應(yīng)，而HTML想要支持這點(diǎn)恐怕要等到HTML6了。由以上分析我們可以看出，HTML5需要的幾個非常重要的東西：一個強(qiáng)大易用的圖形庫、硬件加速的圖形解析和重繪、一個強(qiáng)大的編輯器(IDE)。目前已經(jīng)出現(xiàn)了基于canvas實(shí)現(xiàn)的游戲引擎。但是從效果上看仍然無法與Flash媲美。WebGL的提出讓我們看到了硬件加速的希望，這將極大的改進(jìn)圖形顯示的速度。但是目前它只被少數(shù)開發(fā)版本的瀏覽器支持。IDE方面，諷刺的是恰恰是Adobe為AdobeFlashCS5添加了一個將Flash轉(zhuǎn)化為canvas的功能。在JavaScript方面，鑒于其為非強(qiáng)制類型的編程語言，對其進(jìn)行代碼提示等非常困難，提高編程效率較難。如果以上三個問題不能被良好解決，將會限制canvas所能實(shí)現(xiàn)的效果的豐富度，增加開發(fā)的復(fù)雜度，從而最終阻礙其普及。Video標(biāo)簽可能是Adobe最反對的東西了，它極有可能打破Flash在在線視頻領(lǐng)域的壟斷地位。但目前的情況是作為video內(nèi)容的視頻存在編碼問題，Apple和微軟所支持的H.264不是開放標(biāo)準(zhǔn)，瀏覽器廠商必須為其付費(fèi)。因此，作為三大瀏覽器之一的火狐瀏覽器拒絕支持此編碼格式。谷歌雖然也收購了一套優(yōu)質(zhì)的編碼技術(shù)，但是目前沒有跡象表明谷歌會開放這個技術(shù)標(biāo)準(zhǔn)。根據(jù)最近的統(tǒng)計(jì)，雖然GoogleChrome瀏覽器和AppleSafiry瀏覽器增長很快，但瀏覽器市場還是主要被火狐和IE所統(tǒng)治。如果火狐堅(jiān)持不支持H.264編碼格式，video標(biāo)簽的推廣將會十分困難。所以，HTML5需要一個既開放又優(yōu)質(zhì)的視頻編碼標(biāo)準(zhǔn)。3.2、商業(yè)方面要讓微軟、谷歌、蘋果這三個在很多方面存在競爭關(guān)系的業(yè)界巨頭團(tuán)結(jié)一心的支持同一套標(biāo)準(zhǔn)是很困難的。蘋果方面對Flash痛下殺手，微軟方面則極少參與這場論戰(zhàn)。至于谷歌則在支持HTML5的同時在Android中加入了Flash支持，甚至存在將Flash納入