如何零基础web（网页）前端学习路线？

如何学习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