我今年是由零基礎開始入門的，剛好我第一家公司入職后就馬上讓我接手做ipad版的專題app了。(一入門就是移動端開發，是幸運也是艱辛的開始)。
我是自學前端的，當然，對Bootstrap，JQuery mobile這2個UI框架肯定是熟悉他們是怎么使用，只是沒必要再深入了。因為我當時應聘介紹自己懂這些框架都沒有一家公司來招我，原因待會解釋。
既然是零基礎入門的話，那么我先分享下我該怎么學習？
我相信大部分人都了解一個房子的構造建成了吧，那么我用比如的方法來給自己去解釋網站到底是個怎么回事？
后台其實就等於房子的地基；前端就是你看到的房子建成后的樣子。
前端構成部分由html,css,js；HTML就是你想把自己的房子構造成什么樣子，比如說哪個位置是主人房，哪個位置是客房等等布局；CSS就是你外觀和里面的裝修想什么樣的風格呢？JS就是水泥和磚頭，沒了它們，你的房子很容易毀掉。
先說一個很重要的入門前提；開發工具的推薦：
1，HBuilder，這個是國外回來的中國團隊，目前是免費使用，更新周期快，代碼提示多；其他的自己百度；
2，Notepad++：你的電腦就算卡機也可以照樣打開文件來進行編碼，當然了，他只適合做小網站；剩下的就是自己百度。
注意：只要你使用的軟件是DW，100%是處於新手階段，不要跟我說高手大神會用txt來寫代碼，是可以，但是他們會更注重效率；所以想寫出高效的代碼和提升自己的能力，還是推薦你找找合適你的開發工具吧！
說回剛剛的話題，為什么只懂UI框架會找不到工作呢？
Bootstrap，JQuery mobile，2個框架的區別：
Bootstrap：響應式設計布局，PC端和移動端都OK；響應式就是你在不同的移動屏幕看到情況會是不一樣；比如：在PC端你看到的導航欄是放到頭部的，在pad，手機上你看到的導航欄是隱藏到右邊或左邊去了，只是用一個圖標提示下給你看。(自適應布局是指你在所有的移動屏幕上看到的結果都一樣，只是大小發生變化了)。
JQuery mobile：一般只是做移動端。
2個框架的缺點普遍存在的情況：
1，一般情況下企業是會有自己的設計師來做設計布局，假如要求用這些框架的話，設計師必須要了解這2個框架里面的組件和插件，再來進行整體布局(包括效果顏色)。
2，使用過渡狀態轉到下一頁面會出現BUG，Bootstrap我測試過，當時JQuery mobile確實是存在的，而且網上你找到的解決方案一般情況下還是不能完全解決這個問題。產生這個問題的，我分析的有2種情況：1，就是移動設備兼容問題，他的系統版本低，根本不支持該屬性；2，webapp的缺陷就在這。
3，2個UI框架就算是min版的文件大小也大於100KB，企業放棄使用的原因之一，因為文件太大會占用更多的資源。
4，icon字體圖標，他們有好處也有壞處，比如說我現在的公司，2個設計師都不願意使用，因為他們說不合適我們的頁面美化方面的。我們做前端考慮到的是性能方面的，還有執行效率。
我所使用到的HTML頁面標簽：
Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ；詳細說明我就不說了，只給新手說下，為什么W3C那么多標簽，只使用16個就可以把整個項目解決了？
原因是不要以為標簽多，我們就一定要使用到它的，我們要的是使用廣泛的，易記的。
稍微解釋下，塊級元素和行內元素是什么意思？
塊級元素就是他占滿一行的；行內元素就是他的多個同類可以同時在同一行。
下面講解下，head標簽里面我們在移動端一般都放什么？
Title,meta,link,3個標簽會比較多，解釋請看：
Title:該網頁的標題，這個標題一般會顯示在瀏覽器打開該網頁時，最地址欄上面可以簡單文字段。
Meta:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no"name="format-detection"/>
<meta content="email=no"name="format-detection"/>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />
第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；user-scalable: 用戶是否可以手動縮放
第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼
第五個meta標簽:用於忽略將頁面中郵件地址
第六個就是最大的高度限定在568Px以內，這個可以忽略，因為我們都會用滑動來代替；當然了，可以用在頁面布局不多的地方！
Link:一般只是引入css文件用的，對於import大部分前輩都說不好，而且他一般也只寫在css文件內。我們假如打開一個剛剛下載到本地的網頁或框架，瀏覽頁面時很慢，估計也就是在css里面引入了谷歌文件，因為我們國內，谷歌是被封殺的！
Javascript呢？(一般情況下，把引入文件放到</body>前面的)
下面解釋放到head和</body>2個不同地方的區別：
放在head就是普遍需要用戶進行點擊或各種操作才觸發的事件。
放在</body>里面就是用戶來看之前就執行了。
現在我們來看看CSS的問題了：
1，我相信99%做過1個項目的人都會了解：reset.css(重置文件或common.css,base.css，名稱不一樣而已，用途都一樣。)
我會共享我自己今年所總結積累好的文件寫到common.css里面。
@charset "utf-8";html{font-size:62.5%;font-family:"微軟雅黑"} body{background:#eee;color:#f0f0f0;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-box-sizing:border-box} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0} body,button,input,select,textarea{line-height:25px} h1,h2,h3,h4,h5,h6{font-weight:normal} html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none} textarea{resize:none;-webkit-appearance:none;outline:0} a,img{-webkit-touch-callout:none} a:active,a:hover{outline:0;text-decoration:none} strong{font-weight:normal} em,i{font-style:normal} a{background:transparent} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto} input[type="search"]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} input[type=button]{outline:0;-webkit-appearance:none} table{border-collapse:collapse;border-spacing:0} audio,canvas,progress,video{display:inline-block;vertical-align:baseline} audio:not([controls]){display:none;height:0} th{text-align:inherit} fieldset,img{border:0} abbr,acronym{border:0;font-variant:normal} del{text-decoration:line-through} ol,ul{list-style:none} caption,th{text-align:left} sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0} sup{top:-0.5em} sub{bottom:-0.25em} ins,a,a:hover{text-decoration:none} a:focus,*:focus{outline:0} .clearfix:before,.clearfix:after{display:table;content:""} .clearfix:after{clear:both;overflow:hidden} .clearfix{zoom:1} .clear{clear:both;display:block;overflow:hidden;height:0;font-size:0;line-height:0} .hide{display:none} .block{display:block} .fl{float:left;display:inline} .fr{float:right;display:inline} .tac{text-align:center} .tal{text-align:left} .tar{text-align:right} .dib{display:inline-block} .vab{vertical-align:bottom} .vam{vertical-align:middle} .vat{vertical-align:top} .box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%} .grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .grid{*zoom:1} .grid:before,.grid:after{display:table;content:"";line-height:0} .grid:after{clear:both} .grid{list-style-type:none;padding:0;margin:0} .grid>.grid{clear:none;float:left;margin:0!important} .col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column} .row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto} .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1} .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2} .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3} h1{font-size:2.4rem} h2{font-size:2.2rem} h3{font-size:1.8rem} @media only screen and (min-width:360px){h1{font-size:2.8rem} h2{font-size:2.6rem} h3{font-size:2.2rem} body,button,input,select,textarea{font-size:1.4rem;line-height:24px} } .outL{white-space:normal;word-break:break-all;width:100px} .outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px} .ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch} header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#ccc} header{top:0;height:44px} footer{bottom:0} input::-webkit-input-placeholder{color:#ffa500} textarea::-webkit-input-placeholder{color:#ffa500} input::-webkit-input-speech-button{display:none} .wrap{float:left;width:100%} .w100p{width:100%} .w20p{width:20%} .m5{margin:5px} .p5{padding:5px} .pt5{padding-top:5px} .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink}
注意事項：
1、你使用display:inline-block瀏覽器是會有默認邊距產生的，所以假如想幾個div變成行內的而且無邊距，那么最好的方法是使用同一方向的浮動(float)，來解決無邊距的一列。
2、引入我的css文件后，你會發現為什么我在字體上要進行個斷點設置(@media)，我認真的分析過，webapp頁面的由於在320px,360px,480px，3個不同viewport寬度大小的情況下制作，那么字體大小肯定要進行相應的設置，不然你在320px的情況下看到的效果跟在480px下看到的是一樣。注意：字體是不會自適應的，只有自己進行設置才可以達到預期效果。
3、圖標是同樣不會自適應的，只有圖片可以設置100%，所以圖標假如設置100%就會影響整體布局，寬度可以在Img里面寫width=”30”這樣(30是圖片的寬度30px)。
4、除了有時header，footer是要求固定fixed定位外，那么中間要做一個容器/外套給他，我們需要在header下面使用wrapper/container放內容。這個怎么設置，你可以看我的css文件已經做好設置而且包括了案例方便查看。並且可以進行內容過多可以滑動。(關於fixed定位的問題，我多次測試的結果發現，在2.3系統以下的低端手機是不支持fixed定位的，是會出現設備兼容問題:向下滑動時，固定后也會隨着頁面移動，4.0以上的系統是可以支持，相對較好的解決方法是：使用iscoll.js；會有卡頓，但是對於低端機來講是不錯的解決方案。)我個人是選擇放棄2.3系統以下的用戶群，因為現在的手機1000元左右就可以買到4.0系統以上的手機，所以，我有理由相信連手機都不願意更換的普遍有2種情況：1，沒錢，2，根本不可能成為你的用戶；我不會像PC端那樣來兼容IE6-8，我現在唯一興幸的是公司現在沒特定標准要求，所以我可以自由選擇，我只需要知道這個解決方法就行；我既然放棄低端機市場，那么我就會以最新的技術來進行布局，所以我不使用iscoll.js，直接用我上面的那個wrapper來作為外套就行。
5、我們如果需要將內容實現2邊留有邊距，使用的是padding而不是margin。因為設置為margin的話，會出現左邊有空白邊距，右邊反而是貼邊的情況。
6、我們做前端寫頁面最煩的就是class命名，我不喜歡使用下划線，所以我們可以這樣來定義class命名方式：asideContent等情況。還有一種叫意義命名；比如說顏色：紅色，我們可以定義為：.red:color:red；模塊呢？我們可以這樣來做：比如我最近做的一個WP手機風格的webapp頁面項目。大家都應該了解他是色塊組成，顏色，大小等都不一樣。
我的解決方案是：(在銷售模塊，定義為sell)
sellHead:內容的頭部；sellFoot:內容的尾部；
如此類推就有：sellMain；sellContent；sellTitle；sellList；sellTab；sellMenu；sellBtn；sellMsg；sellBanner；sellCol；
我相信你們看到英文都容易的理解這個是什么意思，位置對應情況。
7、從有了前端這個職稱后，就逐漸開始流行：OOCSS的寫法來布局CSS頁面了。是什么意思？就是用面向對象編程的思想來寫CSS，因為現在有了Less,Sass這些了，CSS都可以實現編程了，我們前端的壓力就越來越大了。最主要的一點就是實行模塊化，代碼可以重復使用。對於沒編程基礎的童鞋來說，真心不懂這些專業的術語是個什么東東？大家可以看看下面我的解釋：
(1)、.sellContent{width:200px;height:200px;margin:10px;padding:10px}
注意：背景顏色，邊框，圓角這些就不要寫在里面了
(2)、.bg{background:#00CC66}；在HTML頁面的class=”sellContent bg”。
(一)、實現的是class組合，同時這2個class類是哪里需要往哪里放，需要什么呢？當然是他里面的屬性，只要是他需要該屬性的都可以放到一起組合。(組合一般情況下不要超過4個)
(二)、以前我們寫css可能是遇到到哪個div需要就給他定義那些屬性值，而且整個頁面下來重復的特別多；現在我這樣方式不需要了，我們可以用並列式選擇器：.sellMain,.sellContent,.sellTitle{border:1px solid #cccccc}，減少代碼重復的情況，同時繼承選擇器的作用我們就要注意了：一個項目下來，我們寫的頁面會達到100個以上，假如我寫 ul li{display:inline-block}這樣的話，那么你每個頁面只要有li的，他都會是變成行內元素。
所以，我們寫頁面前必須要先把整個項目的所有頁面看一次，腦袋進行一次布局，這樣就不會出現這類的問題了。要全面的去理解這個OOCSS的寫法，建議你去下載Bootstrap框架文件來看他的源碼，和頁面案例的布局。
8、區分min-width和max-width的區別，英文我們都看懂，但用的話就不一定了；min-width：最小的寬度為多少的時候開始執行下面的斷點布局；max-width：最大的寬度為多少的時候停止執行下面的斷點布局。
如：min-width:360px and max-width:480px,就是下面的類只在360px-480px之間執行。
注意：有時候我們在谷歌或火狐瀏覽器做測試的，然后放到真機測試時會發現，真機有時候會比瀏覽器顯示的viewport寬度還要小3px—5px。
9、做頭部的時候我往往最討厭的就是圖片和文字對齊；現在我找到新的解決放案了：
(1)、可以把這個img給他一個下邊距:負值；
(2)、有3個屬性值可以選擇來用vertical-align:top/middle/bottom 。
10、我們做移動端的時候，凡是有a標簽點擊轉鏈接的地方都會系統自帶一個透明層的點擊效果，取消點擊高亮：-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;
11、響應式布局與自適應布局：(以下僅為個人理解)
(1)、響應式布局，我的理解是在電腦，平板，手機，分別有不同的頁面布局。
(2)、自適應布局，我的理解是在電腦，平板，手機頁面布局一樣，只是文字大小，圖片大小會發生變化而已。
在電腦上，使用flex-wrap:wrap（伸縮進行換行）這個來進行布局是可以達到響應的，但是在平板和手機就目前來說還不支持這個屬性。
我推薦的最佳方案是使用flex布局。(只是不用伸縮換行屬性)
下面是我做的一個簡單案例：
注意：style.css引用的是上面提供的common.css文件：
<!DOCTYPE html>
<html>
<head>
<title>首頁</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!--開發后刪除-->
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="refresh" content="3" />
<!--開發后刪除-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css" />
<style> .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
</style>
</head>
<body>
<header>
<ol class="row">
<li class="m5">
<img src="img/back.png" width="30" /> </li>
<li class="flex3 m5">
<h1>header</h1>
</li>
<li class="m5">
<img src="img/down.png" width="30" />
</li>
</ol>
</header>
<section class="wrapper">
<ul class="row">
<li class="flexcontent p5">1</li>
<li class="flexcontent p5">2</li>
<li class="flexcontent p5">3</li>
<li class="flexcontent p5">4</li>
<li class="flexcontent p5">5</li>
</ul>
<ul class="row">
<li class="flex1 flexcontent p5">1</li>
<li class="flex3 flexcontent p5">2</li>
<li class="flex2 flexcontent p5">3</li>
</ul>
</section>
<footer class="row tac">
<ul class="col w20p">
<li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
<li class="flex1"><span>底部</span></li>
</ul>
<ul class="col w20p">
<li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
<li class="flex1"><span>底部</span></li>
</ul>
<ul class="col w20p">
<li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
<li class="flex1"><span>底部</span></li>
</ul>
<ul class="col w20p">
<li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
<li class="flex1"><span>底部</span></li>
</ul>
<ul class="col w20p">
<li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
<li class="flex1"><span>底部</span></li>
</ul>
</footer>
</body>
</html>
12、CSS3的animate.css動態的使用介紹：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>animate.css 使用方法</title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
<style> #bridge{ border-radius: 15px; background: url('images/bridge.png') no-repeat 50% 50%; margin: 0 auto; width: 400px; height: 250px; z-index: 20; position: static;
}
</style>
</head>
<body>
<div id="bridge" class="animated flash">
<!--只需要在相關的塊級標簽內添加class； 例如： class="animated bounceOutLeft" class="animated flash" -->
</div>
</body>
</html>
詳細可以參考以下網站來獲取class名：
http://daneden.github.io/animate.css/
13、移動端開發測試工具：
我做測試一般會同時用2個工具來測試頁面：
(1)、使用WAMP來建立內網：修改httpd.conf文件；下面是我共享的代碼：
# # This is the main Apache HTTP server configuration file. It contains the # configuration directives that give the server its instructions. # See <URL:http://httpd.apache.org/docs/2.4/> for detailed information. # In particular, see # <URL:http://httpd.apache.org/docs/2.4/mod/directives.html> # for a discussion of each configuration directive. # # Do NOT simply read the instructions in here without understanding # what they do. They're here only as hints or reminders. If you are unsure # consult the online docs. You have been warned. # # Configuration and logfile names: If the filenames you specify for many # of the server's control files begin with "/" (or "drive:/" for Win32), the # server will use that explicit path. If the filenames do *not* begin # with "/", the value of ServerRoot is prepended -- so "logs/access_log" # with ServerRoot set to "/usr/local/apache2" will be interpreted by the # server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" # will be interpreted as '/logs/access_log'. # # NOTE: Where filenames are specified, you must use forward slashes # instead of backslashes (e.g., "c:/apache" instead of "c:\apache"). # If a drive letter is omitted, the drive on which httpd.exe is located # will be used by default. It is recommended that you always supply # an explicit drive letter in absolute paths to avoid confusion. ServerSignature On ServerTokens Full # # ServerRoot: The top of the directory tree under which the server's # configuration, error, and log files are kept. # # Do not add a slash at the end of the directory path. If you point # ServerRoot at a non-local disk, be sure to specify a local disk on the # Mutex directive, if file-based mutexes are used. If you wish to share the # same ServerRoot for multiple httpd daemons, you will need to change at # least PidFile. # ServerRoot "c:/wamp/bin/apache/apache2.4.9" Define APACHE24 Apache2.4 # # Mutex: Allows you to set the mutex mechanism and mutex file directory # for individual mutexes, or change the global defaults # # Uncomment and change the directory if mutexes are file-based and the default # mutex file directory is not on a local disk or is not appropriate for some # other reason. # # Mutex default:logs # # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the default. See also the <VirtualHost> # directive. # # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses. # #Listen 12.34.56.78:80 Listen 0.0.0.0:80 Listen [::0]:80 # # Dynamic Shared Object (DSO) Support # # To be able to use the functionality of a module which was built as a DSO you # have to place corresponding `LoadModule' lines at this location so the # directives contained in it are actually available _before_ they are used. # Statically compiled modules (those listed by `httpd -l') do not need # to be loaded here. # # Example: # LoadModule foo_module modules/mod_foo.so # LoadModule access_compat_module modules/mod_access_compat.so LoadModule actions_module modules/mod_actions.so LoadModule alias_module modules/mod_alias.so LoadModule allowmethods_module modules/mod_allowmethods.so LoadModule asis_module modules/mod_asis.so LoadModule auth_basic_module modules/mod_auth_basic.so #LoadModule auth_digest_module modules/mod_auth_digest.so #LoadModule authn_anon_module modules/mod_authn_anon.so LoadModule authn_core_module modules/mod_authn_core.so #LoadModule authn_dbd_module modules/mod_authn_dbd.so #LoadModule authn_dbm_module modules/mod_authn_dbm.so LoadModule authn_file_module modules/mod_authn_file.so #LoadModule authn_socache_module modules/mod_authn_socache.so #LoadModule authnz_ldap_module modules/mod_authnz_ldap.so LoadModule authz_core_module modules/mod_authz_core.so #LoadModule authz_dbd_module modules/mod_authz_dbd.so #LoadModule authz_dbm_module modules/mod_authz_dbm.so LoadModule authz_groupfile_module modules/mod_authz_groupfile.so LoadModule authz_host_module modules/mod_authz_host.so #LoadModule authz_owner_module modules/mod_authz_owner.so LoadModule authz_user_module modules/mod_authz_user.so LoadModule autoindex_module modules/mod_autoindex.so #LoadModule buffer_module modules/mod_buffer.so LoadModule cache_module modules/mod_cache.so LoadModule cache_disk_module modules/mod_cache_disk.so #LoadModule cern_meta_module modules/mod_cern_meta.so LoadModule cgi_module modules/mod_cgi.so #LoadModule charset_lite_module modules/mod_charset_lite.so #LoadModule data_module modules/mod_data.so #LoadModule dav_module modules/mod_dav.so #LoadModule dav_fs_module modules/mod_dav_fs.so #LoadModule dav_lock_module modules/mod_dav_lock.so #LoadModule dbd_module modules/mod_dbd.so LoadModule deflate_module modules/mod_deflate.so LoadModule dir_module modules/mod_dir.so #LoadModule dumpio_module modules/mod_dumpio.so LoadModule env_module modules/mod_env.so #LoadModule expires_module modules/mod_expires.so #LoadModule ext_filter_module modules/mod_ext_filter.so LoadModule file_cache_module modules/mod_file_cache.so #LoadModule filter_module modules/mod_filter.so #LoadModule headers_module modules/mod_headers.so #LoadModule heartbeat_module modules/mod_heartbeat.so #LoadModule heartmonitor_module modules/mod_heartmonitor.so #LoadModule ident_module modules/mod_ident.so #LoadModule imagemap_module modules/mod_imagemap.so LoadModule include_module modules/mod_include.so #LoadModule info_module modules/mod_info.so LoadModule isapi_module modules/mod_isapi.so #LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so #LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so #LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so #LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so #LoadModule ldap_module modules/mod_ldap.so #LoadModule logio_module modules/mod_logio.so LoadModule log_config_module modules/mod_log_config.so #LoadModule log_debug_module modules/mod_log_debug.so #LoadModule log_forensic_module modules/mod_log_forensic.so #LoadModule lua_module modules/mod_lua.so LoadModule mime_module modules/mod_mime.so #LoadModule mime_magic_module modules/mod_mime_magic.so LoadModule negotiation_module modules/mod_negotiation.so #LoadModule proxy_module modules/mod_proxy.so #LoadModule proxy_ajp_module modules/mod_proxy_ajp.so #LoadModule proxy_balancer_module modules/mod_proxy_balancer.so #LoadModule proxy_connect_module modules/mod_proxy_connect.so #LoadModule proxy_express_module modules/mod_proxy_express.so #LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so #LoadModule proxy_html_module modules/mod_proxy_html.so #LoadModule proxy_http_module modules/mod_proxy_http.so #LoadModule proxy_scgi_module modules/mod_proxy_scgi.so #LoadModule ratelimit_module modules/mod_ratelimit.so #LoadModule reflector_module modules/mod_reflector.so #LoadModule remoteip_module modules/mod_remoteip.so #LoadModule request_module modules/mod_request.so #LoadModule reqtimeout_module modules/mod_reqtimeout.so #LoadModule rewrite_module modules/mod_rewrite.so #LoadModule sed_module modules/mod_sed.so #LoadModule session_module modules/mod_session.so #LoadModule session_cookie_module modules/mod_session_cookie.so #LoadModule session_crypto_module modules/mod_session_crypto.so #LoadModule session_dbd_module modules/mod_session_dbd.so LoadModule setenvif_module modules/mod_setenvif.so #LoadModule slotmem_plain_module modules/mod_slotmem_plain.so #LoadModule slotmem_shm_module modules/mod_slotmem_shm.so #LoadModule socache_dbm_module modules/mod_socache_dbm.so #LoadModule socache_memcache_module modules/mod_socache_memcache.so #LoadModule socache_shmcb_module modules/mod_socache_shmcb.so #LoadModule speling_module modules/mod_speling.so #LoadModule ssl_module modules/mod_ssl.so #LoadModule status_module modules/mod_status.so #LoadModule substitute_module modules/mod_substitute.so #LoadModule unique_id_module modules/mod_unique_id.so #LoadModule userdir_module modules/mod_userdir.so #LoadModule usertrack_module modules/mod_usertrack.so #LoadModule version_module modules/mod_version.so LoadModule vhost_alias_module modules/mod_vhost_alias.so #LoadModule watchdog_module modules/mod_watchdog.so #LoadModule xml2enc_module modules/mod_xml2enc.so LoadModule php5_module "c:/wamp/bin/php/php5.5.12/php5apache2_4.dll" #PHPIniDir c:/wamp/bin/php/php5.5.12 <IfModule unixd_module> # # If you wish httpd to run as a different user or group, you must run # httpd as root initially and it will switch. # # User/Group: The name (or #number) of the user/group to run httpd as. # It is usually good practice to create a dedicated user and group for # running httpd, as with most system services. # User daemon Group daemon </IfModule> # 'Main' server configuration # # The directives in this section set up the values used by the 'main' # server, which responds to any requests that aren't handled by a # <VirtualHost> definition. These values also provide defaults for # any <VirtualHost> containers you may define later in the file. # # All of these directives may appear inside <VirtualHost> containers, # in which case these default settings will be overridden for the # virtual host being defined. # # # ServerAdmin: Your address, where problems with the server should be # e-mailed. This address appears on some server-generated pages, such # as error documents. e.g. admin@your-domain.com # ServerAdmin admin@example.com # # ServerName gives the name and port that the server uses to identify itself. # This can often be determined automatically, but we recommend you specify # it explicitly to prevent problems during startup. # # If your host doesn't have a registered DNS name, enter its IP address here. # ServerName localhost:80 HostnameLookups Off # # DocumentRoot: The directory out of which you will serve your # documents. By default, all requests are taken from this directory, but # symbolic links and aliases may be used to point to other locations. # DocumentRoot "c:/wamp/www/" # # Each directory to which Apache has access can be configured with respect # to which services and features are allowed and/or disabled in that # directory (and its subdirectories). # # First, we configure the "default" to be a very restrictive set of # features. # <Directory /> AllowOverride none Require all granted </Directory> # # Note that from this point forward you must specifically allow # particular features to be enabled - so if something's not working as # you might expect, make sure that you have specifically enabled it # below. # <Directory "c:/wamp/www/"> # # Possible values for the Options directive are "None", "All", # or any combination of: # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews # # Note that "MultiViews" must be named *explicitly* --- "Options All" # doesn't give it to you. # # The Options directive is both complicated and important. Please see # http://httpd.apache.org/docs/2.4/mod/core.html#options # for more information. # Options Indexes FollowSymLinks Includes # # AllowOverride controls what directives may be placed in .htaccess files. # It can be "All", "None", or any combination of the keywords: # AllowOverride FileInfo AuthConfig Limit # AllowOverride all # # Controls who can get stuff from this server. # # onlineoffline tag - don't remove #Require local Require all granted </Directory> # # DirectoryIndex: sets the file that Apache will serve if a directory # is requested. # <IfModule dir_module> DirectoryIndex index.php index.php3 index.html index.htm </IfModule> # # The following lines prevent .htaccess and .htpasswd files from being # viewed by Web clients. # <Files ".ht*"> Require all denied </Files> # # ErrorLog: The location of the error log file. # If you do not specify an ErrorLog directive within a <VirtualHost> # container, error messages relating to that virtual host will be # logged here. If you *do* define an error logfile for a <VirtualHost> # container, that host's errors will be logged there and not here. # #ErrorLog "logs/error.log" ErrorLog "c:/wamp/logs/apache_error.log" # # LogLevel: Control the number of messages logged to the error_log. # Possible values include: debug, info, notice, warn, error, crit, # alert, emerg. # LogLevel warn <IfModule log_config_module> # # The following directives define some format nicknames for use with # a CustomLog directive (see below). # LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined LogFormat "%h %l %u %t \"%r\" %>s %b" common <IfModule logio_module> # You need to enable mod_logio.c to use %I and %O LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio </IfModule> # # The location and format of the access logfile (Common Logfile Format). # If you do not define any access logfiles within a <VirtualHost> # container, they will be logged here. Contrariwise, if you *do* # define per-<VirtualHost> access logfiles, transactions will be # logged therein and *not* in this file. # CustomLog "c:/wamp/logs/access.log" common # # If you prefer a logfile with access, agent, and referer information # (Combined Logfile Format) you can use the following directive. # #CustomLog "logs/access.log" combined </IfModule>
<IfModule alias_module> # # Redirect: Allows you to tell clients about documents that used to # exist in your server's namespace, but do not anymore. The client # will make a new request for the document at its new location. # Example: # Redirect permanent /foo http://www.example.com/bar # # Alias: Maps web paths into filesystem paths and is used to # access content that does not live under the DocumentRoot. # Example: # Alias /webpath /full/filesystem/path # # If you include a trailing / on /webpath then the server will # require it to be present in the URL. You will also likely # need to provide a <Directory> section to allow access to # the filesystem path. # # ScriptAlias: This controls which directories contain server scripts. # ScriptAliases are essentially the same as Aliases, except that # documents in the target directory are treated as applications and # run by the server when requested rather than as documents sent to the # client. The same rules about trailing "/" apply to ScriptAlias # directives as to Alias. # ScriptAlias /cgi-bin/ "c:/wamp/bin/apache/apache2.4.9/cgi-bin/" </IfModule>
<IfModule cgid_module> # # ScriptSock: On threaded servers, designate the path to the UNIX # socket used to communicate with the CGI daemon of mod_cgid. # #Scriptsock cgisock </IfModule> # # "c:/wamp/bin/apache/apache2.4.9/cgi-bin" should be changed to whatever your ScriptAliased # CGI directory exists, if you have that configured. # <Directory "c:/wamp/bin/apache/apache2.4.9/cgi-bin"> AllowOverride None Options None Require all granted </Directory>
<IfModule mime_module> # # TypesConfig points to the file containing the list of mappings from # filename extension to MIME-type. # TypesConfig conf/mime.types # # AddType allows you to add to or override the MIME configuration # file specified in TypesConfig for specific file types. # #AddType application/x-gzip .tgz # # AddEncoding allows you to have certain browsers uncompress # information on the fly. Note: Not all browsers support this. # AddEncoding x-compress .Z AddEncoding x-gzip .gz .tgz # # If the AddEncoding directives above are commented-out, then you # probably should define those extensions to indicate media types: # AddType application/x-compress .Z AddType application/x-gzip .gz .tgz AddType application/x-httpd-php .php AddType application/x-httpd-php .php3 # # AddHandler allows you to map certain file extensions to "handlers": # actions unrelated to filetype. These can be either built into the server # or added with the Action directive (see below) # # To use CGI scripts outside of ScriptAliased directories: # (You will also need to add "ExecCGI" to the "Options" directive.) # #AddHandler cgi-script .cgi # For type maps (negotiated resources): #AddHandler type-map var # # Filters allow you to process content before it is sent to the client. # # To parse .shtml files for server-side includes (SSI): # (You will also need to add "Includes" to the "Options" directive.) # AddType text/html .html AddOutputFilter INCLUDES .html </IfModule> # # The mod_mime_magic module allows the server to use various hints from the # contents of the file itself to determine its type. The MIMEMagicFile # directive tells the module where the hint definitions are located. # #MIMEMagicFile conf/magic # # Customizable error responses come in three flavors: # 1) plain text 2) local redirects 3) external redirects # # Some examples: #ErrorDocument 500 "The server made a boo boo." #ErrorDocument 404 /missing.html #ErrorDocument 404 "/cgi-bin/missing_handler.pl" #ErrorDocument 402 http://www.example.com/subscription_info.html # # # MaxRanges: Maximum number of Ranges in a request before # returning the entire resource, or one of the special # values 'default', 'none' or 'unlimited'. # Default setting is to accept 200 Ranges. #MaxRanges unlimited # # EnableMMAP and EnableSendfile: On systems that support it, # memory-mapping or the sendfile syscall may be used to deliver # files. This usually improves server performance, but must # be turned off when serving from networked-mounted # filesystems or if support for these functions is otherwise # broken on your system. # Defaults: EnableMMAP On, EnableSendfile Off # #EnableMMAP off EnableSendfile off # AcceptFilter: On Windows, none uses accept() rather than AcceptEx() and # will not recycle sockets between connections. This is useful for network # adapters with broken driver support, as well as some virtual network # providers such as vpn drivers, or spam, virus or spyware filters. AcceptFilter http none AcceptFilter https none # Supplemental configuration # # The configuration files in the conf/extra/ directory can be # included to add extra features or to modify the default configuration of # the server, or you may simply copy their contents here and change as # necessary. # Server-pool management (MPM specific) #Include conf/extra/httpd-mpm.conf # Multi-language error messages #Include conf/extra/httpd-multilang-errordoc.conf # Fancy directory listings Include conf/extra/httpd-autoindex.conf # Language settings #Include conf/extra/httpd-languages.conf # User home directories #Include conf/extra/httpd-userdir.conf # Real-time info on requests and configuration #Include conf/extra/httpd-info.conf # Virtual hosts #Include conf/extra/httpd-vhosts.conf # Local access to the Apache HTTP Server Manual #Include conf/extra/httpd-manual.conf # Distributed authoring and versioning (WebDAV) #Include conf/extra/httpd-dav.conf # Various default settings #Include conf/extra/httpd-default.conf # Configure mod_proxy_html to understand HTML4/XHTML1 <IfModule proxy_html_module> Include conf/extra/proxy-html.conf </IfModule> # Secure (SSL/TLS) connections #Include conf/extra/httpd-ssl.conf # # Note: The following must must be present to support # starting without SSL on platforms with no /dev/random equivalent # but a statically compiled-in mod_ssl. # <IfModule ssl_module> SSLRandomSeed startup builtin SSLRandomSeed connect builtin </IfModule> # # uncomment out the below to deal with user agents that deliberately # violate open standards by misusing DNT (DNT *must* be a specific # end-user choice) # #<IfModule setenvif_module> #BrowserMatch "MSIE 10.0;" bad_DNT #</IfModule> #<IfModule headers_module> #RequestHeader unset DNT env=bad_DNT #</IfModule> #IncludeOptional "c:/wamp/vhosts/*" Include "c:/wamp/alias/*"
直接在C盤安裝的話就直接復制就行。
(2)、國內虛擬機：靠譜助手完整版；下載后先安裝引擎，然后在軟件內下載UC瀏覽器就行。
(3)、可以嘗試使用360手機助手這類軟件來幫助你做真機測試，不過，要是你沒其他作為測試機的話，你的手機應該很容易壞！
(4)、怎么混合使用呢？方法在這：
你的電腦先開個wifi出來，然后你的手機得連上這個wifi；這樣就是內網；
只要你是有需要測試的時候，雙擊打開WAMP，加上按照我的配置文件就可以了，Windows用戶直接在“開始欄——輸入cmd——ipconfig”,然后往下看看，無線網絡：192.168.xxx.x這樣的你在手機瀏覽器地址欄輸入就行。
上面的是手機，現在給你談談靠譜助手；它不需要人工連wifi，只要你打開了一般都可以直接上網了。然后你可以去查下怎么改配置把相關的分辨率大小給改下；同樣的方法在靠譜助手的UC瀏覽器上輸入IP地址就行。
14、分析開發的斷點：
(1)、國內市場普遍的viewport寬度是320px和360px，像Note2才400px；分辨率，像素這些詞語一般是告訴給設計師，我們前端要明白的是viewport；
(2)、字體大小：我相信有部分童鞋會認為瀏覽器會自適應讓你頁面的字體隨着不同的屏幕大小而自動適應，我告訴你，你錯了！
這些字體自適應都是人為設置出來的，我推薦的方案是：
body{font:14px line-height:20px}//網頁整體字體以14px為主。
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
h1{font-size:24px}
h2{font-size:22px}
h3{font-size:18px}
@media only screen and (min-width:360px) {
body,button,input,select,textarea {font-size:18px;line-height:26px;}
h1{font-size:28px}
h2{font-size:26px}
h3{font-size:22px}
}
(3)、class類控制分析：
看到上面大概也了解怎么使用@media了吧；
另外，定義類名的第一個重要性就在這里了：因為你要控制一個class類在320px或360px不同的屏幕上有適應屏幕大小的樣式結構！
(4)、我們開發時，一般要做到兼容的瀏覽器普遍是國內的瀏覽器(蘋果的瀏覽器都是webkit內核)：UC，QQ，360，百度，這些瀏覽器是國內使用用戶量最大的瀏覽器廠商，雖然不是內核都一樣，但是普遍的兼容問題還不是很多，所以我們優先選擇兼容的是webkit內核的。
(5)、前端開發性能優化(個人總結建議)：
一、單個文件大小不要超過14KB；插件不要超過25KB。
二、優先選擇使用字體圖標，非要用上圖片的話，就使用CSS Sprite方法。同時，將整合到一張圖片的圖標集合和在網站或webapp不常用的圖片進行壓縮。
三、seo優化問題：我們常寫代碼時會經常忽略這個標簽會帶上title,alt等這些可以填上關鍵詞的地方，這個是必須要說明下，不過在手機端的話，這個好像還真用不上吧。
四、CSS，JS以模塊化形式來做項目，CSS:我們可以用@import url('form.css')這樣的形式來操作，把多個不同的css來分開寫，然后逐個引入；問題是：@import是頁面先加載完html再加載css，所以這個你得考量，這個文件是在什么情況下才使用好;JavaScript：我們可以使用sea.js或require.js來操作，網上有相關的指導教程，你可以百度或谷歌一下。
五、利用CDN技術，減輕空間資源；對企業來講，這個風險有點大；因為手機用戶的網絡差時會出現文件不一定能及時加載等問題。
六、圖片多使用PNG8來達到優化效果。
七、少對圖片進行硬性設置寬高。
八、減少頁面請求：CSS，JS，圖片數量的多少會對請求有影響；同時要注意class類組合一般情況下不要超過4個，超過的盡量以取個新的class類名來定義會好點。
九、減少DOM訪問次數，加載數量多了就影響訪問速度。
十、不要出現404頁面，避免重定向。
十一、減少cookies體積，設置合理的過期時間。
十二、緩存ajax，用get方式提交；form以post方式提交。
----------------------------------------------------------------------------
還有其他的，因為我還沒用上，所以就不知道怎么解釋了，先用着吧！
JavaScript方面的我還沒熟悉就不做太多共享了，明年再分享吧
-----------------------------------------------------------------------------
現在我給大家來談談javascript的問題(包括JS框架)：
關於數據交互的框架:knockout js ：
這個框架學習起來不是特別難，不過要運用的話，還得花心思多練習和熟悉基本的JS語法。網上有他的chm文檔，都是中文翻譯，不過看完這個后，你還是得重新去看看官方的。
最近公司要求我們學習的框架是AngularJs:
他在國內專門的中文社區，現在我用的是1.3.9版本；這個框架有angular-ui有基於Bootstrap框架的(是自帶ng指令的---開心吧)；
給你自己定好一個學習時間，定一個學習路線等等規划，對我來說，難點在於交互，我還沒搞懂！
JS是所有前端人員的難點和重點，我之前之所以學不懂JS的主要原因是顧慮太多，CSS基礎不穩定，自然要去補習，所以我這次是以穩定的CSS基礎后再去學習JS的話，應該會輕松很多。同時給自己定的時間長點，學習技術不懂就不懂急不來的，不懂就上網查和問就是了。
JS的面向對象：面向對象是一個思想，他歸根到底就是讓你寫函數封裝起來。這個跟OOCSS是一個意思，目的為了讓你以后輕松管理代碼。(雖然描述得不清晰，我說這個主要是告訴新手，面向對象不難，難的是你練習了嗎？學習的過程中不要心煩氣躁，保持頭腦清晰，冷靜的面對邏輯問題；所有的技術由入門到精通都是熟能生巧。)
今年犯了2次錯誤：
1，入門我就知道有flexbox，但是我當時以為有網格已經很不錯了，所以就拒絕學習了；
2，所以的javacript框架我都看不懂，所以也拒絕去學習js框架；現在公司壓力來了，學起來沒想象中那么困難。
在這里我要說的是 各位童鞋，千萬不要去害怕學你現在以為很難的知識和新知識；否則，當你公司真正要用上的時候，你會很痛苦。
--------------------------------------------------------------------
假如有童鞋看出我寫的地方有問題可以提出來，覺得合適的我會改！
--------------------------------------------------------