由于我也是接触前端开发不久,所以呢,自己也会做点小功课,于是,我把前端能够用到的知识稍稍做了下总结,总结的不全面,以后会慢慢完善的!

移动前端开发基础 (总结----待完善)
1、移动前端开发:简而言之就是对于移动设备所开发的应用,Android 、iPhone 是当今时代的主流系统,自从这两个手机操作系统的发布以来,Webapp(以WEB形式运行的应用程序,运行在高端的移动终端设备)便开始流行起来。
1>我们都知道在高端智能手机系统中有两种应用程序:一种是基于本地操作系统运行的APP 也就是nativeapp,另一种是基于高端机的浏览器运行的APP,也就是webapp。首先来看一下webapp和nativeapp的区别:
@、nativeapp(基于本地运行的app)
01、开发成本非常大(它一般使用的语言为java、c++、等比较大型的开发软件)。
02、更新体验较差,同时也是比较麻烦的(在发布新的版本的时候,都需要打包,这样会大量浪费时间、精力的,而且它是需要手动更新,这也是用户体验较差的的原因之一)
03、它除了有不足之处外,它还是有一些优点的,比如: 它非常酷(因为nativeapp可以调用IOS中的UI控件的方法,从而可以实现一些webapp 无法实现的一些比较酷的交互效果)
04、nativeapp它是被apple所认可的,(nativeapp它是被apple认可的一款可信任独立软件,可以放在Apple Store出售,但是webapp就不可以)
@、webapp(基于高端机的浏览器运行的app)
01、开发成本低(使用web开发技术就可以轻松完成web app 的 开发)
02、升级比较简单(升级不需要通知用户,在服务器端口更新文件就可以了)
03、维护比较轻松(和一般的web一样,维护比较简单,它其实就是一个站点,)
说白了webapp就是针对Android和Iphone系统优化后的web站点,它所采用的技术一般都是html5、css3、javascript、服务端技术JAVA、PHP、ASP等。

2>在了解了nativeapp和webapp之后,那么HTML5和css3则是我们学习的关键所在,首先来了解一下html5吧!
@、一般对于前端开发员来说,还是建议用html5来实现webapp的编写的,从而放弃那些版本较低的html4之类的,因为html5他可以实现一些html4无法实现的web应用程序,它可以减少开发者很多的工作量,减少对外部插件的需求(比如 Flash);在此之前必须要熟悉html5中的一些新标签的应用;
新添加的标签: 用于绘画的 canvas 标签
用于媒介回放的 video(视频) 和 audio(音频) 标签
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、search
比如:定义一些文章内容的区域。可以建议使用section标签;
定义一些导航条和选项卡的时候可以使用nav标签;
定义底部导航和底部板块的时候可以使用footer标签;
定义内容的头部的时候,可以用header标签;

@、在对于css3的使用中,有很多的属性值得我们去学习,那么我就列举几个比较常见的属性;
比如:在css3的编写中,我们尽量要放弃使用float属性,可以直接使用display:block(块元素转换为行内元素);
在css3中我们也应用了 animation(动画)这个属性;
animation-name ------动画的名称 ; 18:29 2014/10/30
animation-duration-----动画完成一个周期所花费的时间(秒或毫秒。默认是 0);
text-shadow 这个属性是添加阴影,它可以实现美化文字效果;
因为一些圆角按钮它会具有高光和内发光的效果,这样的效果在使用css3是无法写出来的,但是我们可以利用-webkit-border-image来定义它的样式。
有些页面它会要求我们用自适应的布局去排布,因此一般建议不要把它的宽度定义死,可以采用百分比的排布方式排列,或者是用em来代替px 的使用,这样就可以自适应一些ipad、iPod、iphone、Android、web safarik、chorme、这样的话也不用考虑一些屏幕的分辨率。

