摘要：那么的學(xué)習(xí)就相對(duì)來說很自由了，可以跟著網(wǎng)址過一遍標(biāo)簽，網(wǎng)上也有很多其它網(wǎng)站做這個(gè)的，像菜鳥教程慕課網(wǎng)視頻之類的都可以用等熟練了就可以去國外看看一些前端的新技術(shù)，像國際，最大的程序員問答網(wǎng)站。

前端之路何其漫漫~

????說明：本篇文章原是寫給學(xué)弟學(xué)妹的，但想來花的功夫確實(shí)不少，就把此篇文章當(dāng)做自己的一個(gè)階段性總結(jié)文章了，會(huì)保持長期更新。

????總的來說HTML并不難，甚至可以說很無腦……HTML的標(biāo)簽個(gè)人覺得過一遍就得，知道什么時(shí)候該用什么標(biāo)簽就可以了，因?yàn)樵谝院蟮拈_發(fā)中打交道最多的就是各種各樣的標(biāo)簽，想不熟都難。就像現(xiàn)在我寫這篇文章用的Markdown一樣，只是幾個(gè)標(biāo)簽的反復(fù)應(yīng)用。那么html的學(xué)習(xí)就相對(duì)來說很自由了，可以跟著w3schoolW3school網(wǎng)址過一遍標(biāo)簽，網(wǎng)上也有很多其它網(wǎng)站做這個(gè)的，像菜鳥教程,慕課網(wǎng)視頻之類的都可以用,等熟練了就可以去國外看看一些前端的新技術(shù)，像MDN,W3cschool(國際)，stackoverflow(最大的程序員問答網(wǎng)站)。

HTML重點(diǎn)

標(biāo)簽，span,div分清他們的特性，哪些是塊級(jí)元素，哪些是行內(nèi)元素;

語義化編程,HTML5的新元素的運(yùn)用;

按照XHTML規(guī)范寫代碼,XHTML簡(jiǎn)單說是一種比HTML規(guī)范更加嚴(yán)格的HTML;

XML，這個(gè)和HTML實(shí)際上關(guān)系不大但長得很像，了解下即可，這是一種作為數(shù)據(jù)傳輸?shù)奈谋拘问剑缃裼玫母嗟氖莏son傳輸數(shù)據(jù)，XML基本已經(jīng)退出歷史舞臺(tái)了;

????一個(gè)網(wǎng)頁，我們把它分為結(jié)構(gòu)層（HTML），樣式層（CSS），行為層（JavaScript）。這三門語言就構(gòu)成了我們平常所見到的所有的網(wǎng)頁。需要強(qiáng)調(diào)的是，包括手機(jī)端網(wǎng)頁在內(nèi)都逃脫不了這三門語言，只不過是無數(shù)的前輩為了讓后來人寫代碼更自由一點(diǎn)，更爽一點(diǎn)，自己封裝了很多函數(shù)供我們調(diào)用。比如HTML ，CSS比較有名的框架Bootstrap,JavaScript的jQuery。Bootstrap是Twitter員工設(shè)計(jì)的現(xiàn)在整個(gè)github上star數(shù)最多的估計(jì)就是bootstrap了，截止改動(dòng)日期已經(jīng)達(dá)到了96802,相信過不了多久就會(huì)突破十萬了！bootstrap呢，有人說這是專門為后端設(shè)計(jì)的框架，因?yàn)樗\(yùn)用起來十分的簡(jiǎn)單，將文件引入后，知道它的定義效果是什么樣的就能很熟練的運(yùn)用，而且支持移動(dòng)端，響應(yīng)式布局做的很好，這是它受歡迎的很大一部分原因~關(guān)于jquery,JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫。它是輕量級(jí)的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）,jQuery是免費(fèi)、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計(jì)可以使開發(fā)更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫效果、事件處理、使用Ajax以及其他功能。設(shè)計(jì)理念就是寫更少的代碼做更多的事，因此這個(gè)庫用起來還是很爽的，但同樣也導(dǎo)致很多人會(huì)用jQuery實(shí)現(xiàn)某個(gè)功能卻不知道原生js如何實(shí)現(xiàn)，個(gè)人覺得原生js還是要學(xué)深的，畢竟框架和庫總是在改變，但核心——JavaScript是不會(huì)變的。
????那么CSS該如何學(xué)習(xí)呢，就一個(gè)字，敲！等你把CSS所有的坑都踩過一遍之后，CSS也就徹底出師了。在CSS3出來之前CSS就是一個(gè)純粹的樣式表，想要什么樣式，直接設(shè)置就OK，但隨著CSS3的推出，整個(gè)CSS好像就被打了雞血一樣，煥發(fā)著活力。因?yàn)樵谝欢ǔ潭壬纤袹avaScript的活給搶了，比如簡(jiǎn)單動(dòng)畫，對(duì)鼠標(biāo)事件的某些觸發(fā)等等，很多人說CSS是其實(shí)是設(shè)計(jì)師的工具，因?yàn)樗麤]有變量也沒有條件語句，純粹的羅列代碼，很多程序員都覺得寫CSS很痛苦，事實(shí)上也的確如此，所以有了sass和less等CSS預(yù)處理器，這個(gè)讓CSS寫起來變得爽多了~另外，CSS3的動(dòng)畫也是很值得研究的。

