webAPP的實(shí)現(xiàn)基礎(chǔ)就是html5+js+css3.但是webAPP還是基于瀏覽器的微網(wǎng)站開發(fā)。
正式如此，我們必須要深入的了解html5的10大特性，這樣才能方便我們?cè)陂_發(fā)和設(shè)計(jì)APP的時(shí)候，更合理的采用原生APP與webAPP的相結(jié)合。
而APP里面最重要的一個(gè)分享功能，分享出去的必須是網(wǎng)頁(yè)形式的。所以，Html5必須學(xué)會(huì)。
下面html5模版網(wǎng)(www.52vt.cn)為大家普及一下為什么說HTML5適合進(jìn)行移動(dòng)webAPP開發(fā)？
第一特性：離線緩存
HTML5 Web Storage API可以看做是加強(qiáng)版的cookie，不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)，可以將數(shù)據(jù)寫入到本機(jī)的ROM中，還可以在關(guān)閉瀏覽器后再次打開時(shí)恢復(fù)數(shù)據(jù)，以減少網(wǎng)絡(luò)流量。
Web Storage是HTML5引入的一個(gè)非常重要的功能，可以在客戶端本地存儲(chǔ)數(shù)據(jù)，類似HTML4的cookie，但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多，cookie大小被限制在4KB，Web Storage官方建議為每個(gè)網(wǎng)站5MB。
Web Storage又分為兩種：sessionStorage和localStorage
從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地；
不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：
1、保存數(shù)據(jù)：localStorage.setItem(key,value);
2、讀取數(shù)據(jù)：localStorage.getItem(key);
3、刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
4、刪除所有數(shù)據(jù)：localStorage.clear();
5、得到某個(gè)索引的key：localStorage.key(index);
移動(dòng)APP設(shè)計(jì)師要知道，什么時(shí)候讓用戶下載離線緩存(注意在線和離線app的區(qū)別)。
具體詳細(xì)關(guān)于webAPP本地存儲(chǔ)的案例教程地址：
http://blog.csdn.net/hbcui1984/article/details/8466743
第二特性：音頻視頻自由嵌入，多媒體形式更為靈活?
原生開發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩，需要拆分開文字、圖片、音頻、視頻，解析對(duì)應(yīng)的URL并分別用不同的方式處理。
HTML5在這個(gè)方面完全不受限制，可以完全放在一起進(jìn)行處理。
移動(dòng)APP設(shè)計(jì)師要知道，如果新聞?lì)悺⑽⒉╊悺⑸缃活悜?yīng)用的信息呈現(xiàn)中實(shí)現(xiàn)文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現(xiàn)在原生方式實(shí)現(xiàn)起來還有困難。
第三特性：地理定位
地理位置定位，讓定位和導(dǎo)航不再專屬導(dǎo)航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
移動(dòng)APP設(shè)計(jì)師要知道，現(xiàn)在嵌入LBS功能的應(yīng)用越來越多，這也是移動(dòng)設(shè)備與臺(tái)式PC相比最大的優(yōu)勢(shì)之一，HTML5能把這個(gè)優(yōu)勢(shì)再度擴(kuò)大化，好好想想怎么在你設(shè)計(jì)的應(yīng)用里用上吧!
第四特性：Canvas繪圖，提升移動(dòng)平臺(tái)的繪圖能力?
使用Canvas API可以簡(jiǎn)單繪制熱點(diǎn)圖收集用戶體驗(yàn)資料，支持圖片的移動(dòng)、旋轉(zhuǎn)、縮放等常規(guī)編輯。而且也支持2D和3D。
第五特性：豐富的交互方式
提升互動(dòng)能力：拖拽、撤銷歷史操作、文本選擇等。比如
Transition – 組件的移動(dòng)效果
Transform – 組件的變形效果
Animation – 將移動(dòng)和變形加入動(dòng)畫支持
加上js的動(dòng)畫效果等等，HTML5提供的交互方式是非常豐富的。各位移動(dòng)APP設(shè)計(jì)師盡可能的發(fā)揮想象吧！
第六特性：開發(fā)及維護(hù)成本低，這個(gè)相對(duì)于原生APP開發(fā)來說
更低的開發(fā)及維護(hù)成本;?使頁(yè)面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低;?方便升級(jí)，打開即可使用最新版本，免去重新下載升級(jí)包的麻煩，使用過程中就直接更新了離線緩存。
第七特性：CSS3 視覺設(shè)計(jì)師的輔助利器的支持。
CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動(dòng)畫功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸變、陰影
Border background – 邊框的背景支持
使用CSS3來完成部分視覺工作，載入速度快，節(jié)省代碼及圖片，也為用戶節(jié)約了帶寬。
這些效果用HTML5實(shí)現(xiàn)起來是非常方便的，而如用原生開發(fā)，估計(jì)讓那些客戶端開發(fā)人員為難啦。
第八特性：html5調(diào)用手機(jī)攝像頭和手機(jī)相冊(cè)、通訊錄等功能
具體的詳細(xì)案例，html5模版網(wǎng)(www.52vt.cn)就不在這里羅嗦了，有興趣的小伙伴們可以前往這里查看具體的教程和案例。
http://www.gbtags.com/gb/share/93.htm