web前端開發總結（未完）

   因爲我也是接觸前端開發不久，因此呢，本身也會作點小功課，因而，我把前端可以用到的知識稍稍作了下總結，總結的不全面，之後會慢慢完善的！

移動前端開發基礎 （總結----待完善）
一、移動前端開發：簡而言之就是對於移動設備所開發的應用，Android 、iPhone 是當今時代的主流系統，自從這兩個手機操做系統的發佈以來，Webapp（以WEB形式運行的應用程序，運行在高端的移動終端設備）便開始流行起來。
1>咱們都知道在高端智能手機系統中有兩種應用程序：一種是基於本地操做系統運行的APP 也就是nativeapp，另外一種是基於高端機的瀏覽器運行的APP，也就是webapp。首先來看一下webapp和nativeapp的區別：
@、nativeapp（基於本地運行的app）
0一、開發成本很是大（它通常使用的語言爲java、c++、等比較大型的開發軟件）。
0二、更新體驗較差，同時也是比較麻煩的（在發佈新的版本的時候，都須要打包，這樣會大量浪費時間、精力的，並且它是須要手動更新，這也是用戶體驗較差的的緣由之一）
0三、它除了有不足之處外，它仍是有一些優勢的，好比： 它很是酷（由於nativeapp能夠調用IOS中的UI控件的方法，從而能夠實現一些webapp 沒法實現的一些比較酷的交互效果）
0四、nativeapp它是被apple所承認的，（nativeapp它是被apple承認的一款可信任獨立軟件，能夠放在Apple Store出售，可是webapp就不能夠）
@、webapp（基於高端機的瀏覽器運行的app）
0一、開發成本低（使用web開發技術就能夠輕鬆完成web app 的 開發）
0二、升級比較簡單（升級不須要通知用戶，在服務器端口更新文件就能夠了）
0三、維護比較輕鬆（和通常的web同樣，維護比較簡單，它其實就是一個站點，）
說白了webapp就是針對Android和Iphone系統優化後的web站點，它所採用的技術通常都是html五、css三、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還有好多的技巧和屬性值得咱們去學習，而我總結的也只是它其中的一小部分而已。

總結的可能不太詳細，可是我會繼續加油的哦！嘻嘻！