CSS重點(diǎn)

明白什么是塊級(jí)元素，什么是內(nèi)聯(lián)元素；塊級(jí)元素（div, form，h1-h6,hr,p等），內(nèi)聯(lián)元素（span,b,a,i,img）；

id和class選擇器的理解；

div和CSS的配合（包括疊加，定位和浮動(dòng)）；

布局，普通，自適應(yīng)，響應(yīng)式，流式等布局（一點(diǎn)點(diǎn)理解吧）；

對(duì)于這張圖的理解；；

less和sass的學(xué)習(xí)；

bootstrap學(xué)習(xí);

CSS3動(dòng)畫 @keyframes;

????首先我想讓大家明白的是，這門語言很好入門，況且是在大家學(xué)了一學(xué)期C語言的前提下，但同樣要明白的是作為一門編程語言，想要精通這門語言絕不是一兩月那么簡(jiǎn)單的。在瀏覽器里面有一個(gè)叫JS引擎的東西，它是用C++寫出來的，而它的作用就是渲染JavaScript代碼，說的通俗點(diǎn)，就是讓瀏覽器知道我們所寫出來的JavaScript應(yīng)該如何解析。Chrome之所以讓人感覺快就是因?yàn)樗约河幸粋€(gè)牛逼的V8引擎，這是其它四個(gè)瀏覽器（IE，F(xiàn)irefox,Opera,Safari）所沒有的，這個(gè)V8引擎不論解析JavaScript還是Jquery都特別的吊，所以呈現(xiàn)頁面也就特別的快。這里需要說一下的是，瀏覽器解析一個(gè)網(wǎng)頁的順序大體上是這樣的：先加載HTML標(biāo)簽組成DOM樹（不知道DOM是啥不要緊，學(xué)完數(shù)據(jù)結(jié)構(gòu)就明白了），遇到link,script然后加載相關(guān)的CSS或是JavaScript代碼，這也是為什么一般script標(biāo)簽寫在body之后的原因，因?yàn)橐坏┫嚓P(guān)的DOM沒有加載完而JavaScript需要對(duì)它有操作，那瀏覽器就要懵逼了。
????如果說HTML和CSS給網(wǎng)頁穿上了一件衣服的話，那么JavaScript就是在構(gòu)造網(wǎng)頁的五臟六腑了。我們?cè)诰帉懘a的時(shí)候一定要記住我們是在和瀏覽器說話，是在和瀏覽器交流，你要讓瀏覽器明白你想要呈現(xiàn)出的效果是什么，不然你讓它猜（它的確會(huì)猜，這也是HTML代碼比較自由的原因，不過還是推薦大家按照XHTML的要求寫代碼）,瀏覽器會(huì)感覺很操蛋的，那這個(gè)交流就很不成功，即使呈現(xiàn)出了想要的頁面，以后想要優(yōu)化的話就比較費(fèi)力了。
????附上幾個(gè)學(xué)習(xí)地址：慕課網(wǎng)視頻；W3School；我這里還有極客學(xué)院的視頻有要的可以找我拷。給大家總結(jié)下JavaScript的重點(diǎn)吧：

