HTML5 介紹

汪磊發表於2013-07-04

什麼是 HTML5

  HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本,現在仍處於發展階段,但大部分瀏覽器已經支援某些 HTML5 技術。HTML 5有兩大特點:首先,強化了 Web 網頁的表現效能。其次,追加了本地資料庫等 Web 應用的功能。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要外掛的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標準集。

HTML的特性

  A. 語義特性(Class:Semantic)

  HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa的,微資料與微格式等方面的支援,構建對程式、對使用者都更有價值的資料驅動的Web。

  B. 本地儲存特性(Class: OFFLINE & STORAGE)

  基於HTML5開發的網頁APP擁有更短的啟動時間,更快的聯網速度,這些全得益於HTML5 APP Cache,以及本地儲存功能。Indexed DB(html5本地儲存最重要的技術之一) 和API說明文件。

  C. 裝置相容特性 (Class: DEVICE ACCESS)

  從Geolocation 功能的API文件公開以來,HTML5為網頁應用開發者們提供了更多功能上的優化選擇,帶來了更多體驗功能的優勢。HTML5提供了前所未有的資料與應用接入開放介面。使外部應用可以直接與瀏覽器內部的資料直接相連,例如視訊影音可直接與microphones及攝像頭相聯

  D. 連線特性(Class: CONNECTIVITY)

  更有效的連線工作效率,使得基於頁面的實時聊天,更快速的網頁遊戲體驗,更優化的線上交流得到了實現。HTML5擁有更有效的伺服器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特效能夠幫助我們實現伺服器將資料’推送’到客戶端的功能。

  E. 網頁多媒體特性(Class: MULTIMEDIA)

  支援網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。

  F. 三維、圖形及特效特性(Class: 3D, Graphics & Effects)

  基於SVG、Canvas、WebGL及CSS3的3D功能,使用者會驚歎於在瀏覽器中,所呈現的驚人視覺效果。

  G. 效能與整合特性(Class: Performance & Integration)

  沒有使用者會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術,幫助您的Web應用和網站在多樣化的環境中更快速的工作。

  H. CSS3特性(Class: CSS3)

  在不犧牲效能和語義結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字型格式(WOFF)也提供了更高的靈活性和控制性。

Html 5與Html 4的區別

  A.簡化的語法

  更簡單的doctype宣告是HTML5裡眾多新特徵之一。現在你只需要寫,這就行了。HTML5的語法相容HTML4和XHTML1,但不相容SGML。

  B. 一個替代Flash的新”canvas”標記

  對於Web使用者來說,Flash既是一個驚喜,也是一種痛苦。有很多的Web開發人員對HTML5對Flash產生的威脅很不滿。但對於那些忍受著要花幾年時間載入和執行的臃腫的Flash視訊的人來說,用新的 “canvas” 標記生成視訊的技術已經到來。

  目前, “canvas” 標記並不能提供所有的Flash具有的功能,但假以時日,Flash必將從web上淘汰。我們拭目以待,因為很多人還並不認同這種觀點。

  C. 新的 “header” 和 “footer” 標記

  HTML5的設計是要更好的描繪網站的解剖結構。這就是為什麼這些”header” 和”footer” 等新標記的出現,它們是專門為標誌網站的這些部分設計的。在開發網站時,你不在需要用”div”標記來標註網頁的這些部分。

  D. 新的 “section” 和 “article” 標記

  跟”header” 和 “footer”標記類似,HTML5中引入的新的”section” 和 “article” 標記可以讓開發人員更好的標註頁面上的這些區域。

  據推測,除了讓程式碼更有組織外,它也能改善SEO效果,能讓搜尋引擎更容易的分析你的頁面。

  E.新的 “menu” 和 “figure” 標記

  新的”menu”標記可以被用作普通的選單,也可以用在工具條和右鍵選單上,雖然這些東西在頁面上並不常用。類似的,新的 “figure” 標記是一種更專業的管理頁面上文字和影象的方式。當然,你可以用樣式表來控制文字和影象,但使用HTML5內建的這個標記更適合。

  F. 新的 “audio” 和 “video” 標記

  新的”audio” 和 “video” 標記可能是HTML5中增加的最有用處的兩個東西了。正如標記名稱,它們是用來嵌入音訊和視訊檔案的。

  除此之外還有一些新的多媒體的標記和屬性,例如”track”,它是用來提供跟蹤視訊的文字資訊的。有了這些標記,HTML5使Web2.0特徵變得越來越友好。問題在於,在HTML5還未被廣泛的接受之前,Web2.0還是老的Web2.0。

  G. 全新的表單設計

  新的 “form” 和 “forminput” 標記對原有的表單元素進行的全新的修改,它們有很多的新屬性(以及一些修改)。如果你經常的開發表單,你應該花時間更詳細的研究一下。

  H. 不再使用 “b” 和 “font” 標記

  對我個人來說,這是一個讓我不太理解的改動。我並不認為去除 “b” 和 “font”標記會帶來多大的好處。我知道,官方的指導說這些標記可以通過CSS來做更好的處理,但這樣一來,為了在文章一兩個地方出現的這種標記,你就需要在獨立的css和文字兩個地方來實現這一的功能,豈不笨拙。也許我們以後會習慣這種方法。

  i. 不再使用 “frame”, “center”, “big” 標記

  事實上,我已經記不清曾經何時用過這些標記了,所以,我並不為去除這些標記感到悲哀。相同的原因,有更好的標記能實現它們的功能——這很好,任何作廢的標記從標準中剔除都是受歡迎的。 

