妙用HTML5的八大特性來開發移動webAPP

2021-06-29 12:02:17 字數 1458 閱讀 2608

第一特性:離線快取

html5 web storage api可以看做是加強版的cookie,不受資料大小限制,有更好的彈性以及架構,可以將資料寫入到本機的rom中,還可以在關閉瀏覽器後再次開啟時恢復資料,以減少網路流量。

web storage是html5引入的乙個非常重要的功能,可以在客戶端本地儲存資料,類似html4的cookie,但可實現功能要比cookie強大的多,cookie大小被限制在4kb,web storage官方建議為每個**5mb。

web storage又分為兩種:sessionstorage和localstorage

從字面意思就可以很清楚的看出來,sessionstorage將資料儲存在session中,瀏覽器關閉也就沒了;而localstorage則一直將資料儲存在客戶端本地;

不管是sessionstorage,還是localstorage,可使用的api都相同,常用的有如下幾個(以localstorage為例):

1、儲存資料:localstorage.setitem(key,value);

2、讀取資料:localstorage.getitem(key);

3、刪除單個資料:localstorage.removeitem(key);

4、刪除所有資料:localstorage.clear();

5、得到某個索引的key:localstorage.key(index);

html5在這個方面完全不受限制,可以完全放在一起進行處理。

第三特性:地理定位

第四特性:canvas繪圖,提公升移動平台的繪圖能力

使用canvas api可以簡單繪製熱點圖收集使用者體驗資料,支援的移動、旋轉、縮放等常規編輯。而且也支援2d和3d。

第五特性:豐富的互動方式

提公升互動能力:拖拽、撤銷歷史操作、文字選擇等。比如

transition – 元件的移動效果

transform – 元件的變形效果

animation – 將移動和變形加入動畫支援

第六特性:開發及維護成本低

第七特性:css3 視覺設計師的輔助利器的支援。

css3支援了字型的嵌入、版面的排版,以及最令人印象深刻的動畫功能。

selector – 更有彈性的選擇器

webfonts – 嵌入式字型

layout – 多樣化的排版選擇

stlying radius gradient shadow – 圓角、漸變、陰影

border background – 邊框的背景支援

使用css3來完成部分視覺工作,載入速度快,節省**及,也為使用者節約了頻寬。

這些效果用html5實現起來是非常方便的,而如用原生開發,估計讓那些客戶端開發人員為難啦。

第八特性:html5呼叫手機攝像頭和手機相簿、通訊錄等功能

妙用html5的八大特性來開發移動webAPP

第一特性 離線快取 html5 web storage api可以看做是加強版的cookie,不受資料大小限制,有更好的彈性以及架構,可以將資料寫入到本機的rom中,還可以在關閉瀏覽器後再次開啟時恢復資料,以減少網路流量。web storage是html5引入的乙個非常重要的功能,可以在客戶端本地儲...

html5的八大特性

html5是用於取代1999年所制定的 html 4.01 和 xhtml 1.0 標準的 html 1 標準通用標記語言下的乙個應用 標準版本 現在仍處於發展階段,但大部分瀏覽器已經支援某些 html5 技術。html 5有八大特點 語義特性 class semantic html5賦予網頁更好的...

HTML5開發系列(6) 之 CSS三大特性

當同乙個標籤定義了多個樣式的時候,就存在樣式屬性衝突,樣式屬性相同則被覆蓋 當css樣式衝突的時候會執行後定義的樣式,如果樣式屬性不衝突則分開執行 我是於給div 當給父類設定相關的屬性後,子標籤會繼承父類的這些屬性顯示出來,但是不是所有的屬性樣式都是可以繼承的 可以繼承的屬性有 text font...