1. 請問一下web 應用和webAPP是同一個東西嗎使用的時候需要安裝嗎
不是的。雖然他們都是一種應用但是還是有區別的。
1、區別在於
Web應用程序是一種可以通過Web訪問的應用程序，其最大的好處就是用戶很容易訪問應用程序，因為用戶只需要有瀏覽器即可，不需要再像手機端一樣再安裝其他軟體
2. 關於前端和移動客戶端
前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC桌面端軟體界面；現在最常見的說法一般是指Web前端，也就是針對於網頁端開發的工作。
也有個說法就是前端就是大前端嘛，如果你的工作真的那麼贊的話，那就包括了web啦安卓啦ios啦甚至pcmac客戶端的界面啦。但我覺得現在一般大家都還是有專攻的。
WebApp指的是【Webapplication】，大氏也就是以瀏覽器作為客戶端的軟體。比如你要寫文檔，一般會打開Office2012之類的本地軟體；但是你也可以選擇在瀏覽器里輸入一個網址，比如我很喜歡StackEdit—*smart*markdowneditor，然後直接在裡面寫東西直接發布到gist上；再比如用桌面客戶端來收發郵件，但你也可以直接用瀏覽器登陸gmail亦或者QQ郵箱，直接把這個當客戶端用。總之就是使用網頁版代替本地軟體。
MobileWebApp當然就是指在手機端打開的WebApp啦。我推薦看看Gmail的移動版。
感覺樓主問的問題還挺模糊的，所以我大概照我的理解依次解釋下：
移動客戶端的開發類型（因為我是個前端所以我是站在前端立場上來說的哈），主要是三種：
NativeApp（原生APP），也就是完全使用移動設備系統語言寫的客戶端，iPhoneiPad就是純Object-C，安卓就是純JAVA,就是用戶看到的界面啦體驗到的交互啦都是原生的。這是性能最棒擾仿敗的開發方式，但靈活性就沒下面的好。
WebApp,這個就是在移動瀏覽器里打開的，純HTMLCSSJS，說白了就是個網頁，只不過非常的富應用，比如手機瀏覽器訪問的GMAIL啥啥的。但說白了就是在瀏覽器里打開的頁面。。IOS支持可以在桌面創建訪問的快捷方式，但是說到底還是打開Safari跑。。而且對設備硬體的介面什麼的挺薄弱。
HybridApp.[HTML5inmobiledevices]我覺得這個更為合適一些。實際上是使用原生寫了一個容器，然後使用HTMLCSSJS來實現用戶界面和交互。WebApp的短處便可以克服（因緩顫為自己寫的容器可以輔助暴露偏底層的介面，比如本地存儲或者麥克風控制之類），同時比起純原生的java或者object-c開發靈活性要高（更新可以更快更迅速，也不依賴於市場，因為說白了，就是自己下載更新網頁資源。。）實際上這種方式已經不限於移動端。。豌豆莢其實是個pc端的hybridapp哇~~~而且說實在的，桌面開發的性能就現在來說要比移動好很多。。
3. 移動前端開發和Web前端開發的區別
移動前端開發和Web前端開發的區別是:
1、前端是相對比較大的概念，一般是指用戶能夠看到、直接接觸的界面都算是前端，比如iOS界面，安卓界面，網頁界面，PC/Mac桌面軟體的界面。最常見的是Web前端，也就是針對於網頁端開發的工作。
2、WebApp即Webapplication，也就是以瀏覽器作為客戶端的軟體。例如，用桌面客戶端來收發郵件，但也可以直接用瀏覽器登陸gmail或者QQ郵箱，直接使用網頁版的軟體來使用。總之就是使用網頁版代替本地軟體。
MobileWebApp就是在手機端打開的WebApp。例如Gmail的移動端軟體
3、目前，移動客戶端的開發主要包括三種類型：
NativeApp（原生APP）：也就是完全使用移動設備系統語言寫的客戶端。iOS系統就是使用Objective-C語言來編寫本地應用，也可以使用蘋果於2014年蘋果開發者大會上發布的SWIFT語言；Android平台就是使用Java語言來御州桐開發。原生APP就是從界面到交互都是使用官方標准語言來編寫，效率和穩定性都是最好的，但欠缺靈活性。
WebApp：這個就是在移動瀏覽器里打開的，使用Web前端開發語言HTMLCSSJavaScript來開發的，基本上就是個網頁，
HybridApp：鎮坦主要使用HTML5實現。一般使用Native語言實現一個容器，然後使用HTMLCSSJS來實現用戶界面和交互。這樣方式既克服了WebApp容器暴露偏底層的介面這樣的問題，同時比起原生的開發靈活性要高。這樣就更新可以更方便快捷，也不依賴於市場。例如，豌豆莢其實是個PC端的hybridapp。
對於以上三種開發方式的比較和分析搜索引擎裡面有太多的內容了，這里也就不再贅述了。
4、移動端網頁布局方法與pc的差異。
主要是css方面，外加如何做到同一url，不同客戶端展現不一致的做法，俗稱pc和mobile都兼容。還有會說一下rem的相關用法和一段比較經典的rem.js
最後總結一下：
其實這兩者最顯著的區別就是，webapp是不依賴於具體的設備的，通用性較強，只要手機或PC有相應內核的瀏覽器就基本OK。而mobile的app則依賴於具體的設備，一旦更換設備，需要重新下載才能繼續使用。
移動前端開發主要來說的是NativeClient的開發Android為Java，iOS為Objective-C，然後么HTML5應用號稱跨平台其實差異很大。
Web前端開發么基本上就是HTMLJavaScriptCSS，不過有些人把Servelt/JSP,PHP,Ruby,Python,C#之類的只要關繫到頁面的也叫做Web前端跡埋開發。
app是應用，每個操作系統有專門的開發工具和語言
web是網頁，使用htmlcssjs，有工具可以生成轉化為app，不過效果一般
4. 如果打算把webapp打包成nativeapp框架
1、首先我們需要先新建一個WebApp項目，目錄結構為：
index.html 項目首頁html入口文件
--html 項目文件夾
--html/css 用於存放用到的css文猜乎件
--html/js 用於存放用到的js文件
2、index.html我們可以用Dreamweaver CC來新建，操作如下：點擊文含世件菜單，再點新建，在談兆肢彈出的窗口中點流體網格布局，再點創建。
3、創建好html文件後，點擊文件-另存為，將文件名改為：index.html，保存到我們新建的WebApp項目根目錄下。如下圖：
4、這時會彈出一個對話框，提示內容如下：
這時，我們將用到的boilerplate.css文件和Untitled-2.css文件，復制到WebApp項目html/css目錄下，將用到的respond.min.js文件復制到WebApp項目html/js目錄下。
這里解釋下，boilerplate.css是定義跨瀏覽器兼容性的樣式文件，Untitled-2.css是定義自適應媒體查詢的樣式文件，respond.min.js擴展IE8以下瀏覽器支持css3的js文件，如果不需要考慮支持IE8以下瀏覽器，可以刪除掉。這里由於我們是打包生成手機端的APP，不需要用到respond.min.js，我們把它刪除掉，然後再修改下CSS的引用路徑，如下：
<link href="html/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="html/css/Untitled-1.css" rel="stylesheet" type="text/css">
5、這樣一個簡單的WebApp項目就新建好了。優化下html代碼，如下圖：
6、接著我們來使用KM盒子將這個WebApp項目打包生成手機APP應用。
打開KM盒子軟體，點擊安卓設備按鈕，在彈出的菜單中選擇 自定義打包。
接著，在彈出的對話框，設置 APK名稱，安裝包ID，文件路徑選擇我們剛才的WeApp文件夾目錄，然後點擊編譯文件。
接著，在彈出的對話框中，雙擊三個圖片，分別設置APK的豎向啟動畫面、橫向啟動畫面和桌面圖標文件，圖片格式為PNG圖片文件。
最後，在彈出的對話框，點擊生成APK安裝包，這樣一個WebApp項目打包生成手機APP就完成了。
我們來看下安裝到手機上的效果：
最後，我們學習下Dreamweaver CC生成的流體網格布局CSS文件，具體看源文件，我加了中文注釋：
@charset "utf-8";
/** HTML5 ✰ Boilerplate color:rgb(144 255 173)">v3.0.2
/*
* HTML5 ✰ 樣板
*
5. 十款HTML5開發工具
正所謂「工欲善其事必先利其器」，一名合格的Web前端開發工程師自然會用到不少能使其工作高效的工具。下面，就給大家分享Web前端學習需要了解的十款HTML5開發工具。
1、Lungo
Lungo是一款基於HTML5的開發框架，專為想要設計、構建和共享跨設備應用的開發者而准備。支持開放的Web標准，如HTML5、CSS3和JavaScript；支持手機、電視以及桌面設備。擁有強大的JavaScriptAPI：開發WebAPP應用有很多種方式，而不是一味的優化。Lungo提供了一個強大的API，這樣你可以完全掌控自己的WebAPP應用程序。
2、Animatron
Animatron是一款簡單而又強大的在線工具，通過它，你可以創建出令人驚嘆的的HTML5動畫和互動內容。使用非常直觀的Animatron編輯器去設計和發布完美的移動產品，同時也可以到處播放的電影和信息圖表等，從桌面瀏覽器到移動設備，無需編碼，所見即所得。
3、
基於HTML5開發工具是當前最快的HTML開答鄭蘆發工具，強大的代碼助手幫你快速完成開發，最全的語法庫和瀏覽器兼容性數據讓瀏覽器碎片化不再頭痛，DCloud還提供雲端打包服務，可以讓開發者直接在雲端生成.ipa或.apk安裝包供部署調試。叢沒
4、mobl
mobl是一個新的開源的編程語言，主要用於加速手機應用的開發，mobl可方便構建手機Web應用程序，包括iOS、Android和其他支持HTML5技術的手機。Mobl使用一種與JavaScript非常類似的腳本語言實現了靜態類型的推斷語言。該語言擁有以下頂級結構：實體（entities）、類型（types）、函數（functions）、控制項（controls）、屏幕（screens）、樣式（styles）和設備（services）。實體是在本地存儲中持久化的數據元素，而類型是一種供我們使用的不穩定的數據。函數與那些定義在JavaScript以及能夠調用JavaScript代碼的語言中的函數類似等。
5、Initializr
Initializr是製作HTML5網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr會為你生成代碼簡潔的可定製的網頁模板。
6、WebStorm
WebStorm是一款強大的HTML5/前端開發工具，被廣大JS開發者譽為「Web前端開發神器」。
WebStorm8全新特性中包括對AngularJS的支持，能夠高效准確地智能感知Angular語法、指令。WebStorm還完美支持Spy-js，合並了這款JavaScript調試利器，大大提高了開發者們的工作效率。
7、Notepad
Notepad程序員必備的文本編輯器，軟體小巧高效，支持27種編程語言，通吃C,C,Java,C#,XML,HTML,PHP,JS等，推薦各位下載使用。Notepad可完美地取代微軟的記事本。
8、Dreamweaver
Dreamweaver是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用於製作並編輯網站和移動應用程序的網頁設計軟體。由於它支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對於初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用於Web開發高級人員的創作！
9、Eclipse
Eclipse的本身只是一個框架平台，但是眾多插件的支持使得Eclipse擁有其他功能相對固定的IDE軟體很難具有的靈活性。許多軟體開發商以Eclipse為框架開發自己的IDE。Eclipse最初是由IBM公司開發的替代商業軟體VisualAgeforJava的下清帶一代ide開發環境，2001年11月貢獻給開源社區，現在它由非營利軟體供應商聯盟Eclipse基金會（EclipseFoundation）管理。
10、DevExtreme
DevExtreme是專為你的移動世界精心准備的，一個跨平台開發的HTML5/JS框架，可以構建iOS、Android、Tizen和WindowsPhone8應用程序，是VisualStudio開發人員開發跨平台移動產品的優選工具。
以上就是為大家分享的十款HTML5開發必備的工具，相信這些工具一定會讓你幫你在從事Web前端開發過程中提高效率，打開一扇新的大門。