HTML5能為我們帶來什么 · 前端開發常用技巧經驗記錄

說起HTML5，表面上是說它是HTML更新的第五個版本，而實際上，HTML5有很多內在的東西。正是因為HTML5的出現，使得web應用的開發變得更加方便快捷，更加標準化，提高了web應用的性能。可以說HTML5是web應用現在能夠被廣泛接受。首先我們來看一下HTML5給我們帶來了哪些新功能。 ??本地緩存本地存儲Web?storage的作用是在網站中把有用的信息存儲到本地的計算機或移動設備上，然后根據實際需要從本地讀取信息。它提供兩種存儲類型API接口，分別是sessionStorage和localhostStorage，其中前者在會話期間內有效，后者就存儲在本地，并且存儲是永久的，但是兩個的API使用基本上是相同的。利用HTML5的本地存儲功能，我們可以進行用戶信息的保存（類似于HTML4中的cookie）、數據存儲與讀取等諸多功能。注意Web?Storage官方建議每個網站的本地緩存大小為5MB，這相比于HTML4中cookie的幾kb要大得多，功能也更強大。接下來利用代碼來具體解釋一下Web?Storage的使用方式，以localStorage為例，js代碼如下： ~~~ window.onload?=?function(){ localStorage.clear();//清除之前localStorage存儲的全部數據 localStorage.setItem(“userData”,”storage?demo”）//setItem方法可以設定緩存數據的值，采用鍵值對的形式 } 除了基本操作，還可以對Storage事件進行監聽： window.onload?=?function(){ window.addEventListener(“storage”,function(e){ console.log(e); },true); } ~~~ ??離線緩存離線緩存可以在即使沒有網絡的狀態下web應用仍能正常運行，非常有實用價值。HTML5的離線緩存功能為web應用（尤其是移動應用）的開發建立了良好的條件。開始使用離線緩存功能很簡單，只要在html標簽中加入mainfest屬性，并指定mainfest文件即可。mainfest文件的作用是告訴瀏覽器哪些文件需要進行離線緩存操作。舉例說明.mainfest文件的應用： ~~~ CACHE?MAINFEST index.html test.js NETWORK /images/ ~~~ 這些內容就表明，index.html和test.js這兩個文件被定義為緩存文件，跟在CACHE?MAINFEST后面。當網絡不可用或不在線時，此部分文件會通過本地緩存直接讀取。NETWORK后面的文件定義為無論這些文件是否已經被緩存，都必須從網絡中下載。除此之外，還要對.mainfest文件進行必要的配置，在web.xml中 ~~~ <mime-mapping>//.mainfest文件是MIME類型文件 <extension>mainfest</extension> <mime-type>text/cache-mainfest<mime-type> </mime-mapping> ~~~ 有了HTML5離線緩存技術，就可以使網站或者web開發的應用在無網絡的情況下也可以進行訪問，大大減少了網絡消耗，也讓利用web開發出來的app性能大幅提升了。 ??新型標簽 ①布局語義化標簽 HTML5新增了許多語義化的布局標簽，用以代替之前每個布局都要使用div的無語義性的混亂局面。HTML5提供的新標簽包括<head> 、< footer >、< aside >、< article >等，基本一個頁面的每個布局部分，都有一個對應的標簽。 HTML5語義化標簽的主要作用主要體現在以下三個方面： ◎對移動端設備更加友好 ◎使用語義化的布局標簽更有利于搜索引擎的的抓取 ◎語義化標簽簡潔，便于軟件的維護和二次開發使用語義化標簽，更加符合現在的web標準。 ②其他標簽 HTML5增加了許多新功能，這些功能有的對應標簽。多媒體標簽。比如< video >標簽可以支持視頻播放功能，使用HTML5的video標簽配合一些web視頻播放器制作插件可以制作出效果很好的網頁播放器。這里推薦video.js，比較美觀，性能較好，且學習成本比較低。 <canvas>畫布，將在后面進行詳細介紹。表單相關的新標簽，將在后面進行詳細介紹。 ??Geolocation地理定位目前，地理定位基本上是每個移動app都支持的功能。而HTML5也開始支持地理定位功能，這給利用HTML5開發移動app提供了極大幫助。 Geolocation的使用方法很簡單，主要有三個方法： getCurrentPosition():獲取當前用戶的地理位置信息 watchPosition():定期輪詢設備的位置 clearWatch():用于停止watchPosition()的輪詢目前大部分瀏覽器都支持Geolocation?API。 ??表單表單一直都是一個web不可缺少的部分。HTML5中提供了非常豐富的表單標簽和屬性。首先我們來了解幾個HTML5為表單控件新添加的標簽。 <meter>/<progress>:用于設置進度條，配合js即可方便的搭建出一個動態進度條。 <details>+<summary>:零js即可創建折疊內容，結構如下： <details> <summary>This?is?the?summary</summary> This?contains?detail?things. <details> 除了新的標簽，input標簽還增加了許多類型(type)，包括search/email/number/type/range/url等。表單標簽的新增屬性有placeholder/autofocus/list/autocomplete等。 HTML5極大地豐富了表單內容，讓編寫代碼變得更加簡單，實現功能更加快捷。 ??canvas 個人認為canvas是HTML5中最強大的功能，有了canvas，HTML5在圖像這方面變得無所不能（有關canvas的具體實例請見其他博客）。 canvas可以進行切圖、畫圖、圖像的像素級操作等一系列功能，十分強大。說起canvas，應用最多的應該是基于HTML5的游戲。利用HTML5的canvas功能，配合js，可以開發出各種各樣的游戲。同時，像素級的操作也讓HTML5?canvas可以處理許多細致的圖像問題。創建一個canvas畫布很容易，在html中使用<canvas>標簽，js代碼如下： var?canvas?=?document.getElementById(canvas1); var?context?=?canvas.getContext(“2d”); canvas可以創建豐富的圖形，包括基本圖形、函數曲線等。具體的使用技巧可以查看http://blog.csdn.net/clh604/article/details/8536059這篇博客。綜上，HTML5提供的新功能，使HTML5在移動應用開發、游戲開發、規范開發等方面，都有了質的飛躍。深入學習HTML5,十分必要。 ? ? ?