如果你認(rèn)為JS就是操作DOM樹，彈出個(gè)警告框那么簡(jiǎn)單的話就錯(cuò)了，一定要抱著謙虛的態(tài)度去學(xué)（學(xué)完HTML，CSS很容易讓人產(chǎn)生JavaScript也很簡(jiǎn)單的錯(cuò)覺），當(dāng)然它并沒有C++那么逆天，好好學(xué)還是很容易出成績(jī)的。

表單驗(yàn)證，對(duì)于表單的提交，容錯(cuò)性的考慮；

網(wǎng)頁特效，比如我們經(jīng)常看到的圖片輪播，菜單導(dǎo)航（有一部分是純粹的CSS代碼寫的）等；

數(shù)據(jù)傳輸，通過Ajax我們可以在不刷新網(wǎng)頁的前提下更新網(wǎng)頁的部分元素哦，而且通過對(duì)于數(shù)據(jù)的操作，我們可以實(shí)現(xiàn)諸如瀑布流，數(shù)據(jù)交換等功能。這點(diǎn)可以參考QQ空間網(wǎng)頁版看好友動(dòng)態(tài)，只要你往下一直翻，就有結(jié)果呈現(xiàn)出來。以前我們數(shù)據(jù)傳輸?shù)男问绞侵苯影裵hp代碼寫在HTML文件中，但AJAX的出現(xiàn)打破了這一僵局，使得前后端分離的更為徹底，因?yàn)橹恍枰粋€(gè)接口，前后端定下接口也就各干各事了。

事件觸發(fā)（鼠標(biāo)點(diǎn)擊，鍵盤），開發(fā)WebAPP的話得考慮手機(jī)系統(tǒng)API的調(diào)用，和鼠標(biāo)鍵盤時(shí)間就不一樣的了，前端的API實(shí)際上只有14w+但webapp光安卓的API就有40w+,所以webapp是個(gè)大坑，在它還沒法超越原生性能之前還是不要觸碰的好~；

OOP,jaascript沒有傳統(tǒng)的類的概念，所以它的很多東西實(shí)際上都是特立獨(dú)行的一套，但OOP思想才是javascript的精髓，前面操作個(gè)DOM樹，頁面優(yōu)化啥的實(shí)際上并沒有多少技術(shù)含量;剛開始可能會(huì)無從下手，相信我，每個(gè)人都是這樣。先從一個(gè)小demo寫起來,起碼{}得有啊;

json，接觸了OOP,學(xué)會(huì)了AJAX那么現(xiàn)在就得學(xué)下json了，json是一種數(shù)據(jù)格式，在頁面交互中,后端會(huì)把數(shù)據(jù)以json格式返回，前端用ajax拿到后，把這個(gè)字符串進(jìn)行相應(yīng)的解析,從而得到我們需要的數(shù)據(jù)。到了這一步，你就可以出去找項(xiàng)目了，只有實(shí)踐才能不斷提高自己；

閉包，這個(gè)后期很重要，也是javascript的一大特色，簡(jiǎn)單的說，閉包就是實(shí)現(xiàn)了在函數(shù)外調(diào)用函數(shù)內(nèi)定義的局部變量的功能；

原型鏈和繼承，這是個(gè)很抽象的東西，但很有用處的東西，一定要深入看才行，真的，不然真的看不懂...找個(gè)角落，帶上耳機(jī)，看看閉包原型鏈何嘗不是一種樂趣呢~;

