我所使用到的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,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}
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 {font:14px \5b8b\4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif\"Microsoft YaHei"\"微軟雅黑";line-height:20px;}
h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:18px;}
@media only screen and (min-width:360px) {
h1{font-size:28px;}
h2{font-size:26px;}
h3{font-size:22px;}
body,button,input,select,textarea {font-size:18px;line-height:26px;}
}
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;}
/*取消按鈕在inphone上的默認樣式*/
input[type=button]{-webkit-appearance:none;outline:none}
input::-webkit-input-placeholder{color:#F0F0F0;}
textarea::-webkit-input-placeholder{color:#F0F0F0;}
input::-webkit-input-speech-button {display:none}
table {border-collapse:collapse;border-spacing:0;}
th {text-align:inherit;}
fieldset,img {border:none;}
abbr,acronym {border:none;font-variant:normal;}
del {text-decoration:line-through;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
ins,a,a:hover {text-decoration:none;}
a:focus,*:focus {outline:none;}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;overflow:hidden;}
.clearfix {zoom:1;}
.clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}
.hide {display:none;}
.block {display:block;}
.outL{white-space:normal;word-break:break-all;width:100px;}
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}
/*布局*/
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.rel{position:relative;}
.abs{position:absolute;}
.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%;text-align:center;padding:5px 0;}
.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}
.wrap{float:left;width:100%}
/*網格*/
/*flex*/
.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;}
/*flex*/
/*容器*/
.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:#CCCCCC;}
header{top:0;height:44px;}
footer{bottom:0;}
/*寬度*/
.w100p{width:100%}
.w20p{width:20%;}
/*邊距*/
.m5{margin:5px;}
.p5{padding:5px;}
.pt5{padding-top:5px;}
注意事項：
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>
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>
分析開發的斷點：
(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方式提交。