如果你想從事前端開發方面的工作。嗯，我認為要學的東西主要包括htmlCss樣式，JavaScript 還有學一些前端框架，比如vue ElementUI H5頁面開發 嗯還有node.js嗯，另外在學一些電腦方面的知識，比如服務器知識，網絡知識，這些也是有必要的，還有開發工具也要學一學怎么用。

以找到一個工作為標準的話 學習周期大概兩個月，有天賦的可以更短。需要學習的知識其他回答已經說了，HTML，css，JS是肯定要熟悉的，我說一些深入一點的吧:首先，前端的特點是新語法，新框架，新插件等層出不窮，那么應該全部學習還是只學一部分呢？我認為應該精通vue，了解angular與react，熟悉常用組件庫如ant，layerUI等，領悟設計模式，比如為什么有時候單頁面模式更好。關心當前流行的網站或者小程序類型，哦對了，小程序必須會！hbuilderx封裝h5類型的app必須會，也就是uni-app必須會，國外的前端技術要了解。最關鍵的是，數據庫必須會，這個其實花不了多久時間就能學會，但是在面試的時候議價能力就大大提升了，會數據庫是指能用node.js或者PHP寫一點增刪改查，這樣一個人就能做小型項目！總之，前端設計到的知識點實在太多，千萬不要盲目去學習，要有目的有想法，圍繞身價去學習，畢竟開發語言是工具，程序員是執行者，提高身價就是為行業做貢獻的前提。

技術一直在更新迭代，所以學習是沒有終點的。作為一名合格的開發者，在掌握基礎技能的同時，需要一直保持對前沿技術的關注、學習并實踐。

從當下看前端，前端也是一個大的領域，有多種細分，比如：PC端、移動端、小程序、游戲開發等。不同領域對應的技術棧也有所不同，但所需的基礎知識是相同的（HTML、CSS、JS）。

【學習步驟】

第一階段：入門

先掌握HTML、CSS、JS。學習的順序最好也是，先HTML，后CSS，最后JS（重點，而且非常重要）。

第二階段：企業實戰

開發框架：國內現在最流行的主開發框架是Vue和React；Vue上手相對比較容易，可以先上手試試。

第三階段：性能調優

掌握Performance性能調優工具、理解JS垃圾回收機制。

第四階段：編程思想、設計模式

企業中一般只要做到第一、二階段即可勝任初級前端工程師，認真學習兩個月的時間足以。

【細分領域】

移動端：flex布局、一套Vue/React的移動端UI框架。

小程序：小程序原生開發（必須要會，即使用跨平臺框架開發，原生開發也一定要會）、uni-app。

游戲開發：Egret游戲引擎、數學幾何。

圖像處理：PIXIJs、FabricJs、ThreeJs等圖形渲染框架。

當然前端開發不能僅著眼于前端，還需要對后端知識有一定的了解，對后端開發語言至少要熟悉一個（NodeJS、PHP、Java、Golang、Python）。不僅讓面試中多了加分項，更能讓我們在更高的角度理解開發這件事。當然也會讓我們在團隊協作中更加得心應手。

【學習方法】

1、入門學習推薦視頻為先，一般視頻教程都能通俗易懂，講得都很透徹，會越學越有信心。有官方技術文檔的，可在視頻后過一遍；

2、進一步提升，可以多看看優質作品。github上多找一些優質的項目，學學人家的代碼是怎么寫的，多看會受益頗多。

3、對于想急于找工作的同學，可以先到各大招聘平臺上，了解下目前大廠（或意向企業）對于前端的技能要求，然后針對性的學習。如果時間充足，還是建議系統性的學習一下。

4、視頻教學資源推薦B站，有很多優質的教學資源和講師。我也一直在B站上學習，發現了B站是我人生中的重大事件，讓我以更好的方式接觸到了更多的事物！想當年我們在學習前端的那會兒，只能天天泡在圖書館。

注意：JS原生開發能力很重要！??！

開發框架可以提升效率，但萬不可認為只要有框架就足以。扎實的基礎很重要，它可以讓我們做得更多，走得更遠。

【最后說點啥】

做自己想做的事，希望所有人都能一直堅持下去，早日實現自己的小目標！

第一，必須掌握基本的Web前端開發技術，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。

第二，在一名合格的前端工程師的知識結構中，網站性能優化、SEO和服務器端的基礎知識也是必須掌握的。

第三，必須學會運用各種工具進行輔助開發。

第四，除了要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持，等等。

可見，看似簡單的網頁制作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對于老手來說，也時常不知道下一步該學什么。

代碼質量是前端開發中應該重點考慮的問題之一。例如，實現一個網站界面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案則更易于維護，而且性能也比較好。這里的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的，對代碼質量的要求也不同，但它們之間又有著千絲萬縷的聯系。

我作為一個十幾年的前段架構師來說，前端最近幾年屬于蓬勃發展期，很多小伙伴都跑來學前端，但問題是，學蓬勃發展越表示，這是一個短期內根本不可能停止學習的職業。在我看來，前端行業短期內，每年都需要不間斷進行自己的技術更新和迭代。雖然我們一般公司不會更新那么快，但，作為一個程序員，應該一直將自己擺在最前沿的位置。這樣，當企業，公司需要做架構更新或者框架更新，自己才能在其中脫穎而出。

