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前端开发过程中提高效率，打开一扇新的大门。