当我们上网的时候，你是否会好奇，我们所看到屏幕上的效果是怎么来的吗？如果小时候你曾经有过这样的经历—看到收音机就想把它拆开，看看里面到底有什么，并且真的给拆开了，然后为了避免挨揍的可能，最后又仓促组装起来，结果还剩了一把螺丝，那么或许你会思考，这个展示效果的背后到底是什么？

其实，我们现在上网，主要接触的效果包括：PC端网站、移动端网站、App、小程序、智能终端屏幕（比如车载系统屏幕等）这些用户交互形式，其中相当一部分的本质其实可以看做是网页。

那么接下来我们来看看网页是如何“炼成”的呢？

网页早期的时候有可能是美工（现在称之为UI）做的，现在大部分是程序员做的（专业由“前端工程师”来做，早些时候“后端工程师”也同时去做）

那么具体是用什么做的呢？其实基础的技术有三种：

  1. HTML 超文本标记语言：主要负责网页基本结构
  2. CSS 层叠样式表：主要负责网页的布局排版和样式美化等效果
  3. javascript 编程语言：主要负责网页的交互动效

早期的网页是比较简单的，仅仅需要HTML就可以做网页了，比如最早的一个网站是这个样子的

可以看到，页面中只有文字，但是和普通文档不同的是，里面有可以点击的“超链接”，点击之后可以跳转到别的页面，别看就这样一个简单的功能，在当时可是一种称得上惊艳的效果（此时，似乎应该有一种表情：哇哦。。。原来还有这种骚气的操作！！！），可以看到此时的网页中别说样式效果，就连一张图片也没有，其实也可以理解，因为受限于当时的网络环境，打开一张图片甚至需要2个小时，谁能受得了。

随着技术的发展以及人们对交互体验更高的追求，后来逐渐诞生了CSS（可以把页面做得更美观，甚至做成色彩斑斓的效果）以及javascript（可以做更多的交互效果）。

早期的网站主要以展示内容为主，上网者也仅仅局限于浏览网页，这个时代有一个说法称之为Web1.0。

此时的网站，很明显要美观一些了，添加了很多图片，并且也支持一些基本的交互功能，比如登录，搜索等操作，但主要还是以展示为主，上网者交互能力还是很有限。

随着技术的进一步发展，进入了Web2.0时代，此时，典型的应用或者功能包括：博客、微博、自媒体、短视频、电商、支付、网游......以及评论、点赞、弹幕等交互功能。此时的典型特点就是网上的相当一部分内容是由上网者产生的，并且网站提供了丰富的交互效果，同时催生出一批大的网站平台，从而对用户有了更多的粘性，由此带来了很好的盈利模式，也引入了更多资本的进入，所以，程序员有了一个更广阔的放飞自我的舞台。

我们先来聊一下程序员中的一个特殊岗位“前端工程师”，其实这个岗位真正意义上开始有大量需求，大概是在2015年前后，在此之前，网页端的效果是由“后端工程师”兼做的。那么前端工程师主要的职责从早期的切图，到现在做复杂业务和交互的应用、再到做App、桌面端、多端适配、小程序、甚至做一部分后端的工作，业务场景越来越丰富，当然价值也越来越高，关键岗位基本与后端分庭抗礼。

其实无论前端做到多么复杂，其实本质上主要还是HTML、CSS、javascript这三种技术，我们今天主要来看一下网页背后的这三种技术代码长什么样子，如图所示：

然后可以看到如下内容：

可以看到，一个网页的效果，靠这三种技术来支持，其中HTML实现页面的基本结构，CSS控制布局排版和样式美化，javascript负责实现页面的交互效果，比如百度搜索时，下拉关键字提示列表就是用javascript实现的。

如果你希望成为一个前端程序员，那么最基础的要学习这三种技术，当然，现在的前端光靠这个是不够的，还需要学习的有很多技术点：Ajax、Node.js、Vue、React、小程序等等，这些技术我们可以在后续的文章中再详细展开。