这篇文章非常非常接地气（0基础），适合刚刚入门或者准备入门的萌新程序员。

对前端有一定基础的“老鸟玩家”可以期待以后，给大家准备了关于VUE的超实用干货。

给各位粉丝伙伴们鞠躬啦~

同年W3C成立，奠定了web时代的到来

还是这一年，世界上最好的语言PHP诞生了

还是这一年，CSS诞生。

这一段出现了几个名词，第一个是网景公司的Navigator 这是真正意义上的世界第一款web浏览器

第二个是W3C，W3C是万维网联盟的简称，也称为W3C理事会，全称：world wide web consortium , 是一个为网页制定相关标准的一个机构，比如说大家比较熟知的HTMl5标准等等

第三个是PHP，是世界上已知的最好的web后端语言

2006年JQ的问世为前端的大规模出现奠定了基础

2008年谷歌V8引擎的出现让前端能做的事情更多了，这时候开始出现前端的概念，从此以后，前端进入高速发展期

09年angular出现并被谷歌收购，以及node诞生

14年VUE诞生，同年HTML5标准发布，标志着前端大年的到来，从此web前端在国内一片火爆

再回过头来看看前端的三大语言之一 HTML

最开始，万维网是作为学术交流而出现的，是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。

Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面，这样的功能已经完全满足学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。

直到1993年欧洲核子研究组织宣布万维网对任何人免费开放，从此万维网走向世界，网站开始到处涌现。

期刊，大学网站，公司网站… 随着网站数目的增加，大家需要更多的HTML新元素以满足各项功能，也是从这时候开始HTML逐渐不能满足大家的需求了，因为其功能单一，完全静态，不利于维护。

迫于压力，开始出现如<font>,<big>之类的标记元素，突然之间原本只是用于描述结构的语言开始出现一些标签用于描述外在表现了。

但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年诞生的CSS还只是一个最初的建议，1995年W3C正式成立工作小组制定CSS标准，1996年12月，CSS第一份标准成功制定，从此HTML结合CSS成为大家所熟知的WEB开发语言，这一时期的网站，所有页面都是静态的，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）。

1996年微软推出了iframe标签，实现了异步的局部加载。

1999年W3C发布第四代HTML标准，同年微软推出用于异步数据传输的ActiveX，随即各大浏览器厂商模仿实现了XMLHttpRequest。

这标识着Ajax的诞生，但是Ajax这个词是在六年后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。

到这里，前端三大语言逐渐成型

但是早期的网页开发是由后端主导的。

前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery，jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统，更加稳固了jQuery作为JS库一哥的地位。

起初制约Web开发从后到前的因素很简单，就是前端很多事干不了或干不好，当时的浏览器性能弱，标准化程度低。

特别是占据大量市场份额的IE

一直到2008年谷歌V8引擎的出现在结束了这一局面，标准组织也非常配合的在2009年发布了第五代JavaScript，前端的装备得到了整体性的提高，前端界如同改革开放走进了一个令人目不暇接的新时代。

随着前端在国内的火爆，可能很多人都听说了这么一个职位，入门简单，并且工资还不过，于是乎就开始摩拳擦掌，跃跃欲试。

但是大部分人都不知道前端到底是做什么的，只知道和IT有关，和网站有关。

今天要来讨论的这个话题就是前端到底需要做什么，需要什么样的知识储备才能轻松应对这份工作。

说道这个的话就不得不说说网站整体的开发流程以及参与开发的人员了。

这是一个最简单的网站从无到有的流程，当然这里面包含了很多很多的细节，不过这不是我们今天要讨论的范围，我们今天只讨论中间网站建设这个环节。

那么这一个环节里面又细分了很多环节，看下图：

这是一个最简单的网站开发流程图，从这里可以看出来，网站建设流程涉及到的人员，职位都是比较多的，一些大型的项目需要的人员和职位甚至远超于此。那么在这里面，前端开发主要要做的就是：

第二点：把设计做好的页面用代码还原

第三点：和后端配合做页面上的功能

这三点是最基本的前端开发人员的需求了。

首先，第一点，了解开发需求，这个没什么。该开的会开，该看的文档看，该问的点问就可以了。

第二点，把设计做好的页面用代码还原。这个是作为前端最基本的技能，12，13年国内大多数前端做的事情就是这个。

要做这件事情，会的东西有：

软件类：图形处理软件：Photoshop

语言类：HTML（超文本标记语言）

CSS （层叠样式表）

软件，无需多说，打开浏览器搜索，然后下载安装就好了，至于破解什么的，在网上也能找到很多破解的方法。

当然，按照官方的话来说：希望大家支持正版！

软件准备好了之后就是语言了，学习一门计算机语言之前你可能需要这些知识储备：入门级英语，高中数学等等。

再接着，第三点：和后端配合做页面上的功能。

这个范围稍微有点范，而且这也是在第二点没有问题的基础之上的一个需求，这一点，我们往后再慢慢细说。