庫和框架的學(xué)習(xí)，近幾年jquery不是很受待見了，這倒不是說jquery不值得學(xué)了,只是新技術(shù)層出不窮，使得jquery的優(yōu)勢(shì)不再明顯，這實(shí)際上是個(gè)好事，一方面說明技術(shù)不斷進(jìn)步，另一方面也說明前端始終散發(fā)著活力。最近幾年angularjs,react，Vue都是比較火的框架，有機(jī)會(huì)可以看看，你會(huì)發(fā)現(xiàn)寫前端頓時(shí)變成了一件享受的事情，國內(nèi)的框架還有dcloud,apicloud等等,這倆國人設(shè)計(jì)出來主要的方向是webapp，所以想做app的童鞋也可以嘗試下，感受下一次開發(fā)多平臺(tái)調(diào)用的快感~關(guān)于webapp有興趣的可以了解下，這里按下不表。框架建議學(xué)完jquery再看;

webpack,grunt,gulp等前端構(gòu)建工具的學(xué)習(xí)和使用;

ECMAscript6學(xué)習(xí)阮一峰的日志;

Nodejs學(xué)習(xí);

????現(xiàn)在的前端并不是純粹的前端，絕大數(shù)都已經(jīng)叛變了！我們口口聲聲宣稱著要實(shí)現(xiàn)前后端分離（實(shí)際上這才是開發(fā)的終極目標(biāo)），但在實(shí)際開發(fā)中往往不能分離，所以基本每一個(gè)前端都會(huì)學(xué)一門后臺(tái)語言，比較熱門的后臺(tái)語言有：PHP，Java，Python，Node；PHP運(yùn)用的最為廣泛，Java適合開發(fā)大型網(wǎng)站（什么是大型網(wǎng)站呢，就類似于淘寶那種滿天的圖片數(shù)據(jù)那種），現(xiàn)在世界上80%網(wǎng)站還是用的PHP的，所以PHP盡量了解下（這估計(jì)是你們下學(xué)期考慮的事了），Node就是js(和js的語法啥的一毛一樣)，不過它多了一個(gè)模塊，彌補(bǔ)了js的缺陷，關(guān)于模塊....不知道你們理解不理解，像java有類文件，Python有import機(jī)制，PHP有require和include。現(xiàn)在不懂Node的前端是很尷尬的，所以以后有機(jī)會(huì)也要了解下的。Node我也還在學(xué)習(xí)中,按下不表;

后端重點(diǎn)

PHP語法簡(jiǎn)單的了解;

PHP框架了解CI,thinkphp,laravel等等;

SQL語句學(xué)習(xí)，這個(gè)必備，雖然現(xiàn)在的數(shù)據(jù)庫工具十分的強(qiáng)大，但必要的SQL語句還得懂要不怎么用PHP代碼操作數(shù)據(jù)庫呢~;

Node學(xué)習(xí)，Node發(fā)展實(shí)在太快，醉的不行，現(xiàn)在都6.2.0版本了~;

PHP7.0語法了解，這個(gè)具體的不太清楚,聽那些后端說加了很多新的特性~;

其它語言推薦，也可以嘗試下Java寫后端的感覺，試試Python，Python在寫爬蟲和數(shù)據(jù)處理上效率還是很給勁的~