改進與沿革

HTML5提供了一些新的元素和屬性,例如<nav>(網站導航塊)和<footer>。這種標籤將有利於搜尋引擎的索引整理,同時更好的幫助小螢幕裝置和視障人士使用,除此之外,還為其他瀏覽要素提供了新的功能,如<audio>和<video>標記。

  1.取消了一些過時的HTML4標記

  其中包括純粹顯示效果的標記,如<font>和<center>,它們已經被CSS取代。

  HTML5 吸取了XHTML2 一些建議,包括一些用來改善文件結構的功能,比如,新的HTML 標籤 header, footer, dialog, aside, figure 等的使用,將使內容創作者更加語義地建立文件,之前的開發者在實現這些功能時一般都是使用div。

  2.將內容和展示分離

  b 和 i 標籤依然保留,但它們的意義已經和之前有所不同,這些標籤的意義只是為了將一段文字標識出來,而不是為了為它們設定粗體或斜體式樣。u,font,center,strike 這些標籤則被完全去掉了。

  3.一些全新的表單輸入物件

  包括日期,URL,Email 地址,其它的物件則增加了對非拉丁字元的支援。HTML5 還引入了微資料,這一使用機器可以識別的標籤標註內容的方法,使語義Web 的處理更為簡單。總的來說,這些與結構有關的改進使內容建立者可以建立更乾淨,更容易管理的網頁,這樣的網頁對搜尋引擎,對讀屏軟體等更為友好。

  4.全新的,更合理的Tag

  多媒體物件將不再全部繫結在 object 或 embed Tag 中,而是視訊有視訊的Tag,音訊有音訊的 Tag。

  5.本地資料庫

  這個功能將內嵌一個本地的SQL 資料庫,以加速互動式搜尋,快取以及索引功能。同時,那些離線Web 程式也將因此獲益匪淺。不需要外掛的富動畫。

  6.Canvas 物件

  將給瀏覽器帶來直接在上面繪製向量圖的能力,這意味著使用者可以脫離Flash 和Silverlight,直接在瀏覽器中顯示圖形或動畫。

  7.瀏覽器中的真正程式

  將提供 API 實現瀏覽器內的編輯,拖放,以及各種圖形使用者介面的能力。內容修飾Tag 將被剔除,而使用CSS。

  8.Html5取代Flash在移動裝置的地位。

重要標記

  <video>標記

  定義和用法:

  <video> 標籤定義視訊,比如電影片段或其他視訊流。

  <audio> 標記

  定義和用法

  <audio> 標籤定義聲音,比如音樂或其他音訊流。

  例項:

  一段簡單的HTML 5 音訊

<audio src="someaudio.wav">
    您的瀏覽器不支援 audio 標籤。
</audio>

  <canvas> 標記

  定義和用法:

  <canvas> 標籤定義圖形,比如圖表和其他影象。

  HTML5 的 canvas 元素使用JavaScript 在網頁上繪製影象。

  畫布是一個矩形區域,您可以控制其每一畫素。

  canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

  例項:

  通過 canvas 元素來顯示一個紅色的矩形:

<canvas id="myCanvas"></canvas>   
<script type="text/javascript">
     var canvas=document.getElementById('myCanvas');
     var ctx=canvas.getContext('2d'); 
     ctx.fillStyle='#FF0000';
     ctx.fillRect(0,0,80,100);
 </script>

程式介面

  除了原先的DOM介面,

  HTML5增加了更多API,如:

  1. 用於即時2D繪圖的Canvas標籤

  2. 定時媒體回放

  3. 離線資料庫儲存

  4. 文件編輯

  5. 拖拽控制

  6. 瀏覽歷史管理

元素變化

  新的解析順序新的元素:section, video, progress, nav, meter, time, aside, canvasinput

  元素的新屬性:日期和時間,email, url。

  新的通用屬性:ping, charset, async

  全域屬性:id, tabindex, repeat。

  移除元素:center, font, strike。

異常處理

  HTML5 (text/html) 瀏覽器將在錯誤語法的處理上更加靈活。HTML5 在設計時保證舊的瀏覽器能夠安全的忽略掉新的HTML5程式碼。與HTML4.01相比,HTML5 給出瞭解析的詳細規則,力圖讓不同的瀏覽器即使在發生語法錯誤時也能返回相同的結果。

相關文章