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

前端之路何其漫漫~

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

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

HTML重點

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

語義化編程,HTML5的新元素的運用;

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

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

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

CSS重點

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

id和class選擇器的理解；

div和CSS的配合（包括疊加，定位和浮動）；

布局，普通，自適應，響應式，流式等布局（一點點理解吧）；

對于這張圖的理解；；

less和sass的學習；

bootstrap學習;

CSS3動畫 @keyframes;

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

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

表單驗證，對于表單的提交，容錯性的考慮；

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

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

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

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

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

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

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

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

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

ECMAscript6學習阮一峰的日志;

Nodejs學習;

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

后端重點

PHP語法簡單的了解;

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

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

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

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

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

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

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

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

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

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