????Photoshop,身為前端工程師Photoshop肯定是要掌握的因?yàn)楹芏鄷r(shí)候設(shè)計(jì)師給的圖并不是切好的，我們主要自己切圖，于是乎，切圖也就成了我們的必備技能，切圖仔的戲稱由此而來。另外，會(huì)點(diǎn)Photoshop也可以給自己PP圖，裝裝逼嘛~
???? git，svn的使用，連接github啊，服務(wù)器提交代碼啊，還是很方便的，這個(gè)看個(gè)人，往深了也是很有意思的。
????很多人覺得前端工程師不需要懂算法，但事實(shí)卻是各大公司的面試題里都會(huì)多多少少有算法題，這門學(xué)問很深，倒也不必深入研究，術(shù)業(yè)有專攻，能把前端一層搞好就不錯(cuò)了，切記眼高手低~，一些比較基礎(chǔ)經(jīng)典的算法，比如快速排序算法，堆排序算法，歸并排序，選擇排序算法，深度優(yōu)先，廣度優(yōu)先...等等等，試著用javascript敲一遍成就感還是很大大滴有的~~~;
????數(shù)據(jù)結(jié)構(gòu)~有算法也就有數(shù)據(jù)結(jié)構(gòu)咯~棧，隊(duì)列等線性表，樹，圖;come on,baby!
????網(wǎng)絡(luò)協(xié)議，我們知道OSI七層協(xié)議：物理層，數(shù)據(jù)鏈路層，網(wǎng)絡(luò)層，傳輸層，會(huì)話層，表示層，應(yīng)用層；我們所做的都是在這層皮膚上（應(yīng)用層）,接觸最多的就是是HTTP協(xié)議了，協(xié)議這個(gè)玩意看不見摸不著的，很抽象，我們可以用一些抓包工具抓包像Wireshark,Fiddler等抓包工具,可以很方便抓取數(shù)據(jù)，其中wireshark各種協(xié)議通吃，也是國際上認(rèn)可度很高的一款抓包工具，F(xiàn)iddler一般開發(fā)者用的比較多，它可以抓取HTTPS協(xié)議，而且對(duì)于前端后端交互的數(shù)據(jù)有很好的處理，深受前端開發(fā)者的喜愛~。協(xié)議這東西看起來很無用，似乎黑客用的比較多一點(diǎn)~但這玩意有個(gè)好處——穩(wěn)定啊，不會(huì)變，整個(gè)世界都在用的就是TCP/IP，學(xué)習(xí)成本低，也不會(huì)貶值，何不拿來耍耍~另外，很多公司面試都會(huì)問本機(jī)和服務(wù)器建立連接時(shí)的三次握手具體都發(fā)生了什么~所以協(xié)議這塊還是很有必要學(xué)的；
????操作系統(tǒng)...以我現(xiàn)在的水平說不出來...沒學(xué)過，不過起碼得熟悉window，Linux,Mac系統(tǒng)的操作吧(好像還是啥都沒說，留著以后補(bǔ)充吧);

????作為一個(gè)前端開發(fā)者，要有適合自己的工具做開發(fā)使用，那么使用IDE還文本是編輯器，我在這里就不給建議了，剛開始的個(gè)人傾向還是文本編輯器，因?yàn)椴煌谄渌Z言，HTML有點(diǎn)像語言學(xué)科，需要記，使用IDE的話不太利于記憶標(biāo)簽。IDE的話推薦WebStorm和atom(我現(xiàn)在再用)，國內(nèi)有一款Hbuilder（可開發(fā)webapp，配合mui,html5plus,dcloud），我用過一段時(shí)間.....很蛋疼的IDE，界面設(shè)計(jì)的很不錯(cuò)，也還好用，也一直在我電腦里，但不寫APP的話是不會(huì)打開的....像VS,Dreamweaver之流可以體驗(yàn)，要是你骨骼驚奇覺得好用也可以用....并不強(qiáng)求；文本編輯器呢，那不用說肯定Sublime，Sublime強(qiáng)大的插件支持讓它如虎添翼，用著用著就會(huì)發(fā)現(xiàn)，實(shí)際上在插件的支持下它本身就是一個(gè)IDE，但卻沒有IDE啟動(dòng)緩慢的詬病。剛開始可以各種工具（notepad++，UEditor，Vim等等）都試一下，不過我相信最后你還是會(huì)回到Sublime的懷抱的（如果你覺得Sublime不好用，那只能說明你還不會(huì)用它）。附上學(xué)習(xí)地址：慕課視頻，Sublime相關(guān)博客；安裝的話網(wǎng)上教程多得是，自己百一下就行。
????說完了開發(fā)工具，再來說下調(diào)試工具，調(diào)試工具的話，F(xiàn)irefox有一個(gè) 插件叫Firebug很好用，也可以使用瀏覽器自帶的開發(fā)者工具（按F12就出來了，console的使用，XHR的使用，斷點(diǎn)調(diào)試，基本已經(jīng)足夠日常開發(fā)了），如果要對(duì)網(wǎng)頁某個(gè)元素進(jìn)行操作或是了解就把鼠標(biāo)放到元素下面，右鍵檢查就OK。或是直接點(diǎn)擊左上角的箭頭移動(dòng)鼠標(biāo)到要檢查的元素上面。調(diào)試很重要，前端前輩們?cè)诤荛L一段時(shí)間里調(diào)試JavaScript純粹靠運(yùn)氣。所以我們是很幸運(yùn)的。

