[HTML5]移動Web應用程序開發 HTML5篇 (二) 新功能介紹和測試

介紹

 

本系列博客將主要介紹現在大紅大紫的移動Web應用程序開發最重要的三個工具：HTML5，JavaScript， CSS3。

 

本篇是HTML5介紹的第二篇，主要介紹HTML5的新功能，包括新的標記元素，多媒體元素，表單元素和輸入類型屬性。

 

相關文章：

 

移動Web應用程序開發 HTML5篇 (一) HTML5簡介

 

•1.  HTML5  新的標記元素

 

HTML5提供了不少新的標記元素來表示和展示網頁內容，最多見的就是article, aside, nav, detail, footer等，分別用來表示網頁中的不一樣部分。好比說一個文章的內容，在HTML5中只須要寫：<article></article>便可，而在傳統HTML4中須要寫成<div></div>。咱們先看下面這張圖。

 

 

這樣作的好處就是可以更加的語義化，當搜索引擎檢索網頁時，能夠明確知道哪些內容是正文的，哪些內容是導航條，哪些是底角標註。也就是說使用HTML5新的標記元素寫出的網頁可以更容易被搜索引擎檢索到。更加詳細的tag以下圖所示。

 

本文附件 爲一個典型的HTML5網頁代碼，讀者能夠下載測試。 點此下載。

 

•2. 多媒體元素

 

多媒體元素能夠說是HTML5很是重要的一點，用戶能夠直接經過代碼<video src="xyz.ogv" type=video/ogg"></video> 來插入一個video，而在傳統的HTML4中須要寫<object type="video/ogg" data="xyz.ogv"><param name="src" value="xyz.ogv"></object>一長串代碼。

 

 

Audio & Video 例子下載地址： Audio & Video。
固然，除了video的原生支持還有音頻支持，插件支持等等,也正是這個功能成爲秒殺Flash等傳統工具，提高瀏覽體驗，減輕系統資源負載的重要法寶。

 

 

•3. 表單元素

 

HTMl5添加了不少原生表單支持，如datalist， Keygen等等。

 

 

•4.  HTML5  輸入類型元素

 

能夠說添加了衆多輸入類型元素，使得HTML5成爲適合開發移動web應用的一個重要因素，只須要簡單的一個tag就能夠實現輸入日期，電子郵件，Url等等之前來講比較複雜的操做。

 

 

目前HTML5輸入類型元素的支持狀況：

 

 

本篇完，Demo下載地址：  HTML5 new tag，  Audio & Video。

 

本文及demo代碼參考資料："Pro. HTML5 Programing"