Web App开发入门

《Web App开发入门》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、WebApp与NativeApp有何区别呢？　　NativeApp：　　1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。　　2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。　　3、非常酷。因为nativeapp可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果。　　4、Nativeapp是被Apple认可的。Nativea

2、pp可以被Apple认可为一款可信任的独立软件，可以放在AppleStroe出售，但是Webapp却不行。　　WebApp：　　1、开发成本较低。使用web开发技术就可以轻松的完成webapp的开发。　　2、升级较简单。升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉。　　3、维护比较轻松。和一般的web一样，维护比较简单，它其实就是一个站点。　　Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScrip

3、t，服务端技术JAVA、PHP、ASP。　　当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。　　在此所说的移动平台前端开发是指针对高端智能手机（如Ipho

4、ne、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧……　　1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

5、user-scalable=0;”name=”viewport”/>　　　　　　　　　　　　复制代码　　第一个meta标签表示：强制让文档的宽度与设备的宽度保持1

6、:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；　　第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；　　第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；　　第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。　　2、HTML5标签的使用　　在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WE

7、B应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。　　3、放弃CSSfloat属性　　在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:block;　　4、利用CSS3边框背景属性　　这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用C

8、SS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。　　5、块级化a标签　　请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。　　6、自适应布局模式　　在编写CSS时，我不建议前端工程师把容器（不