漫談前端之路
前言
前端之路何其漫漫~
說明：本篇文章原是寫給學弟學妹的，但想來花的功夫確實不少，就把此篇文章當做自己的一個階段性總結文章了，會保持長期更新。
HTML
總的來說HTML並不難，甚至可以說很無腦……HTML的標籤個人覺得過一遍就得，知道什麼時候該用什麼標籤就可以了，因為在以後的開發中打交道最多的就是各種各樣的標籤，想不熟都難。就像現在我寫這篇文章用的Markdown一樣，只是幾個標籤的反覆應用。那麼html的學習就相對來說很自由了，可以跟著w3school
HTML重點
1. 標籤，span,div分清他們的特性，哪些是塊級元素，哪些是行內元素;
2. 語義化程式設計,HTML5的新元素的運用;
3. 按照XHTML規範寫程式碼,XHTML簡單說是一種比HTML規範更加嚴格的HTML;
4. XML，這個和HTML實際上關係不大但長得很像，瞭解下即可，這是一種作為資料傳輸的文字形式，如今用的更多的是json傳輸資料，XML基本已經退出歷史舞臺了;
CSS
一個網頁，我們把它分為結構層（HTML），樣式層（CSS），行為層（JavaScript）。這三門語言就構成了我們平常所見到的所有的網頁。需要強調的是，包括手機端網頁在內都逃脫不了這三門語言，只不過是無數的前輩為了讓後來人寫程式碼更自由一點，更爽一點，自己封裝了很多函式供我們呼叫。比如HTML ，CSS比較有名的框架Bootstrap,JavaScript的jQuery。Bootstrap是Twitter員工設計的現在整個github上star數最多的估計就是bootstrap了，截止改動日期已經達到了96802,相信過不了多久就會突破十萬了！bootstrap呢，有人說這是專門為後端設計的框架，因為它運用起來十分的簡單，將檔案引入後，知道它的定義效果是什麼樣的就能很熟練的運用，而且支援移動端，響應式佈局做的很好，這是它受歡迎的很大一部分原因~關於jquery,JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）,jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發更加便捷，例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。設計理念就是寫更少的程式碼做更多的事，因此這個庫用起來還是很爽的，但同樣也導致很多人會用jQuery實現某個功能卻不知道原生js如何實現，個人覺得原生js還是要學深的，畢竟框架和庫總是在改變，但核心——JavaScript是不會變的。
那麼CSS該如何學習呢，就一個字，敲！等你把CSS所有的坑都踩過一遍之後，CSS也就徹底出師了。在CSS3出來之前CSS就是一個純粹的樣式表，想要什麼樣式，直接設定就OK，但隨著CSS3的推出，整個CSS好像就被打了雞血一樣，煥發著活力。因為在一定程度上它把JavaScript的活給搶了，比如簡單動畫，對滑鼠事件的某些觸發等等，很多人說CSS是其實是設計師的工具，因為他沒有變數也沒有條件語句，純粹的羅列程式碼，很多程式設計師都覺得寫CSS很痛苦，事實上也的確如此，所以有了sass和less等CSS前處理器，這個讓CSS寫起來變得爽多了~另外，CSS3的動畫也是很值得研究的。
CSS重點
1. 明白什麼是塊級元素，什麼是內聯元素；塊級元素（div, form，h1-h6,hr,p等），內聯元素（span,b,a,i,img）；
2. id和class選擇器的理解；
3. div和CSS的配合（包括疊加，定位和浮動）；
4. 佈局，普通，自適應，響應式，流式等佈局（一點點理解吧）；
5. 對於這張圖的理解；；
6. less和sass的學習；
7. bootstrap學習;
8. CSS3動畫 @keyframes;
JavaScript
首先我想讓大家明白的是，這門語言很好入門，況且是在大家學了一學期C語言的前提下，但同樣要明白的是作為一門程式語言，想要精通這門語言絕不是一兩月那麼簡單的。在瀏覽器裡面有一個叫JS引擎的東西，它是用C++寫出來的，而它的作用就是渲染JavaScript程式碼，說的通俗點，就是讓瀏覽器知道我們所寫出來的JavaScript應該如何解析。Chrome之所以讓人感覺快就是因為它自己有一個牛逼的V8引擎，這是其它四個瀏覽器（IE，Firefox,Opera,Safari）所沒有的，這個V8引擎不論解析JavaScript還是Jquery都特別的吊，所以呈現頁面也就特別的快。這裡需要說一下的是，瀏覽器解析一個網頁的順序大體上是這樣的：先載入HTML標籤組成DOM樹（不知道DOM是啥不要緊，學完資料結構就明白了），遇到link,script然後載入相關的CSS或是JavaScript程式碼，這也是為什麼一般script標籤寫在body之後的原因，因為一旦相關的DOM沒有載入完而JavaScript需要對它有操作，那瀏覽器就要懵逼了。
如果說HTML和CSS給網頁穿上了一件衣服的話，那麼JavaScript就是在構造網頁的五臟六腑了。我們在編寫程式碼的時候一定要記住我們是在和瀏覽器說話，是在和瀏覽器交流，你要讓瀏覽器明白你想要呈現出的效果是什麼，不然你讓它猜（它的確會猜，這也是HTML程式碼比較自由的原因，不過還是推薦大家按照XHTML的要求寫程式碼）,瀏覽器會感覺很操蛋的，那這個交流就很不成功，即使呈現出了想要的頁面，以後想要優化的話就比較費力了。
附上幾個學習地址：慕課網視訊；W3School；我這裡還有極客學院的視訊有要的可以找我拷。給大家總結下JavaScript的重點吧：
- 如果你認為JS就是操作DOM樹，彈出個警告框那麼簡單的話就錯了，一定要抱著謙虛的態度去學（學完HTML，CSS很容易讓人產生JavaScript也很簡單的錯覺），當然它並沒有C++那麼逆天，好好學還是很容易出成績的。
- 表單驗證，對於表單的提交，容錯性的考慮；
- 網頁特效，比如我們經常看到的圖片輪播，選單導航（有一部分是純粹的CSS程式碼寫的）等；
- 資料傳輸，通過Ajax我們可以在不重新整理網頁的前提下更新網頁的部分元素哦，而且通過對於資料的操作，我們可以實現諸如瀑布流，資料交換等功能。這點可以參考QQ空間網頁版看好友動態，只要你往下一直翻，就有結果呈現出來。以前我們資料傳輸的形式是直接把php程式碼寫在HTML檔案中，但AJAX的出現打破了這一僵局，使得前後端分離的更為徹底，因為只需要一個介面，前後端定下介面也就各幹各事了。
- 事件觸發（滑鼠點選，鍵盤），開發WebAPP的話得考慮手機系統API的呼叫，和滑鼠鍵盤時間就不一樣的了，前端的API實際上只有14w+但webapp光安卓的API就有40w+,所以webapp是個大坑，在它還沒法超越原生效能之前還是不要觸碰的好~；
- OOP,jaascript沒有傳統的類的概念，所以它的很多東西實際上都是特立獨行的一套，但OOP思想才是javascript的精髓，前面操作個DOM樹，頁面優化啥的實際上並沒有多少技術含量;剛開始可能會無從下手，相信我，每個人都是這樣。先從一個小demo寫起來,起碼{}得有啊;
- json，接觸了OOP,學會了AJAX那麼現在就得學下json了，json是一種資料格式，在頁面互動中,後端會把資料以json格式返回，前端用ajax拿到後，把這個字串進行相應的解析,從而得到我們需要的資料。到了這一步，你就可以出去找專案了，只有實踐才能不斷提高自己；
- 閉包，這個後期很重要，也是javascript的一大特色，簡單的說，閉包就是實現了在函式外呼叫函式內定義的區域性變數的功能；
- 原型鏈和繼承，這是個很抽象的東西，但很有用處的東西，一定要深入看才行，真的，不然真的看不懂…找個角落，帶上耳機，看看閉包原型鏈何嘗不是一種樂趣呢~;
- 庫和框架的學習，近幾年jquery不是很受待見了，這倒不是說jquery不值得學了,只是新技術層出不窮，使得jquery的優勢不再明顯，這實際上是個好事，一方面說明技術不斷進步，另一方面也說明前端始終散發著活力。最近幾年angularjs,react，Vue都是比較火的框架，有機會可以看看，你會發現寫前端頓時變成了一件享受的事情，國內的框架還有dcloud,apicloud等等,這倆國人設計出來主要的方向是webapp，所以想做app的童鞋也可以嘗試下，感受下一次開發多平臺呼叫的快感~關於webapp有興趣的可以瞭解下，這裡按下不表。框架建議學完jquery再看;
- webpack,grunt,gulp等前端構建工具的學習和使用;
- ECMAscript6學習阮一峰的日誌;
- Nodejs學習;
後端
現在的前端並不是純粹的前端，絕大數都已經叛變了！我們口口聲聲宣稱著要實現前後端分離（實際上這才是開發的終極目標），但在實際開發中往往不能分離，所以基本每一個前端都會學一門後臺語言，比較熱門的後臺語言有：PHP，Java，Python，Node；PHP運用的最為廣泛，Java適合開發大型網站（什麼是大型網站呢，就類似於淘寶那種滿天的圖片資料那種），現在世界上80%網站還是用的PHP的，所以PHP儘量瞭解下（這估計是你們下學期考慮的事了），Node就是js(和js的語法啥的一毛一樣)，不過它多了一個模組，彌補了js的缺陷，關於模組….不知道你們理解不理解，像java有類檔案，Python有import機制，PHP有require和include。現在不懂Node的前端是很尷尬的，所以以後有機會也要了解下的。Node我也還在學習中,按下不表;
後端重點
1. PHP語法簡單的瞭解;
2. PHP框架了解CI,thinkphp,laravel等等;
3. SQL語句學習，這個必備，雖然現在的資料庫工具十分的強大，但必要的SQL語句還得懂要不怎麼用PHP程式碼操作資料庫呢~;
4. Node學習，Node發展實在太快，醉的不行，現在都6.2.0版本了~;
5. PHP7.0語法瞭解，這個具體的不太清楚,聽那些後端說加了很多新的特性~;
6. 其它語言推薦，也可以嘗試下Java寫後端的感覺，試試Python，Python在寫爬蟲和資料處理上效率還是很給勁的~
其它
Photoshop,身為前端工程師Photoshop肯定是要掌握的因為很多時候設計師給的圖並不是切好的，我們主要自己切圖，於是乎，切圖也就成了我們的必備技能，切圖仔的戲稱由此而來。另外，會點Photoshop也可以給自己PP圖，裝裝逼嘛~
很多人覺得前端工程師不需要懂演算法，但事實卻是各大公司的面試題裡都會多多少少有演算法題，這門學問很深，倒也不必深入研究，術業有專攻，能把前端一層搞好就不錯了，切記眼高手低~，一些比較基礎經典的演算法，比如快速排序演算法，堆排序演算法，歸併排序，選擇排序演算法，深度優先，廣度優先…等等等，試著用javascript敲一遍成就感還是很大大滴有的~~~;
資料結構~有演算法也就有資料結構咯~棧，佇列等線性表，樹，圖;come on,baby!
網路協議，我們知道OSI七層協議：物理層，資料鏈路層，網路層，傳輸層，會話層，表示層，應用層；我們所做的都是在這層面板上（應用層）,接觸最多的就是是HTTP協議了，協議這個玩意看不見摸不著的，很抽象，我們可以用一些抓包工具抓包像Wireshark,Fiddler等抓包工具,可以很方便抓取資料，其中wireshark各種協議通吃，也是國際上認可度很高的一款抓包工具，Fiddler一般開發者用的比較多，它可以抓取HTTPS協議，而且對於前端後端互動的資料有很好的處理，深受前端開發者的喜愛~。協議這東西看起來很無用，似乎黑客用的比較多一點~但這玩意有個好處——穩定啊，不會變，整個世界都在用的就是TCP/IP，學習成本低，也不會貶值，何不拿來耍耍~另外，很多公司面試都會問本機和伺服器建立連線時的三次握手具體都發生了什麼~所以協議這塊還是很有必要學的；
作業系統…以我現在的水平說不出來…沒學過，不過起碼得熟悉window，Linux,Mac系統的操作吧(好像還是啥都沒說，留著以後補充吧);
前端工具
作為一個前端開發者，要有適合自己的工具做開發使用，那麼使用IDE還文字是編輯器，我在這裡就不給建議了，剛開始的個人傾向還是文字編輯器，因為不同於其它語言，HTML有點像語言學科，需要記，使用IDE的話不太利於記憶標籤。IDE的話推薦WebStorm和atom(我現在再用)，國內有一款Hbuilder（可開發webapp，配合mui,html5plus,dcloud），我用過一段時間…..很蛋疼的IDE，介面設計的很不錯，也還好用，也一直在我電腦裡，但不寫APP的話是不會開啟的….像VS,Dreamweaver之流可以體驗，要是你骨骼驚奇覺得好用也可以用….並不強求；文字編輯器呢，那不用說肯定Sublime，Sublime強大的外掛支援讓它如虎添翼，用著用著就會發現，實際上在外掛的支援下它本身就是一個IDE，但卻沒有IDE啟動緩慢的詬病。剛開始可以各種工具（notepad++，UEditor，Vim等等）都試一下，不過我相信最後你還是會回到Sublime的懷抱的（如果你覺得Sublime不好用，那隻能說明你還不會用它）。附上學習地址：慕課視訊，Sublime相關部落格；安裝的話網上教程多得是，自己百一下就行。
說完了開發工具，再來說下除錯工具，除錯工具的話，Firefox有一個 外掛叫Firebug很好用，也可以使用瀏覽器自帶的開發者工具（按F12就出來了，console的使用，XHR的使用，斷點除錯，基本已經足夠日常開發了），如果要對網頁某個元素進行操作或是瞭解就把滑鼠放到元素下面，右鍵檢查就OK。或是直接點選左上角的箭頭移動滑鼠到要檢查的元素上面。除錯很重要，前端前輩們在很長一段時間裡除錯JavaScript純粹靠運氣。所以我們是很幸運的。
日常學習
書籍推薦
《JavaScript高階程式設計》《JavaScript權威指南》如果你要走前端這兩本書是必買的，甚至整個職業生涯有這兩本書就足夠了，尤其是高程深入淺出很適合新手學習。
《JavaScript DOM程式設計藝術》很通俗，適合入門；
《鋒利的jquery》jquery入門書；
《PHP和MySQL web開發》這本是很多人PHP的入門書籍，經典程度不亞於高程；
《深入淺出nodeJS》國內最好的nodejs書籍，淘寶在職大牛樸靈著作，但這本不適合入門…入門的話推薦看下面這本
《Nodejs開發指南》郭家寶著作;
《圖解HTTP》通過漫畫的形式講解HTTP協議，很通俗易懂，小日本的這本書的確不錯哦~
《HTTP權威指南》HTTP權威書籍，O’REILLY出品必屬精品~條件好的話真心推薦把O’REILLY出版的前端方面的書都買來看看;
自媒體平臺推薦
作為一個程式設計師，我們逛的網站肯定就有偏向性咯，要說程式設計師聚集地肯定是Github(感興趣的可以瞭解下，這裡按下不表)，國內網站做的比較好的部落格平臺有CSDN，部落格園，Segmentfault，V2EX,MDN，掘金等等，經常逛逛這些網站看看大牛們的部落格也是很有好處的。當然像知乎，今日頭條等類似自媒體平臺，想學也是有很多文章可以看得。微信訂閱號推薦：優秀網頁設計，前端開發，Web開發，差評（這個主要是增長點Web之外的網際網路知識），前端大全。微博賬號推薦：IT程式猿，優秀網頁設計，酷勤網-程式設計師的那點事。大家有好的媒體平臺記得分享給我啊，嘿嘿。
前端大牛/團隊推薦
前端的世界變化快，但也正因為此湧現出了一批大牛，他們對新技術的學習樂此不疲，常常自發的翻譯新技術文章，解釋新技術要點，成為新技術的佈道者。張鑫旭,阮一峰，嗷嗷，李成銀，拔持，聶微東，囧克斯，justjavac…..還有一些牛×的前端團隊,360的奇舞團，百度FEX，淘寶FED,騰訊的alloy……這些基本就是國內前端技術的最前沿了，想學新技術或是想把一個點挖深可以多關注下這些站點~