解析Html5的新特性之佈局新標籤

我們來介紹一下html5中出現的一些新的標籤,這裏主要介紹專門用來佈局的標籤,比如:

html5佈局

 

 

HTML5其實是關於圖像,位置,存儲,速度的優化和改進,以下分別論述。

圖像:
  到目前爲止,基本上想要直接在網頁上進行繪圖還是不能輕易完成的,即使是幾何圖形也不可以。在瀏覽器當中直接能跟圖片的交互操作也很有限,多數是保存和點擊。如果希望能夠跟圖片進行更多的操作或者在瀏覽器當中畫出圖形,就需要flash, silverlight 這類插件來幫忙。

\

  HTML5瞭解人們的需求,HTML5已經確定引入canvas標籤,通過canvas,用戶將可以動態的生成各種圖形圖像,圖表以及動畫。下面是一個示例網站,展示了不通過插件,使用HTML5直接繪製圖片有興趣的朋友可以自己親自去試玩一下。

\

 

  不僅如此,HTML5也賦予圖片圖形更多的交互可能,HTML5的canvas標籤還能夠配合javascript來利用鍵盤控制圖形圖像,這無疑爲現有的網頁遊戲提供了新的選擇和更好的維護性和通用性,脫離了flash插件的網頁遊戲必然能夠獲得更大的訪問量,更多的用戶。一些統計數據表格也可以通過使用canvas標籤來達到和用戶的交互,例如
對2009年德國的大選情況統計就全部通過了HTML5來實現用戶點擊和數據的變更,點選某個區域就可以實時的看到該區域各黨派選票率,大大增強了統計圖表的可讀性。

\

  通過HTML5對圖形圖像的新特性,未來可能會有在線繪圖的工具和應用,人們將不再需要安裝painter這類基本的繪圖軟件,而直接使用基於瀏覽器的應用。而對用戶體驗人員和開發者來說,將能夠在用戶毫不知情的情況下收集和生成用戶鼠標的瀏覽軌跡,從而生成一部分可用的熱點圖,這對於找出網站的不足,提升用戶體驗有着重要作用。現在對canvas標籤的支持情況如下,可以看到,基本所有的瀏覽器都已經不同程度上支持了這一特性。

 

新建一個前端學習qun438905713,在羣裏大多數都是零基礎學習者,大家相互幫助,相互解答,並且還準備很多學習資料,歡迎零基礎的小夥伴來一起交流。

\

 

位置:

\
  

  這個大頭針圖標從2010年到2011年在各類應用和互聯網上應該是非常火爆了吧?沒錯,就是地理位置,各處都可以看到人們在簽到,查找自己當前的地理位置和周邊。作爲新標準的HTML5自然也不會置身事外,HTML5通過提供應用接口—Geolocation API,在用戶允許的情況下共享當前的地理位置信息,併爲用戶提供其他相關的信息。

  HTML5的Geolocation API主要特點在於: 1. 本身不去獲取用戶的位置,而是通過其他三方接口來獲取,例如IP,GPS,WIFI等方式。 2. 用戶可以隨時開啓和關閉,在被程序調用時也會首先徵得用戶同意,保證了用戶的隱私。