什麼是HTML5

什麼是 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 給出瞭解析的詳細規則，力圖讓不同的瀏覽器即使在發生語法錯誤時也能返回相同的結果。

相關文件：什麼是CSS3