所以，前端，終生學習。不要停

前端最近幾年屬于蓬勃發展期，很多小伙伴都跑來學前端

前端都需要學什么（可以分為八個階段）？
<1>第一階段：

? HTML+CSS:
HTML進階、 CSS進階、DIV+CSS布局、HTML+CSS整站開發、
? JavaScript基礎：
Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。
? JS基本特效：
常見特效、例如：tab、導航、整頁滾動、輪播圖、JS制作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。
? JS高級特征：
正則表達式、排序算法、遞歸算法、閉包、函數節流、作用域鏈、基于距離運動框架、面向對象基礎、
? JQuery：基礎使用
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

<2>第二階段：HTML5和移動Web開發

? HTML5：
HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas.
? CSS3:
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、flex布局、background系列屬性改變、Transition、動畫、景深和深透、3D效果制作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁制作。
? Bootstrap:
響應式概念、媒體查詢、響應式網站制作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。
? 移動Web開發：
跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果制作、手機聚劃算頁面、手機滾屏。

<3>第三階段：HTTP服務和AJAX編程

? WEB服務器基礎：
服務器基礎知識、Apache服務器和其他WEB服務器介紹、Apache服務器搭建、HTTP介紹。
? AJAX上篇：
Ajax簡介和異步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用、會處理簡單的GET或者POST請求、
? AJAX下篇：
JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

<4>第四階段：面向對象進階

? 面向對象終極篇：
從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、ES6中變量的作用域（let ，const(聲明變量只讀)，塊級作用域），ES6中函數新特性。
? 面向對象三大特征：
繼承性、多態性、封裝性。
? 面向對象中創建對象的五種方法：
自定義對象 、工廠模式創建對象、構造函數、 混合模式創造對象、JSO格式創建對象。

<5>第五階段：封裝一個屬于自己的框架

? 框架封裝基礎：
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
? 框架封裝中級：
運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
? 框架封裝高級和補充：
JQuery框架雛形、可擴展性、模塊化、封裝屬于傳智自己的框架。

<6>第六階段：模塊化組件開發

? 面向組件編程：
面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基于組件化思想開發網站應用程序。
? 面向模塊編程：
AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

<7>第七階段：主流的流行框架

? Web開發工作流：
GIT/SVN、Vue-cli腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
? 前端主流框架：
Vue.js、Angular.js、React.JS、Bootstrap。
? 常用庫：
React.js、Vue.js、JQuery.js。

<8>第八階段:Node.js全棧開發：

? 快速入門：Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制臺程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。? 核心模塊和對象：全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端、http://Socket.IO。? Web開發基礎：HTTP協議，請求響應處理過程、關系型數據庫操作和數據訪問、非關系型數據庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。? 快速開發框架：Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。? Node.js開發電子商務實戰：需求與設計、賬戶模塊注冊登錄、會員中心模塊、前臺展示模塊、購物車，訂單結算、在線客服即時通訊模塊。

第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度并不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。

第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全?；?。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與后端的溝通主要通過資源接口的方式來進行。前端開發全?；彩且粋€比較明顯的趨勢，比如Nodejs的應用。

第三：注重動手實踐能力的培養。學習前端開發一定要注重動手實踐能力的培養，因為前端開發的細節比較多，所以只有多操作才能逐漸熟悉。前端開發目前被稱為“大前端”，整個前端開發也被賦予了更多的含義，包括Web前端開發、移動端開發、大數據呈現端開發以及部分后端開發任務等等。所以，想要在前端行業中走的更遠，一定要注重知識結構的豐富性。

1、html + css

理解css每個元素的屬性，樣式的實現不一定只有一種寫法，多想一想還有沒有什么需要改進的地方。

2、JavaScript

不是所有的網頁都必須有js，但是要想實現一些超酷的功能和界面的時候，就需要涉及到js。如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議在網上找一些資源自學一下。Web前端需要學習那些知識?

3、Photoshop、flash

熟悉會一點兒就行了，沒必要全部都學得精通，當然如果你在學習的過程中，發現你ps或者flash比較感興趣的話，也可以嘗試做美工這一行。 　　4、html5和css3

可以先了解一下，然后再入手。畢竟IE的瀏覽器大多還不支持。

5、瀏覽器兼容

Web前端需要學習那些知識?懂web標準，熟練手寫 xhtml css3 并符合。

符合w3c標準。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現在還使用的人還是有的。

6、熟悉一門后臺編程語言 asp、php、jsp等

PS：有條件的話還是建議系統學習下，可以了解下U就業。

【此回答轉自樂字節】

首先，計算機IT是一個非常大的概念，其中包含了很多不同的方向和專業，因此需要花費的時間和學費都是有所區別的。

就像我們去商場買衣服，問買衣服需要多少錢這樣的問題很傻，只有在我們選擇好款式之后，特定的問某一件衣服的價格，才能得到滿意的答案。IT行業也是如此，IT是一個類，其中包括各式各樣的專業，如果想要了解學費我們則需要特定的指出具體的專業，才能了解到確切的學費。

同理，學習時長則也是不能一概而論的，學員的年齡、學歷不同因此學習時長也不同

學多久，這個沒辦法說，畢竟每個人接受知識的速度是不一樣的，最基本的有HTML+CSS+javaScript這是最基本的基礎知識，然后就可以學一下主流框架了比如 JQuery VUE