3>然而作为一名前端开发者,又想要在移动端上开发出自己的应用,那么对于WebKit内核浏览器也是必须要有一定的了解的,所以说它自己本身也是有自己的一些技巧的;我也总结了以下几点,就是平时常见的:
a.viewport
定义:相对于浏览器而言, 从字面定义它就是可视窗口、可视区域的意思,然而对于一般的浏览器我们应该都知道它是什么?也就是除去所有的工具栏、状态栏、以及滚动条以外的我们可以看得见的网页的区域;
相对于移动设备而言,因为移动设备的屏幕宽度它不同于传统的web,因此我们必须要改变viewport来实现,那么我们操作viewport就有以下几个属性:
@、width ------viewport的宽度(它的屏幕范围为220px-10000px之间,一般来说默认的宽度为980px)。
@、heigth ------viewport的高度(它的屏幕范围为223px-10000之间)。
@、minium-scale -----这是指用户所允许屏幕缩放到的最小比例。
@、maxium-scale -----这是指用户所允许屏幕缩放到的最大比例。
@、user-scalable ------这是指用户是否可以手动缩放屏幕(它一般会有两个值:yes / on)。
b.事件(event)在学习和了解移动端的时候,事件的学习是必不可少的,它在APP的实现中会起着很大的作用;它包含了很多的事件,那么下面我就列举一些我们常见的、用的比较多的事件,来进行了解和学习。
a》手势事件(从字面上理解,它就是指手指触摸到屏幕所发生的事件)它包括以下几个事件:
@、touchstart------当手指接触到屏幕时出发的事件
@、touchmove-----当手指接触到屏幕的时候开始移动时出发的事件
@、touchend-------当手指离开屏幕时触发的事件
b》触摸事件(也就是从字面意义上理解,它就是和手势事件想似,也是手指触摸到屏幕所触发的事件)
@、gestureshart----当两个手指接触到屏幕时触发的事件
@、gesturechange----当两个手指接触到屏幕后开始移动时触发的事件
@、gestureend-----当两个手指离开屏幕时触发的事件
c》屏幕旋转事件(从字面的意思上理解,就是指当屏幕发生旋转的时候它所触发的事件);要知道在发生旋转时,它的状态有没有发生变化,即左旋、右旋、或者是没旋,首先呢,必须先要进行判断:在判断的过程中我们应用到了switch这个循环语句来进行;最后记得要添加 监听事件(addEventListener)。
d》touch事件,在了解了上述各种事件时,那么touch事件则相对而言就比较容易理解了,它一般是针对于视口的宽度和高度而言的,那么也就包含了以下几点属性:
@、clientX 和 clientY 相对于当前窗口的X/Y坐标
@、screenX和screenY 相对于当前屏幕的X/Y坐标
@、pageX和pageY 相对于父元素的X/Y坐标
那么对于学习和理解webapp还有好多的技巧和属性值得我们去学习,而我总结的也只是它其中的一小部分而已。

总结的可能不太详细,但是我会继续加油的哦!嘻嘻!

web前端开发总结(未完)的更多相关文章

  1. WEB前端开发职业学习路线初级完整版

    作者 | Jeskson 来源 | 达达前端小酒馆 下面小编专门为广大web前端开发职业者汇总了学习路线初级完整版,其实web前端开发工程师可算是高福利,高薪水的职业了,所以现在学习web前端开发的技 ...

  2. 最新传智播客web前端开发39期视频教程【完整版】

    本套视频为传智2018web前端开发全套视频教程基础班+就业班,视频+源码+案例笔记,全套高清不加密~2018最新传智播客视频! 本教程是实战派课程!为传智最新web前端39期,挑战全网最全视频,没有 ...

  3. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  4. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  5. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  6. web前端开发与iOS终端开发的异同[转]

    * {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  9. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  10. 面试web前端开发,被打击了

    今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...

随机推荐

  1. IOS 制作版本新特性

    创建版本新特性 页面(存放图片) HMNewfeatureViewController.m #define HMNewfeatureImageCount 4 #import "HMNewfe ...

  2. IOS GCD(线程的 串行、并发 基本使用)

    什么是GCD 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自 ...

  3. Gym 100090M Jumping along the Hummocks

    题意: 从 前往后跳,要么跳一步,跳到相邻的位置,要么跳到下一个数字相同的位置,求跳到最后的最少步数. dp,但是会tle,我用map优化了一下. #include <bits/stdc++.h ...

  4. 模拟插队,出队,POJ(2259)

    题目链接:http://poj.org/problem?id=2259 水题一个,就是要记录一下每个队列是否有人bool[i], #include <iostream> #include ...

  5. Oracle字符编码与汉字存储长度的处理

    执行如下语句,查看汉字在数据库中所占的字节: select vsize('汉') from dual; 一般情况下,得到的结果大部分为值:2 或 3 一般linux下安装oracle数据库,默认字符编 ...

  6. C#中 property 与 attribute的区别?

    C#中 property 与 attribute的区别?答:attribute:自定义属性的基类;property :类中的属性

  7. 在Linux上部署Kettle环境

    首先我们有一个正常安装的,桌面版的Linux. Kettle的应用程序是Linux版本与Windows版本在同一个文件夹下共存的,所以可以直接把本机上的Kettle解压,通过FTP工具上传到Linux ...

  8. ES6初识-Decorator

    开始先按照个插件 npm install babel-plugin-transform-decorators-lagacy --save-dev 1.扩充和修改类的行为 2.修改的行为@readonl ...

  9. HDU.2111 Saving HDU(贪心)

    题目来源:Saving HDU 题意分析: XHD有个容量为v的口袋,有n个宝贝,每种宝贝的价值不一样,每种宝贝单位体积的价格也不一样,宝贝可以分割,分割后的价值和对应的体积成正比.求XHD最多能取回 ...

  10. thinkphp 跳转外网代码(php通用)

    thinkphp 提供了一个重定向但是在跳转外部网站的时候就会比较麻烦 下面一种方法还不错, < ?php //重定向浏览器 header("Location: http://www. ...