HTML5的你應該記住的一些知識點
剛開始學HTML5是從w3school開始的,那只是非常簡單的一些了解,后面開始看一些兄弟連的HTML5+CSS3的視頻,照著視頻做了一些 簡單的demo(需要的童鞋可以聯系我,當然網上也可以下到~~~),后面總感覺還是少了點什么,就開始買書看 看的是唐俊開的《HTML5移動Web開發指南》,以下是一些簡單的知識點,只限于和我一樣的菜鳥瞄兩眼,高手勿入~~~!!!
1 :基于HTML5的移動Web應用
Canvas繪圖:通過獲取HTML中的Dom元素Canvas,調用其渲染上下文的Context對象,使用Js進行圖形繪制。
多媒體:Video和Audio (多媒體視頻格式:Ogg MPEG4 WebM)
本地存儲:通過提供key/value方式存儲數據
Web Storage:
基于HTML5的移動Web應用
Canvas繪圖:通過獲取HTML中的Dom元素Canvas,調用其渲染上下文的Context對象,使用Js進行圖形繪制。
多媒體:Video和Audio (多媒體視頻格式:Ogg MPEG4 WebM)
本地存儲:通過提供key/value方式存儲數據
Web Storage:localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲,當用戶關閉瀏覽器窗口后,數據會被刪除
Web SQL Database: 通過類似關系數據庫的形式存儲數據(已經是個廢棄的標準了) 三個核心方法 openDatabase transaction executeSql
離線應用:當支持離線應用的瀏覽器檢測到清單文件(Manifest File),中的任何資源文件時,便會下載對應的資源文件,將它們緩存到本地
使用地理位置
移動Web框架:基于jQuery頁面驅動的jQuery Mobile、基于ExtJS架構的Sencha Touch,以及能打通Web和Native兩者之間通道的PhoneGap框架。有兩種開發模式:基于傳統Web的開發(jQuery Mobile)和基于組件式的Web開發(Sencha Touch)
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲,當 用戶關閉瀏覽器窗口后,數據會被刪除
Web SQL Database: 通過類似關系數據庫的形式存儲數據(已經是個廢棄的標準了) 三個核心方法 openDatabase transaction executeSql
離線應用:當支持離線應用的瀏覽器檢測到清單文件(Manifest File),中的任何資源文件時,便會下載對應的資源文件,將它們緩存到本地
使用地理位置
移動Web框架:基于jQuery頁面驅動的jQuery Mobile、基于ExtJS架構的Sencha Touch,以及能打通Web和Native兩者之間通道的PhoneGap框架。有兩種開發模式:基于傳統Web的開發(jQuery Mobile)和基于組件式的Web開發(Sencha Touch)
2:HTML5 中的一些有趣的新特性:
-
用于繪畫的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
對本地離線存儲的更好的支持
-
新的特殊內容元素,比如 article、footer、header、nav、section
-
新的表單控件,比如 calendar、date、time、email、url、search
3:localStorage: ***保存的數據,是域內安全的,它是基于域的,任何在該域內的所有頁面,都可以訪問localStorage數據。
注意的是 Firefox中使用localStorage存儲的數據在Chorme瀏覽器是無法讀取的,同樣,由于localStorage數據保存在設備中,同一個應用程序在不同設備上保存的數據是不同的,比如Android的數據IOS訪問不了
先來看看Storage的API :屬性 length;方法:setItem、getItem、removeItem、clear 當然大家看名稱也都能知道這些是什么含義,在這里就不具體贅述各自的具體寫法
sessionStorage: 存儲的數據周期只保存在存儲它的當前窗口或者當前窗口新建的新窗口中,一旦關閉,數據就清除,它承接于Storage的接口,用法和localStorage基本一樣
Storage時間監聽: StorageEvent的API: key、oldValue、newValue、url、StorageArea; Storage時間可以使用addEventListener進行注冊監聽