1. web前端学习分哪些阶段
您好，web前端学习分为8个阶段：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
web前端学习有哪些阶段
这个学习路线图不管是自学还是参加培训班都是可以的，希望可以帮助到你。
2. 初学者如何迅速学习web前端开发
学习web前端不怕没哟基础，就怕没有方向，推荐给你web前端学习的路线图：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
web前端学习方向
这个学习的路线路你按照从上到下这个顺序学习就可以的，不管是报培训班还是自学，都是可以的，现在web前端还是有不错的视频，你可以根据自己的实际情况看看这些视频，希望对你有所帮助。3. 如何系统地学习前端
目前入门前端的人群分类
1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。
优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。
缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。
2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。
优点：自学能力比较强，能够根据自己的兴趣规划学习内容。
缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。
门前端时的一些困境
1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。
2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习node开发 ，在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用node 的api 。
3、前端整体体系架构没有做过深入思考。
导致用会用，但不知道为什么用，用另外一个有什么区别。
4、学习环境中无高手。
没有高手能够指导自己进入下一个层次。
5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了 。
如何系统学习前端
网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。如果你现在是零基础学员，大致可以按如下思路学习系统学习：
基础部分
1、HTML + CSS 这部分学习，可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Java 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议马上看《Java语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
进阶部分
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Java。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用 Codecademy 学习 Java，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Java 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Java不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Java的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented Java》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。
c） Java 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Java语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Java》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
升级部分
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
可测性。
高性能。必读《高性能Java》
低流量。移动端关注比较多。
额外补充部分
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
2、后端。
应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。
如何才能快速入门前端
1、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。
2、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。
4. 前端必学-函数式编程（六）
我们前篇谈了很多关于【闭包】的理解了，所以你应该会知道，我们现在将要谈的就是 ——【异步】。
我们为什么觉得“异步问题”复杂呢？
其中很重要的一个原因是 —— 时间！时间将我们对数据的操作、管理，变复杂了好几个量级！
（需要特别提出并明确的是： 异步和同步之间是可以相互转化的！ 我们使用异步或者同步取决于 —— 如何使代码更加可读！）
函数式编程给出了实现“代码更可读”的落地原则（已多次回顾）：
所以我们可以期待，异步在函数式编程中的表现！
上代码：
onCustomer(..) 和 onOrders(..) 是两个【回调函数】释义，两者执行的先后顺序并不能确定，所以它是一个基于时间的复杂状态。
释义：回调函数其实就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。
通常来说，我们最先想到的是：把 lookupOrders(..) 写到 onCustomer(..) 里面，那我们就可以确认 onOrders(..) 会在 onCustomer(..) 之后运行。
这样写，对吗？
不对！因为 onCustomer(..) 、 onOrders(..) 这两个回调函数的关系更像是一种竞争关系（都是赋值 customer.orders ）， 它们应该并行执行 ， 而不是串行执行 。
即：我不管你们谁先执行，谁先执行完，谁就赋值给 customer.orders ！
那我们的思路应该是：
不过，这样让代码又变得更加难阅读！！函数内部赋值依赖于外部变量、甚至受外部回调函数的影响。
那究竟怎么办呢？
最终，我们借用 JS promise 减少这个时间状态，将异步转成同步：
两个 .then(..) 运行之前， lookupCustomer(..) 和 lookupOrders(..) 已被同步调用，满足并行执行，谁先结束，谁赋值给 customer.orders ，所以我们不需要知道谁先谁后！
在这样的实现下，不再需要时间先后的概念！减少了时间状态！！代码的可读性更高了！！
这是一个 积极的数组 ，因为它们同步（即时）地操作着离散的即时值或值的列表/结构上的值。
什么意思？
a 映射到 b，再去修改 a ，b 不会收到影响。
而这，是一个 惰性的数组 ， mapLazy(..) 本质上 “监听” 了数组 a，只要一个新的值添加到数组的末端（push(..)），它都会运行映射函数 v => v * 2 并把改变后的值添加到数组 b 里。
什么意思？
a 映射到 b，再去修改 a ，b 也会修改。
原来，后者存在 异步 的概念。
让我们来想象这样一个数组，它不只是简单地获得值，它还是一个懒惰地接受和响应（也就是“反应”）值的数组，比如：
设置“懒惰的数组” a 的过程是异步的！
b ，是 map 映射后的数组，但更重要的是，b 是 反应性 的，我们对 b 加了一个类似监听器的东西。
这里直接给出解答：
这里再多小结一句：时间让异步更加复杂，函数式编程在异步下的运用就是减少或直接干掉时间状态。
想象下 a 还可以被绑定上一些其他的事件上，比如说用户的鼠标点击事件和键盘按键事件，服务端来的 websocket 消息等。
上述的 LazyArray 又可叫做 observable ！（当然，它不止用在 map 方法中）
现在已经有各种各样的 Observables 的库类，最出名的是 RxJS 和 Most 。
以 RxJS 为例：
不仅如此，RxJS 还定义了超过 100 个可以在有新值添加时才触发的方法。就像数组一样。每个 Observable 的方法都会返回一个新的 Observable，意味着他们是链式的。如果一个方法被调用，则它的返回值应该由输入的 Observable 去返回，然后触发到输出的 Observable里，否则抛弃。
比如：
本篇介绍了【异步】在函数式编程中的表现。
原则是：对于那些异步中有时态的操作，基础的函数式编程原理就是将它们变为无时态的应用。即 减少时间状态 ！
就像 promise 创建了一个单一的未来值，我们可以创建一个积极的列表的值来代替像惰性的observable（事件）流的值。
我们介绍了 RxJS 库，后续我们还会介绍更多优美的 JS 函数式编程库！
（俗话说的好，三方库选的好，下班都很早！！）
现在本瓜有点明白那句话了：看一门语言是不是函数式编程，取决于它的核心库是不是函数式编程。
也许我们还不熟悉像 RxJS 这类库，但我们慢慢就会越来越重视它们，越来越使用它们，越来越领会到它们！！
异步，以上。
5. web前端开发需要掌握的几个必备技术
Web前端开发需要掌握的几个必备技术是：
HTML +_CSS核心、JavaScript、VUE框架
前端的应用非常广泛，基本网站、APP、HTML5小程序等都需要前端开发，所以只要是互联网产品基本都需要前端。
前端程序猿切页面写页面，Web上、H5上的炫酷效果，是前端开发大展身手的地方。最常见的用于前端开发的技术组合是：
HTML+CSS+JavaScript。
web前端是在开发人员中最直接面向产品、面向用户的设计人员，一个开发团队的成果是要靠web前端去展现，因为用户不会去关心后台的处理有多么强大。
后端开发是写后台，各种业务逻辑、数据处理、模块接口、客户端接口等等。后端开发者通常精通于一种Web编程语言和一个数据库管理系统。电商平台点击筛选条件下面为你筛选出来的宝贝的功能以及付款人数数据的变化等都是由后台来实现提供的。
目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端去做。
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
前端开发需要学习的技术
1 掌握基本web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3 必须学会运用各种web前端开发与测试工具进行辅助开发
4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
web前端有广阔的发展空间，app、小程序、移动端、pc端等都网站是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。
Web前端招聘岗位
• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师...
6. 2019Web前端编写JavaScript代码的小技巧
今天小编要跟大家分享的文章是关于2019Web前端编写JavaScript
代码的小技巧。2019已经到了，正在从事Web前端工作的小伙伴们是不是想要学习一些新的技巧呢?下面就来看一看本篇文章，让我们一起学习一下编写JavaScript代码的小技巧。
1、Array.includes与条件判断一般我们判断或用||
//condition
functiontest(fruit){
if(fruit=="apple"||fruit=="strawberry"){
console.log("red");
}
}
如果我们有更多水果
functiontest(fruit){
constredFruits=["apple","strawberry","cherry","cranberries"];
if(redFruits.includes(fruit)){
console.log("red");
}
}
2、Set与去重
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set
数据结构。
数组去重
constarr=[3,5,2,2,5,5];
constunique=[...newSet(arr)];
//[3,5,2]
Array.from方法可以将Set结构转为数组。我们可以专门编写使用一个去重的函数
functionunique(array){
returnArray.from(newSet(array));
}
unique([1,1,2,3]);//[1,2,3]
字符去重
letstr=[...newSet("ababbc")].join("");
console.log(str);
//'abc'
另外Set是如此强大，因此使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
leta=newSet([1,2,3]);
letb=newSet([4,3,2]);
//并集
letunion=newSet([...a,...b]);
//Set{1,2,3,4}
//交集
letintersect=newSet([...a].filter(x=>b.has(x)));
//set{2,3}
//差集
letdifference=newSet([...a].filter(x=>!b.has(x)));
//Set{1}
3、Map与字典类型数据
一般而已，JavaScript实现字典数据是基于Object对象。但是JavaScript的对象的键只能是字符串。对于编程来说有很多不便。
ES6提供了Map数据结构。它类似于Object
对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值，字符串、数值、布尔值、数组、对象等等都可以当作键。
constresultMap=newMap()
.set(-1,{text:'小于',color:'yellow')
.set(0,{text:'等于',color:'black')
.set(1,{text:'大于',color:'green')
.set(null,{text:'没有物品',color:'red'})
letstate=resultMap.get(null)
//{text:'没有物品',color:'red'}
Map的遍历顺序就是插入顺序
constmap=newMap([["F","no"],["T","yes"]]);
for(letkeyofmap.keys){
console.log(key);
}
//"F"
//"T"
for(letvalueofmap.value()){
console.log(value);
}
//"no"
//"yes"
4、函数式的方式处理数据
按照我的理解，函数式编程主张函数必须接受至少一个参数并返回一个值。所以所有的关于数据的操作，都可以用函数式的方式处理。
假设我们有这样的需求，需要先把数组foo中的对象结构更改，然后从中挑选出一些符合条件的对象，并且把这些对象放进新数组result里。letfoo=[
{
ame:"Stark",
age:21
},
{
ame:"Jarvis",
age:20
},
{
ame:"Pepper",
age:16
}
];
//我们希望得到结构稍微不同，age大于16的对象：
letresult=[
{
person:{
ame:"Stark",
age:21
},
friends:[]
},
{
person:{
ame:"Jarvis",
age:20
},
friends:[]
}
];
从直觉上我们很容易写出这样的代码：
letresult=[];
//有时甚至是普通的for循环
foo.forEach(function(person){
if(person.age>16){
letnewItem={
person:person,
friends:[];
};
result.push(newItem);
}
})
使用函数式的写法，可以优雅得多
letresult=foo
.filter(person=>person.age>16)
.map(person=>({
person:person,
friends:[]
}));
数组求和
letfoo=[1,2,3,4,5];
//不优雅
functionsum(arr){
letx=0;
for(leti=0;i
x+=arr[i];
}
returnx;
}
sum(foo);//=>15
//优雅
foo.rece((a,b)=>a+b);//=>15
5、compose与函数组合
以下代码称为组合compose
constcompose=function(f,g){
returnfunction(x){
returnf(g(x));
};
};
由于函数式编程大行其道，所以现在将会在JavaScript代码看到大量的箭头()=>()=>()=>的代码。
ES6版本compose
constcompose=(f,g)=>x=>f(g(x));
在compose的定义中，g将先于f执行，因此就创建了一个从右到左的数据流。这样做的可读性远远高于嵌套一大堆的函数调用.
我们选择一些函数，让它们结合，生成一个崭新的函数。
reverse反转列表，head取列表中的第一个元素;
consthead=arr=>arr[0];
constreverse=arr=>[].concat(arr).reverse();
constlast=compose(head,reverse);
last(["jumpkick","roundhouse","uppercut"]);
//"uppercut"
但是我们这个这个compose不够完善，只能处理两个函数参数。rex源码有个很完备的compose函数，我们借鉴一下。
functioncompose(...funcs){
if(funcs.length===0){
returnarg=>arg
}
if(funcs.length===1){
returnfuncs[0]
}
returnfuncs.rece((a,b)=>(...args)=>a(b(...args)))
}
有了这个函数，我们可以随意组合无数个函数。现在我们增加需求，组合出一个lastAndUpper函数，内容是先reverse反转列表，head
取列表中的第一个元素,最后toUpperCase大写。consthead=arr=>arr[0];
constreverse=arr=>[].concat(arr).reverse();
consttoUpperCase=str=>str.toUpperCase();
constlast=compose(head,reverse);
constlastAndUpper=compose(toUpperCase,head,reverse,);
console.log(last(["jumpkick","roundhouse","uppercut"]));
//"uppercut"
console.log(lastAndUpper(["jumpkick","roundhouse","uppercut"]))
//"UPPERCUT"
以上就是小编今天为大家分享的关于2019Web前端编写JavaScript
代码的小技巧的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web相关知识记得关注北大青鸟Web前端培训官网哦。
作者：廖振廷
作者：#/p/54758068
*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。
7. 前端使用面向对象式编程 还是 函数式编程 针对什么问题用什么方式...
前端建议使用函数式编程，搭配react框架 。可以上githup搜索 ‘函数式编程’start最高的呢个进行学习 。 真的是干货满满的。 如果你是前端新手，还是先积累代码量再说，这东西并不是你看懂就会用的！
8. 零基础如何学前端
您好，零基础学习前端是可以的，完全没有问题：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
web前端学习路线
上面是web前端的学习路线，你可以自己在网上看web前端相关的视频，有些培训机构的前端视频还是不错的，你也可以报个培训班跟着老师学习web前端，如果说想走捷径，少走弯路，还是建议你找个靠谱的培训班，站在巨人的肩膀上你肯定比别人看的更远，看到的东西更多，希望可以帮到你。
9. 零基础怎么系统学Web前端
网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：
基础知识：
1.html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。
2. javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
对于习惯看视频学习的同学，以上内容也可以在优就业网站上学习。
进阶：
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1.css。截至今日（2015.12.08），天猫、淘宝、支付宝都已停止对ie6,7的支持，未来相信大多数网站都会停止对ie6，7的支持，ie8的市场份额也不像两年前那么高了（天猫即将停止对IE8的支持，2016.12.13），webkit内核已成为市场主流。对于css的学习，我推荐分三块：“基础概念”，“css2.1规范”，“css3规范”。必看 精通CSS（第2版） (豆瓣)，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。这本确实有些年头了，但基础概念部分讲述非常清晰，可以称之为经典。ie6，7相关的内容可以不看。css3的部分可以参考：CSS3实用指南 (豆瓣)。这本书同样有些老，只是最新出版的书中没发现有特别好的。
2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：
a) 框架。推荐 zepto，简单易用，在w3school简单学习js后，直接上手 zepto 即可完成一些简单的项目。zepto 源码简单清晰，也适合新手阅读。补充： 可以使用 codecademy 学习 javascript，zepto，用户体验真的很好（感谢 TonyOuyang ）。最近比较热门的框架是React, VUE, Angular这些, 根据需要稍作了解即可。随着ie浏览器市场份额的下降，以及移动端的发展，标准原生js已经可以在实际项目中使用（目前还需要借助es5shim、babel等），重点还是ES5, ES6, ES7。
b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程可以参考这篇文章：JavaScript 中的函数式编程实践
c) javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。
d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。
e) ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。另外，ajax未来几年会被 Fetch Standard 取代，也需要了解。另外关于xhr2，cors（跨站资源共享），formData文件上传，也需要了解。
f) es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -> es5 -> es6，越靠前的越重要。一些参考链接：ECMAScript 5 compatibility tableECMAScript 6入门ES5 « 张鑫旭
3. html5。需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题，以及不支持html5的浏览器的降级方案。这部分体现了前端的一个思想：面向未来编程，尽早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。
再进一阶 · 代码层面：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1易维护，2可测试，3高性能，4低流量（移动端）。
1.易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2. 可测性。就是保证你的代码能沟通单元测试100%覆盖到所有分支
3. 高性能。必读《高性能javascript》
4. 低流量。移动端关注比较多，PC端现在可以不用太关注了
再进一阶 · 工程层面：
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用svn和git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，必须要学会使用grunt、gulp、webpack、rollup等前端构建工具，以及前端模块管理的方式，amd，cmd，es6 mole 等等。
然后呢？以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：JacksonTian/fks · GitHub
补充：
对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1. 交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
2. 后端。应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是php了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如php的ci, yii, yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Koa框架做一些后端服务的开发。
3. Android和ios开发。时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。
4. 如果你能够认真看到这里，说明你对前端有真爱，最后说一个编程习惯的问题，绝对是保你工作平安，少出故障。代码提交前必须做的三个事情：A. git diff（svn diff）,检查所有变更；B. 跑一边单元测试；C. 手动运行一遍所有demo.
10. 前端要学哪些内容
您好web前端学习的内容有8个阶段：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
前端学什么
这个就是学习前端的学习内容图，你可以按照顺序从上到下依次学习，现在学习的方法有很多，不管是你自学还是去参加培训班这个学习的顺序都是可以的，在学习方法上就是3多，“多思考、多问、多敲”，学习的本质就是不断的重复，熟能生巧，你可以去网上看看视频，现在有些机构的视频还是不错的，希望可以帮到你！