前端是什麼？
前端通常也稱爲web 前端，是指利用HTML,CSS,JavaScript等技術生成開發人員想要生成的網頁。網頁就是大家在瀏覽器所看到的，我們電腦裏的.html和.jsp等等爲後綴的文件也屬於網頁。
瀏覽器
無論是前端的新手學習者，還是開發人員，瀏覽器是我們開發和調試中必不可少的工具。常見的瀏覽器有Chrome（谷歌），IE，Firefox（火狐），Safari等等。
工欲善其事，必先利其器
想要編寫前端代碼，就要備有好的開發工具，以下就介紹好的開發工具1、記事本
記事本也行？聽起來好像有點誇張。其實前端開發自由度很高，大家只要打開記事本，複製如下代碼，保存後將後綴.txt改爲.html，再使用Chrome瀏覽器打開即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<b>HelloWorld</b>
</body>
</html>
但是，只有頂尖高手和傻子纔會用記事本寫代碼，因爲記憶如此多的代碼很耗精力，另一個就是效率低下。所以，絕大部分的開發者都會使用更爲高效的開發工具。
2、Sublime Text3
Sublime Text3作爲一個盡爲人知的代碼編輯器，其優點不用贅述。同時支持Windows、Linux、Mac OS X等操作系統。界面整潔美觀、文本功能強大，支持衆多插件擴展，非常適合編寫前端代碼，同時也適合編寫Python，JavaScript等腳本。
3、Webstorm
Webstorm的強大之處在於它對於HTML5和JavaScript的支持，代碼提示，檢錯等功能會讓開發變得得心應手。但是缺點也很明顯，沒有像Sublime Text3那麼輕便，打開速度很慢。
4、Vim
Vim是從 vi 發展出來的一個文本編輯器。代碼補全、編譯及錯誤跳轉等方便編程的功能特別豐富，是linux系統最常用的文本編輯器。
5、像其它的編輯器還有Editplus，Dreamweaver，HBuilder等等。
在這裏，我建議大家使用Sublime Text3和Webstorm進行開發，二者相互配合，取兩者優點，會讓開發變得簡單容易。
看到這裏，相信大家也對前端有個初步的瞭解了。下面就爲大家介紹前端三劍客。什麼是前端三劍客？就是HTML，CSS，JavaScript。
web有三個標準：
1.結構標準：結構用於對網頁元素進行整理的分類，主要包括HTML；
2.樣式標準：表現用於設置網頁元素的顏色，大小，格式等等，主要包括CSS；
3.行爲標準：對網頁模型進行交互，讓網頁不再“死氣沉沉”，主要包括JavaScript；
學習路線和書籍推薦
第一階段：HTML和CSS 最好學會PS：
HTML和CSS是入坑前端的兩把鑰匙，想學習前端必須先學習HTML和CSS。對於HTML和CSS的學習，不需要死記硬背，只需學會看懂就行，不懂就查，查哪裏？w3c標準。學習HTML和CSS要善於查文檔，熟能生巧，你就能脫離文檔編寫代碼了！
推薦書籍：《Head First HTML與CSS》，《CSS權威指南》，《CSS揭祕》
第二階段：JavaScript：
在這個階段，你要理解ECMAScript、Dom和Bom，懂得利用dom寫一些特效，如：導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流佈局、滾動事件、滾差視圖等等。千萬不要以爲這樣就學會JavaScript了，路還遠着呢！
推薦書籍：《Javascript DOM 編程藝術》（入門），《JavaScript高級程序設計》（強烈推薦），《高性能JavaScript》
第三階段：HTML5和CSS3：
HTML5和CSS3是對HTML和CSS的拓展和加強，擁有更多的屬性，可以使用更爲強大的特效。
推薦書籍：無
第四階段：數據結構，jQuery，bootstrap：
數據結構是每一門語言的核心部分，對於代碼的理解和設計有很大的幫助，本階段，學習者應該學會使用JavaScript學習數據結構和算法；jQuery是基於JavaScript的庫，jq封裝了很多的方法，方便開發者使用，處理了瀏覽器兼容，提高了兼容性，但是因爲內部要作各種複雜的判斷，開發效率會略微降低；bootstrap是CSS的庫，很強大，提高了開發效率。
推薦書籍：《學習JavaScript數據結構與算法》，《鋒利的jquery》，《Bootstrap用戶手冊：設計響應式網站》（非必需，可以通過bootstrap學習文檔學習）
第五階段：
此時，對前端已經有一個較深的認識了，可以根據自己的興趣和需要去學習，可以學習更多的前端的框架或者走全棧路線等等。