HTML5

什麼是 HTML5?

HTML5 是下一代 HTML 標準。

HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。

HTML5 是如何起步的?

HTML5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。 。

WHATWG 致力於 web 表單和應用程序,而 W3C 專注於 XHTML 2.0。在 2006 年,雙方決定進行合作,來建立一個新版本的 HTML。

HTML5 中的一些有趣的新功能:

用於繪畫的canvas 元素

用於媒介回放的video 和audio 元素

對本地離線儲存的更好的支援

新的特殊內容元素,例如article、footer、header、nav、section

新的表單控件,例如calendar、date、time、email、url 、search


HTML5 特性

 語意特性(Class:Semantic)   
HTML5賦予網頁更好的意義與結構。更豐富的標籤將隨著對RDFa的,微資料與微格式等方面的支持,建構對程式、對使用者都更有價值的資料驅動的Web。 
本地儲存特性(Class: OFFLINE & STORAGE) 
基於HTML5開發的網頁APP擁有更短的啟動時間,更快的連網速度,這些全得益於HTML5 APP Cache,以及本地儲存功能。 Indexed DB(html5本機儲存最重要的技術之一)和API說明文件。
裝置相容特性(Class: DEVICE ACCESS) 
從Geolocation功能的API文件公開以來,HTML5為網頁應用程式開發者提供了更多功能上的最佳化選擇,帶來了更多體驗功能的優勢。 HTML5提供了前所未有的資料與應用程式存取開放介面。使外部應用程式可直接與瀏覽器內部的資料直接相連,例如視訊影音可直接與microphones及攝影機連結。 
連線功能(Class: CONNECTIVITY) 
更有效的連線工作效率,使得基於頁面的即時聊天,更快速的網頁遊戲體驗,更優化的線上交流得到了實現。 HTML5擁有更有效的伺服器推播技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現伺服器將資料「推送」到客戶端的功能。 
網頁多媒體特性(Class: MULTIMEDIA) 
支援網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,鏡頭,影音功能相得益彰。
三維、圖形及特效特性(Class: 3D, Graphics & Effects) 
基於SVG、Canvas、WebGL及CSS3的3D功能,使用者會驚嘆於在瀏覽器中,所呈現的驚人視覺效果。
效能與整合特性(Class: Performance & Integration) 
沒有使用者會永遠等待你的Loading-HTML5會透過XMLHttpRequest2等技術,幫助您的Web應用與網站在多樣化的環境中更快速的工作。 
CSS3特性(Class: CSS3) 
在不犧牲表現和語意結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。 
編輯本段現況在行動裝置開發HTML5應用只有兩種方法,不然就是全使用HTML5的語法,要不就是只使用java script引擎。 
java script引擎的建構方法讓製作手機網頁遊戲成為可能。由於介面層很複雜,已預訂了一個UI工具包去使用。 
純HTML5手機應用程式運作緩慢且錯漏百出,但優化後的效果會改善。儘管不是很多人願意去做這樣的優化,但還是可以嘗試。 
HTML5手機應用的最大優點就是可以在網頁上直接除錯修改。原生應用程式的開發人員可能需要花費非常大的力氣才能達到HTML5的效果,不斷地重複編碼、偵錯和運行,這是首先要解決的問題。 
HTML5的移植非常簡單,但假設每個人都會讓這變成一個自動化操作。


HTML5 <!DOCTYPE>

<!doctype> 宣告必須位於HTML5 文件中的第一行,使用非常簡單:

HTML5 的改進

新元素

新屬性

#完全支援CSS3

Video 和Audio

2D/3D 製圖

本地儲存

本地SQL 資料

Web 應用程式

HTML5 多媒體

使用HTML5 你可以簡單的在網頁中播放視頻(video)與音訊(audio) 。

HTML5 <video>

HTML5 <audio>

HTML5 應用程式

使用HTML5 你可以簡單地開發應用程式

本機資料儲存

存取本機檔案

本機SQL 資料

快取引用

Javascript 工作者

XHTMLHttpRequest 2

HTML5 圖形

使用HTML5 你可以簡單的繪製圖形:

使用 <canvas> 元素。

使用內嵌 SVG。

使用 CSS3 2D 轉換、CSS3 3D 轉換。

HTML5 使用CSS3

新選擇器

新屬性

動畫

#2D/3D 轉換

圓角

陰影效果

可下載的字體

了解更多CSS3知識請查看本站的 CSS3 教學。

HTML5 瀏覽器支援

最新版本的 Safari、Chrome、Firefox 以及 Opera 支援某些 HTML5 特性。 Internet Explorer 9 將支援某些 HTML5 特性。

HTML5 的優勢和不足

#HTML5的優勢

  1、提高可用性和改進使用者的友善體驗;

  2、新標籤這將有助於開發人員定義重要的內容;

  3、可以為網站帶來更多的多媒體元素(視訊和音訊) ;

  4、可以很好的替代FLASH和Silverlight;

  5、當涉及到網站的抓取和索引的時候,對於SEO很友好;

  6 、大量應用於行動應用程式和遊戲。

 HTML5的不足

#  1、HTML5 本身還在發展中,它不是用戶應用的最迫切需求,更多是廠商試圖改變軟體生態格局的策略需求。

  2、HTML5的相容性受限於各大瀏覽器表現,例如微軟的IE和fireforx之間存在著許多差異。

  3、HTML5需要一個成熟完整的開發環境,目前還缺乏。

  4、HTML5功能的暴增,瀏覽器必須有一個高效率的圖形引擎和腳本引擎。

  5、HTML5需要殺手級應用程式來吸引和引導使用者升級瀏覽器,最終完成HTML5終端的部署。


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5圆角例子</title> <style type="text/css"> body{ background-color: #000000; } div{ width: 100px; height: 100px; margin: 5px; border: 5px solid white; background-color: #efefef; } #dv-all{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; } #dv-top-left{ border-top-left-radius:15px; -webkit-border-top-radius:15px; -moz-border-top-radius:15px; } #dv-top-right{ border-top-right-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-top-right-radius:15px; } #dv-bottom-left{ border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; } #dv-bottom-right{ border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; } </style> </head> <body> <div id="dv-all">全圆角例子</div> <div id="dv-top-left">左上圆角例子 </div> <div id="dv-top-right">右上圆角例子</div> <div id="dv-bottom-left">左下圆角例子</div> <div id="dv-bottom-right">右下圆角例子</div> </body> </html>