天天看點

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

本節書摘來自華章計算機《html5 canvas遊戲開發實戰》一書中的第1章,第1.1節,作者:張路斌著, 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

自html5問世以來,越來越多的人開始關注它,打開搜尋網頁輸入關鍵字“html5”,會發現與之相關的資訊鋪天蓋地。可是,也有不少人談及的html5隻是古老的 dhtml 或ajax,并非真正的html5。那麼,到底什麼是html5呢?下面我們就來認識一下,了解它具有哪些新特性。

1.1.1 什麼是html5

html是hyper text markup language的簡稱,它是一種用于描述網頁文檔的标記語言,而html5則是這種标記語言的新标準。我們生活在一個網絡資訊時代,如何改良作為網頁标記語言的html,自然成為開發者關注的重點内容之一。

自1993年6月html的第一版草案釋出,到1999年12月24日html 4.01的釋出,html一直在不斷更新。但是html4并沒有給html帶來太大的突破,随着網絡的迅速發展,它漸漸滿足不了網絡應用的需求了。2000年1月26日,可擴充超文本置智語言(extensible hyper text markup language),即xhtml出現了。xhtml的表現方式與html類似,不過文法上更加嚴格。因為xhtml更加注重頁面規範和可用性,是以w3c執意發展xhtml。但是因為種種原因xhtml的進展非常緩慢,最主要是因為xhtml2不相容以往任何一個版本的html。在這種情況下,html5出現了。

html5草案的前身名為 web applications 1.0,于2004年由whatwg 提出,2007年w3c 接納了這種标準,并成立了新的html工作團隊。html5的第一份正式草案于2008年1月22日公布。html5是w3c與whatwg合作的結果,它成為 html、xhtml 以及 html dom 的新标準。

1.1.2 html5的新特性

html5有很多令人心動的特性和新功能,比如,強化了web網頁的表現性能,增加了本地資料庫等 web 應用的功能,以及圖像操作等。

html5在圖像上引入了canvas标簽,通過canvas,使用者可以動态生成各種圖形圖像、圖表以及動畫,而不再依賴于flash、silverlight等插件了。

另外,html5在地理位置操作上引入了geolocation api,其特點在于:

本身不去擷取使用者的位置,而是通過第三方接口來擷取,例如ip、gps、wifi等方式。

使用者可以随時開啟和關閉,在被程式調用時也會首先征得使用者同意,保證了使用者的隐私。

同時,html5還在資料儲存上增加了本地資料庫,可以使用websql來儲存資料,并且引入了web storage api實作了離線緩存功能,以此替代了cookies,使得資料儲存空間更大、更安全。

下面我們簡單地舉幾個例子,來說明一下html5的優越之處。

使用video标簽播放動畫

代碼清單1-1中的html代碼實作了播放動畫功能。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

使用audio标簽播放音頻

代碼清單1-2中的html代碼可以實作音頻播放功能。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

使用canvas标簽繪制圖形

代碼清單1-3中的html代碼可以實作繪制一個矩形的操作。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

輕松取得目前的位置

代碼清單1-4中的javascript代碼可以擷取目前位置的緯度和經度。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

将大量的資料儲存在用戶端

代碼清單1-5中的javascript代碼使用localstorage來儲存大量的資料。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹
《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

form的強化

代碼清單1-6中是form的幾個比較常用的功能。

《HTML5 Canvas遊戲開發實戰》——1.1 HTML5介紹

全新的标簽屬性

在html5中取消了一些過時的html4标記,其中包括純粹顯示效果的标記,如和,它們已經被css取代了。html5 吸取了針對xhtml2的一些建議,加強了一些用來改善文檔結構的功能,如引入新的html 标簽 header、footer、dialog、aside、figure 等,使開發者能夠更加容易地建立文檔,以前開發者在實作這些功能時一般都是使用div。另外,它還取消了一部分舊标簽,如字型設定font、居中設定center等。一小部分标簽的含義也有所改變,如粗體樣式b 和斜體樣式i标簽雖然仍然保留,但它們的意義已經和以前有所不同,現在這些标簽的意義隻是為了将一段文字辨別出來。

以上就是html5的一些新特性。需要注意的是,雖然html5已被w3c接納,但現在還隻是草案,在正式版釋出之前,它的樣式仍可能會有所變更。

繼續閱讀