往后，我们先说说还原设计稿这件事

每个人接触前端的角度可能都不一样；

有些人是以前从事web相关行业的，比如后端，比如设计。

从事这些行业的人因为工作需要，多多少少都会对前端有一定的了解，不一定是这个词，但一定是这个职位。

小白的话，可能更多的听到的是h5，css3之类的名词，其实无论从哪个角度接触到前端，不可避免的要了解前端的三大语言 HTML CSS Javascript

今天咱们要说的就是这三大语言之一的HTML，翻译成中文，叫做超文本标记语言，全称是HyperText Markup Language

这一长串的英文单词我们可能记不住，其实也不需要花过多的精力在这种听起来很高大上的名词上。

第一是小白阶段没必要，第二是到了更高层次，接触的时间长了，自然而然就记住了

直接来看这个中文名，叫超文本标记语言。

把这个名词拆分一下，分别是“超文本”，“标记”，“语言”，那么html是一门语言这个毋庸置疑，也没什么可说的。

再往前看，“标记”，其实这是html语言的一个特点，语言里面所有的东西都叫做标记；

用一个标记来包含一块内容表示其作用，比如用<h1>标签来表示页面上的一个标题，用<p>标签来表示一个文章段落等等。

这里说的标签，就是标记，它的名字有很多，但是表示的都是同一个东西，从html语言角度，它叫做标记，我们平常也会称之为标签；

从盒模型的角度，可以称之为盒子；

从标签与标签之间的关系来看，又可以称之为元素；

从渲染引擎的角度，还可以称之为文档对象模型(Document Object Model —— DOM)等等…所以初学者可能会被各种各样的名词所干扰，但是不用担心，那只是可爱的程序员前辈跟你装装逼而已

“超文本”其实这里从字面上就已经能够理解了，说的是这个语言已经远远超出了文本的范畴，文本，但从字面上来理解，就是文字、符号。

但是如今的网页上，感觉更多的是图片。

那么图片就是一个超文本。

再比如音乐，电影，或者一些其他的媒体。这都远远超出了文本的范畴，所以说是超文本。

HTML建立之初是用来描述文档结构的，这里是一个标题，这里是文章段落，这里需要加粗强调一下，或者用于描述一个表格，再或者用来承载一些功能；

比如说a链接，比如说表单提交数据。到了今天，我们可以把HTML看做是一个房子的骨架，结构。

在1994年万维网联盟（W3C）成立之初，因为没有相关标准，外加上网站的风靡，HTML被迫出现了一下诸如<font>之类的一些用来描述外观的标签，但这并不是HTML的本职工作，以至于今天我们能看到很多很多很多的标签，但是我们并不会经常用到它们，也没有必要全都了解。

也正是因为逐渐增多的网站提出的需求也越来越多，人们开始注重网站的外观，这时候CSS也就应运而生了。

说白了，CSS就是控制为HTML元素添加样式从而使页面更加漂亮的。

层叠样式表。我认为这个中文名翻译得非常贴切，从字面上就能看出来CSS的特点，那就是层叠，或者叫堆叠。

利用CSS的选择器就可以为在元素身上堆叠很多很多的样式，甚至可以重复添加，只不过是后者会覆盖前者罢了。（以后再解释什么是后者什么是前者）

与HTML相比，CSS支持更丰富的文档外观，其表现程度也远非HTML力所能及。

CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围创建边框，同时能增大或减少元素外的空间；允许改变文本的大小写、装饰方式、间隔，甚至可以确定是否显示文本，还允许完成许多其他的效果。

如果说HTML是房子的骨架，那么CSS就是房子的外观——外墙是什么颜色？家里是什么颜色？地板是什么材质的？房子外围有多大的草坪？

这些都由CSS来决定！

那么到此为止我们拥有了房子的骨架，有了房子的外观，那么按理来说一个房子就可以完工了，不需要别的东西了。

但是别忘了，今天我们对房子的需求，如果里面要住人的话，那么空调得有吧，洗衣机要不要？

水电煤少不了吧？那么这些功能性质的工作就得交给Javascript了！

于是乎JS（Javascript）的作用也就呼之欲出了，就是用来做一些功能性的东西的。

在08年以前，前端这个概念还不是特别清楚的时候，JS的作用几乎也就用来写点效果了，图片轮播啦，点击一个按钮，弹出来相应的内容啦之类的一些简单的交互，随着08年V8引擎的出现，以及09年第五版JS的出现，JS的能力得到了一个质的飞跃。

此时JS开始处理页面上的复杂交互了，随之而来的大数据时代也让JS发光发热。

再到现在，写特效写交互反而成了JS的副业，JS做得更多的是处理页面的逻辑，前后端的数据交互，页面性能等以前后端语言都不敢想象的事情。

同时NodeJs的出现让JS走出了浏览器的限制，甚至可以在服务端运行！以后前端会发展成什么样谁都无法预测，而我们能做的，只有加油学习了。