1. 零基礎學習Web 前端，求大神指點，該如何下手謝謝！
1. Web前端是做什麼的？
學習之前我對網頁設計、UI、網頁制所盒Web前端的概念很混淆，上網查了才明白：網頁設計是指運用一些軟體對網站進行美化，解決「好看」的問題；UI是指人與界面互動的優化，解決「舒適」的問題；網頁製作著重PC端網頁製作；而Web前端包括PC端和移動端的前端界面製作。
2. Web前端的基礎技能及工作職責是什麼？
愛它就要更深入了解它，學習Web前端就要清楚地知道Web前端工程師需要什麼基礎技能及其工作職責。其實，這「很簡單」，只要你精通HTML+css（包括現在的HTML5+CSS3）、JavaScript、JQuery，了解界面設計，了解後端編程，伺服器知識+後端語言基礎。
3. 怎麼樣才能學好拿高薪，Web前端開發職業的前途怎樣？
個人覺得三百六十行，行行都蘊藏的無限可能，干一行就愛一行，只要腳踏實地，努力學技術，技術硬了，自然會有前途和「錢」途。但是努力學習之前，必須要明確的目標，否則就是「看起來很認真」而已。
4. 如何學？
零基礎學前端的話，這些書籍資料可以參考一下：
1、《JavaScript高級程序設計(第3版) 紅皮書 》，適合有一定編程經驗的Web應用開發人員閱讀，也可作為高校及社會實用技術培訓相關專業課程的教材。
2、《JavaScript權威指南(第6版)》 犀牛書，本書不僅適合初學者系統學習，也適合有經驗的 JavaScript 開發者隨手翻閱。
3、《JavaScript DOM編程藝術 (第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐，並全面探討了HTML5以及jQuery等JavaScript庫。
4、《CSS權威指南(第三版)》，不管你是一個有經驗的Web開發人員還是一個徹底的初學者，《CSS權威指南(第3版)》都是你的CSS學習源泉。
5、《JavaScript設計模式》，適合JavaScript初學者、前端設計者、JavaScript程序員學習，也可以作為大專院校相關專業師生的學慣用書，以及培訓學校的教材。
6、《你不知道的JavaScript(上中下卷) 》，本書既適合JavaScript語言初學者了解其精髓，又適合經驗豐富的JavaScript開發人員深入學習。
7、《Vue.js權威指南》，該書內容全面，講解細致，實例豐富，適用於各層次的開發者。
學習路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：NodeJS全棧開發(1周)
內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、nosql資料庫)
視頻教程：
網頁鏈接
2. web前端開發技術DIV+CSS頁面布局 5行5列怎麼弄
簡單寫了個例子，你看看就明白了，代碼如下：
<html>
<head>
<meta charset="utf-8"/>
<title>用戶指南 - 裝企</title>
</head>
<body>
<div class="row">
<div class="col">1-1</div>
<div class="col">1-2</div>
<div class="col">1-3</div>
<div class="col">1-4</div>
<div class="col">1-5</div>
</div>
<div class="row">
<div class="col">2-1</div>
<div class="col">2-2</div>
<div class="col">2-3</div>
<div class="col">2-4</div>
<div class="col">2-5</div>
</div>
<div class="row">
<div class="col">3-1</div>
<div class="col">3-2</div>
<div class="col">3-3</div>
<div class="col">3-4</div>
<div class="col">3-5</div>
</div>
<div class="row">
<div class="col">4-1</div>
<div class="col">4-2</div>
<div class="col">4-3</div>
<div class="col">4-4</div>
<div class="col">4-5</div>
</div>
<div class="row">
<div class="col">5-1</div>
<div class="col">5-2</div>
<div class="col">5-3</div>
<div class="col">5-4</div>
<div class="col">5-5</div>
</div>
<style type="text/css">
*{padding: 0;margin: 0;}
.row{width: 1000px;display: flex;margin: 0 auto;}
.row:nth-child(1){background: red;}
.row:nth-child(2){background: dodgerblue;}
.row:nth-child(3){background: yellowgreen;}
.row:nth-child(4){background: grey;}
.row:nth-child(5){background: blueviolet;}
.col{width: 200px;height: 50px;line-height: 50px;border: 1px solid #ffffff;text-align: center;}
</style>
</body>
</html>
效果如下：
demo
3. 如何深入學習web前端
web前端學習包括自學和系統學習兩種方式，零基礎是可以學會web前端的。自學吃力的原因，可能在於學習順序不太對，比如先去學習了最難的一部分，所以感覺比較吃力。其實掌握了方法，前端學起來真的不會特別難。
web全棧工程師5.0課程包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
如果你想要快速學習Web前端技術，專業全面的學習方式比較好，一般費用在2W左右。
祝你學有所成！望採納！
4. Web前端主要包括哪些技術小白求解答
Web前端技術主要包括HTML5、CSS3、Less、Sass、響應式布局、移動端開發、以及Ps設計等，更高級的前端開發人員還需要掌握JavaScript 語言、Mysql、Mongodb資料庫開發、vue.js、webpack、elementui等前端框架技術。蝸牛學院這里也給大家整理了一份web前端學習路線，希望對想要學習web前端的小白有所幫助。
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分之結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
5. 本人小白：自學web前端，都要掌握，哪些內容
（1） html + css。
（2）JavaScript。不是所有的網頁都必須有js，但是要想實現一些超酷的功能和界面的時候，就需要涉及到js。如果沒有其他編程語言的基礎的話，學起來可能要費些力。
（3）Photoshop、flash。熟悉會一點兒就行了，沒必要全部都學得精通，當然如果你在學習的過程中，發現你ps或者flash比較感興趣的話，也可以嘗試做美工這一行。
（4）html5和css3。可以先了解一下，然後再入手。畢竟IE的瀏覽器大多還不支持。
（5）瀏覽器兼容。懂web標准，熟練手寫 xhtml css3 並符合 符合w3c標准。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現在還使用的人還是有的。
（6）熟悉一門後台編程語言 asp、php、jsp等
6. web前端如何讓網頁布局穩定性和標准性
為了實現網頁布局的穩定性和標准性，我們可以從下面幾方面努力：
一、 <!DOCTYPE> 標記的重要性。
位 於文檔的最前面，用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標准 規范，我們必需在開頭處使用<!DOCTYPE>標記為 所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網頁作為有 效的XHTML文檔，並按指定的文檔類型進行解析。
<!DOCTYPE> 標記和瀏覽器的兼容性相關，刪除<!DOCTYPE>，就是把如何展示HTML頁面的權利交給瀏覽器， 這 時，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少中顯示效果，這是不被允許的。
二、合適地方用到合適的標簽
物盡其用人盡其才。 再合適的地方用到合理的標簽，對網頁布局和優化都有很多的好處，比如logo ，一般我們都用h1 標簽包括。 還有理解行內元素和塊級元素的區別。
一個頁面不要只用div，太多反而太泛濫了。table雖然用的少，但是，再做一些數據處理的時候，還是比較好用的。
三、站在標准流的角度看padding 和 maring 、width等屬性穩定性
我們知道頁面布局的時候，控制盒子位置距離等，有盒子本身大小，padding和margin來做。
因此，再這里我們會根據穩定性來看這三者的先後順序：
其中穩定性最好的就是盒子本身的高度和寬度了，我們優先考慮這個。 因此，很多情況下，我們會考慮利用高度剩餘法，寬度剩餘法來做，而不是padding和margin。
這個評論和下面的文本域框有個小距離， 此時，我們給這個評論一個h2標簽，高度正好從評論上方，到文本域上的高度就好了。
h2 裡面文字內容默認是靠左上對齊的，高度用不了，就剩下了，這就是高度剩餘法。
其次，我們才考慮padding ，因為padding也可以看做特殊的盒子高度和寬度，最後我們再用margin來做。因為margin會有邊距合並的問題。
四、標准流、浮動流和定位的穩定性
標准流再裡面是最穩定的，就是塊級元素上下顯示，行內一行顯示，都是最穩定的。
浮動和定位都「脫標」了，穩定性沒那麼穩定，所以，我們應該遵循如下原則：
頁面布局，能用標准流去做的不用浮動去做，如果要用浮動做的，就不用定位去做。
五、知己知彼百戰百勝
總會有特殊的瀏覽器，比如ie6 ，這些奇葩瀏覽器總是有自己獨到的地方，那我們怎辦? 兵法雲，知己知彼百戰百勝，因此，需要我們詳細的了解這些瀏覽器自己獨特的特性，或者掌握他們ie6常常出現的bug，以及對於css 的理解，那麼我們根據他們的不同解析，寫出合理的布局。
六、不要讓清除內外邊距帶來麻煩
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
這句話，大家都知道，清除瀏覽器樣式的。但是如果你不加，不同瀏覽器肯定顯示不太一樣。所以，css的第一句話就是它。還有就是要使用大部分瀏覽支持的css屬性不至於引起不必要的麻煩。
7. web前端都學習哪些內容
這里根據行業變化和企業用人需求整理了一份web前端系統全面的學習路線，主要學習以下內容：
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分之結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
8. web前端怎樣入門
先說一下自學前端如何入門吧。
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：Node.js全棧開發(1周)
內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
9. WEB前端是什麼
前端意思就是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶所瀏覽的網頁。用我們的話來說，前端就是網頁給訪問網站的人看的內容和頁面，而前端開發顧名思義就是這些內容的製作，也就是代碼的實現。不過，現在的前端可不僅僅是網頁設計，早年的網頁時設計主要停留在以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。而現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。
前端開發最主要的是掌握三種基本能力，HTML、CSS，JavaScript。前端的開發中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互
除了基本語言，還要掌握各種開發工具的應用。Dreamweaver：，Sublime，HBuilder等都是比較熱門的工具。
前端開發需要掌握的能力很多，知識范圍很廣，要付出的代價很多。不過，前端的前途也是相當光明的，前端現在正在走向工程化發展，無論是大小公司企業，對前端開發的需求都是越來越大了，也越來越專業了。只要學好前端，是一定不愁自己發展的。
10. web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。