web前端學習——零基礎web前端學習路線

買了一些前端入門書籍，好像也看不太明白？看了好多視訊教程似乎也是似懂非懂？如果你現在是初學前端，入門的話，可以看看下面內容……或者有一點幫助學習前端，前端就好比如蓋房子~html就充當了房子結構這部分，也是房子的基礎。css呢，就好比我們們房子的裝修，牆面什麼顏色，什麼風格，什麼地板…這些給房子改變風格，樣式的就是cssjavascript呢，就好比這個房子的功能，房子需要製冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當於是javascript例子可能不是很恰當，只是幫助大家有個初步的認識~

1.前端工具（dreamwear/sublime/editplus/SVN） 
2.零基礎入門（html css）

前端開發概況、程式碼入門 
頁面基本結構、文件宣告、編碼宣告、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文字設定…常用標籤集合header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對路徑、相對路徑、標籤語義化、標籤巢狀規範、SEO…

常用選擇器&標籤型別劃分 
d、class、型別選擇、包含選擇、群組選擇、萬用字元、選擇器優先順序、標籤樣式初始化訂製方案、超連結及偽類劃分、標籤型別劃分及特性、inline、inline-block、block..

浮動進階 
浮動的作用、浮動的特性、文件流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件…

定位 
relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、預設值、zIndex層級問題、margin負值、透明度…

表格和表單 
表格標籤、表格樣式重置、單元格合併、表單元素、表單相關的屬性操作、表單預設樣式初始…

相容性問題處理 
相容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標籤的支援、CssHack、條件註釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式…

整站進階 
樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高佈局、三列布局、未知寬高圖片在容器內水平垂直居中、文字水平垂直居中、多行文字水平垂直居中…

css3入門 
transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高階、H5表單新增屬性、E:not(s)、E:target、E::selection、background-clip…

移動端佈局 
測試環境Emulation、viewport、window.devicePixelRatio、物理解析度、Media Queries、rem、window.screen、移動端佈局相關問題、window.deviceorientationevent、橫豎屏判斷…

Animation和Transform 
瀏覽器字首、keyFrames、Animation呼叫、播放次數設定、動畫偶數次呼叫順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執行順序問題…

Bootstrap前端開發框架 
Html語法規範、CSS語法規範、Less 和 Sass 中的巢狀、class 命名、選擇器、Normalize.css、柵格系統、排版、程式碼、響應式工具…

3.專案實戰

PC端的企業網站佈局（例：sony官網）PC端的電商類網站佈局（例：京東商城）移動端常見頁面佈局（例：微信活動頁/商城） 
個人認為學習前端可能又分為下面幾個階段

第一階段——HTML標籤的學習

超文字標記語言(HyperText Mark-up Language 簡稱HTML)，“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。

html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦

關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？ 
“我去！這麼多標籤！怎麼記得玩？” 
（web前端學習交流群：291851189禁止閒聊，非喜勿進！）

個人感覺有兩點可以嘗試：

1. 語義化的去記憶。比如ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標籤。
2. 試著寫一個一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。也許寫著寫著你就懂了呢？

學習HTML就是要自己不斷的去寫，去嘗試。看著自己的程式碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這裡面有線上的程式碼編輯器。可以邊寫邊看到效果~　　 
ok~學習完成html後，我們來到第二階段——css　　 
去給我們的房子裝修一番吧~

第二階段——CSS的學習

CSS，層疊樣式表——（Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行畫素級的精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文字展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。 
 
CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面佈局，就基本上掌握了大半啦 
這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！ 
關於CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~ 
完全就是我們需要什麼，只要憑著需求去尋找。 
說完裝修，我們終於要給房子打造一些功能啦~follow me~

第三階段——JavaScript

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

簡單來說，javascript是一個可以執行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML,CSS.

嚴格來說、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的指令碼型語言，既然是語言，那就會有字串，陣列，物件等等。而我們的javascript可以處理這些與資料有關的工作，比如給陣列排個序，去個重等等。而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的註冊功能，提交我們的留言，重新整理獲取新聞等等。

當然，我們強大的javascript遠不止此啦,以後再為大家深入介紹~

然而因為歷史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準相容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決相容。。。

所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！

如果你想學習前端可以來這個群，首先是291，中間是851，最後是189，裡面可以學習和交流，也有資料可以下載。

第四個階段——jQuery

jQuery是一個相容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp釋出，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們只需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。比如會不會吵到鄰居？怎麼協調物業？幹活總得有人手的，對吧…　　

jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！

web前端的一些小建議

這裡跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對~ 
在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的專案，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。

這裡給大家分享一些css小技巧：

1. 使用reset.css火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）
2. CSS縮寫CSS縮寫簡化了你的CSS程式碼，更重要的是，它讓你的程式碼更加整潔易懂。 
   不是像這樣建立CSS 
   css 程式碼效果預覽

1
2
3
4
5
6
7
.header {
}

而是像這樣建立CSS 
css 程式碼效果預覽

1
2
3
.header {
}

1. 理解class和id這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。
2. 實用的
4. 也叫連結列表，在與或正確搭配的時候非常好用，尤其是用在導航選單樣式上。
5. 少用多用
   CSS最大的優勢之一是使用

   達到樣式上的靈活多變。不同於，裡的內容不會 被鎖在單元格中。可以說幾乎所有的表格佈局都可以在

   和樣式的正確使用下完成。當然，有大量表格內容時，還是用 吧。

6. CSS除錯工具在設計CSS時，能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。這裡有一些免費的CSS除錯工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等
7. !Important所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。 
   css 程式碼效果預覽

1
2
3
4
.page {
}

比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支援。牢記以上小技巧，也許你的css技能突然就起飛了呢？關於javascript的一些小技巧，下次我再整理給大家。一次性看太多，大家是不是也有點暈？

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？~希望大家可以成為一個優秀的前端er！