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

前端之路何其漫漫~

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

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

HTML重點

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

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

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

XML，這個和HTML實際上關系不大但長得很像，了解下即可，這是一種作為數據傳輸的文本形式，如今用的更多的是json傳輸數據，XML基本已經退出歷史舞臺了;

????一個網頁，我們把它分為結構層（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重點

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

id和class選擇器的理解；

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

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

對于這張圖的理解；；

less和sass的學習；

bootstrap學習;

CSS3動畫 @keyframes;

????首先我想讓大家明白的是，這門語言很好入門，況且是在大家學了一學期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我也還在學習中,按下不表;

后端重點

PHP語法簡單的了解;

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

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

Node學習，Node發展實在太快，醉的不行，現在都6.2.0版本了~;

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

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

????Photoshop,身為前端工程師Photoshop肯定是要掌握的因為很多時候設計師給的圖并不是切好的，我們主要自己切圖，于是乎，切圖也就成了我們的必備技能，切圖仔的戲稱由此而來。另外，會點Photoshop也可以給自己PP圖，裝裝逼嘛~
???? git，svn的使用，連接github啊，服務器提交代碼啊，還是很方便的，這個看個人，往深了也是很有意思的。
????很多人覺得前端工程師不需要懂算法，但事實卻是各大公司的面試題里都會多多少少有算法題，這門學問很深，倒也不必深入研究，術業有專攻，能把前端一層搞好就不錯了，切記眼高手低~，一些比較基礎經典的算法，比如快速排序算法，堆排序算法，歸并排序，選擇排序算法，深度優先，廣度優先...等等等，試著用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......這些基本就是國內前端技術的最前沿了，想學新技術或是想把一個點挖深可以多關注下這些站點~