如何學習web（網頁）前端？ 在這裡小編根據自身一些微薄的知識與網路大批量的收集，以下總結：

未入門問題

對於一個想入門，卻還沒有入門的愛好者，首先先了解前端是什麼？用什麼軟體開發？有什麼語言？有什麼框架等。大概先做一個瞭解，小編覺得很有必要。web前端學習群606721798

1、前端是什麼？

總結就兩個字，介面。包括網頁、窗體、手機、微信等，只要說是使用者能看見的東西，大概都是前端吧。

當然，你能看見，就會想這個是怎麼做的呢？

其實前端你可以看成蓋房子_{html就充當了房子結構這部分，也是房子的基礎。css呢，就好比咱們房子的裝修，牆面什麼顏色，什麼風格，什麼地板…這些給房子改變風格，樣式的就是cssjavascript呢，就好比這個房子的功能，房子需要製冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當於是javascript例子可能不是很恰當，只是幫助大家有個初步的認識}

2、軟體開發

作為一個優秀的前端工程師當然是任何軟體都是能輕鬆駕馭的（這裡說的是能開發前端的軟體），當然也會忠於一款到兩款的開發軟體。作為一個還沒入門的工程師，可以選擇比較老牌，也就是功能齊全一點總是沒錯的。Dreamweaver、notepad++都是可以的。如果你購買的書籍，那麼就是資料介紹的也不錯。

3、編碼瞭解

前端開發概況、程式碼入門

作為一個前端工程師，頁面基本結構、文件宣告、編碼宣告、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文字設定…常用標籤集合header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對路徑、相對路徑、標籤語義化、標籤巢狀規範、SEO…等等，這些或多或少你要掌握，有些可能你不會用到，但知道一點也是多程式設計近一步理解。

常用選擇器&標籤型別劃分

d、class、型別選擇、包含選擇、群組選擇、萬用字元、選擇器優先順序、標籤樣式初始化訂製方案、超連結及偽類劃分、標籤型別劃分及特性、inline、inline-block、block…

浮動進階

浮動的作用、浮動的特性、文件流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件…

定位

relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、預設值、zIndex層級問題、margin負值、透明度…

表格和表單

表格標籤、表格樣式重置、單元格合併、表單元素、表單相關的屬性操作、表單預設樣式初始…

4、進階編碼

瞭解了初步的編碼，但作為一個工程師還是不夠的，還需要更深層瞭解。

相容性問題處理

相容性的問題，小編在這裡不得不說，這是前端的一個坑，介於現在瀏覽器大多數都很人性化了，只是部分沒有升級或還喜歡用IE6、7瀏覽器的使用者，有些頭疼。相容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標籤的支援、CssHack、條件註釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式…

隨便還說一句，專案不大，IE瀏覽器就放棄吧。

整站進階

樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高佈局、三列布局、未知寬高圖片在容器內水平垂直居中、文字水平垂直居中、多行文字水平垂直居中…

css3入門

transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高階、H5表單新增屬性、E:not(s)、E:target、E::selection、background-clip…

移動端佈局

測試環境Emulation、viewport、window.devicePixelRatio、物理解析度、Media Queries、rem、window.screen、移動端佈局相關問題、window.deviceorientationevent、橫豎屏判斷…

Animation和Transform

瀏覽器字首、keyFrames、Animation呼叫、播放次數設定、動畫偶數次呼叫順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執行順序問題…

Bootstrap前端開發框架 （或其他框架）

Html語法規範、CSS語法規範、Less 和 Sass 中的巢狀、class 命名、選擇器、Normalize.css、柵格系統、排版、程式碼、響應式工具…

5、專案實戰

等你以上問題都大概知道了，或者還能學的更多，那麼恭喜你，你已經入門了，接下來就是檢驗自己的學習成果的時候。

做一個PC端的企業網站佈局（例：sony官網）PC端的電商類網站佈局（例：京東商城）移動端常見頁面佈局（例：微信活動頁/商城）

小編認為學習前端可能又分為下面幾個階段

第一階段——HTML標籤的學習

超文字標記語言(HyperText Mark-up Language 簡稱HTML)，“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。

html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦

ok~學習完成html後，我們來到第二階段——css

去給我們的房子裝修一番吧~

第二階段——CSS的學習

CSS，層疊樣式表——（Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行畫素級的精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文字展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面佈局，就基本上掌握了大半啦

這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！

關於CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什麼，只要憑著需求去尋找。

說完裝修，我們終於要給房子打造一些功能啦~follow me~

第三階段——JavaScript

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

簡單來說，javascript是一個可以執行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML,CSS.

嚴格來說、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的指令碼型語言，既然是語言，那就會有字串，陣列，物件等等。而我們的javascript可以處理這些與資料有關的工作，比如給陣列排個序，去個重等等。而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的註冊功能，提交我們的留言，重新整理獲取新聞等等。

當然，我們強大的javascript遠不止此啦,以後再為大家深入介紹~

然而因為歷史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準相容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決相容。。。

所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！

第四個階段——jQuery

jQuery是一個相容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp釋出，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們只需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。比如會不會吵到鄰居？怎麼協調物業？幹活總得有人手的，對吧…

jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！web前端學習群606721798