????《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript權(quán)威指南》如果你要走前端這兩本書是必買的，甚至整個(gè)職業(yè)生涯有這兩本書就足夠了，尤其是高程深入淺出很適合新手學(xué)習(xí)。
????《JavaScript DOM編程藝術(shù)》很通俗，適合入門；
????《鋒利的jquery》jquery入門書；
????《PHP和MySQL web開發(fā)》這本是很多人PHP的入門書籍，經(jīng)典程度不亞于高程；
????《深入淺出nodeJS》國內(nèi)最好的nodejs書籍，淘寶在職大牛樸靈著作，但這本不適合入門...入門的話推薦看下面這本
????《Nodejs開發(fā)指南》郭家寶著作;
????《圖解HTTP》通過漫畫的形式講解HTTP協(xié)議，很通俗易懂，小日本的這本書的確不錯(cuò)哦~
????《HTTP權(quán)威指南》HTTP權(quán)威書籍，O"REILLY出品必屬精品~條件好的話真心推薦把O"REILLY出版的前端方面的書都買來看看;

????作為一個(gè)程序員，我們逛的網(wǎng)站肯定就有偏向性咯，要說程序員聚集地肯定是Github(感興趣的可以了解下，這里按下不表)，國內(nèi)網(wǎng)站做的比較好的博客平臺(tái)有CSDN，博客園，Segmentfault，V2EX,MDN，掘金等等，經(jīng)常逛逛這些網(wǎng)站看看大牛們的博客也是很有好處的。當(dāng)然像知乎，今日頭條等類似自媒體平臺(tái)，想學(xué)也是有很多文章可以看得。微信訂閱號(hào)推薦：優(yōu)秀網(wǎng)頁設(shè)計(jì)，前端開發(fā)，Web開發(fā)，差評(píng)（這個(gè)主要是增長點(diǎn)Web之外的互聯(lián)網(wǎng)知識(shí)），前端大全。微博賬號(hào)推薦：IT程序猿，優(yōu)秀網(wǎng)頁設(shè)計(jì)，酷勤網(wǎng)-程序員的那點(diǎn)事。大家有好的媒體平臺(tái)記得分享給我啊，嘿嘿。

????前端的世界變化快，但也正因?yàn)榇擞楷F(xiàn)出了一批大牛，他們對(duì)新技術(shù)的學(xué)習(xí)樂此不疲，常常自發(fā)的翻譯新技術(shù)文章，解釋新技術(shù)要點(diǎn)，成為新技術(shù)的布道者。張?chǎng)涡?阮一峰，嗷嗷，李成銀，拔持，聶微東，囧克斯，justjavac.....還有一些牛×的前端團(tuán)隊(duì),360的奇舞團(tuán)，百度FEX，淘寶FED,騰訊的alloy......這些基本就是國內(nèi)前端技術(shù)的最前沿了，想學(xué)新技術(shù)或是想把一個(gè)點(diǎn)挖深可以多關(guān)注下這些站點(diǎn)~