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終端的部署。