开篇先让我们搞懂两个概念：前端与后端。

前端，又称 Web 前端，是指计算机 Web 应用程序（网站）的前台页面。当我们打开一个网站所看到的网页界面的内容以及交互体验都是由前端工程师进行开发设计的。

后端，又称服务器端开发，更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

站在用户的角度来看前端和后端又是如何一番景象呢？

图片来源：comic.browserling.com

以淘宝网为例，可以简单的理解为前端是看得见，而后端就真的摸不着了。

淘宝前端部分页面与 API 截图

感受前端编程之美

如果你对于前端印象还停留在只是写页面的，那快来体验感受下前端编程之美吧~

感官体验

zdog 简单便捷好玩的的3D设计和动画制作库

Echarts

除了上面的网站之后，还有许多丰富的网站，大家可以点进去进行体验一下。

动手体验

创建一个 index.html 文件，将下面代码拷贝进去，完成你的第一个 Hello World 吧 ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    Hello World
</body>
</html>

前端发展的那些年

那些年，菊花还只是一种花，老王还是一个亲昵的称呼，Web 前端开发还叫网页制作，而网页上的内容还主要是以文字、图片为主，朴实的显示在浏览器中。

浏览器江湖

历史上第一个浏览器

这就牵扯到了万维网的起源，要追溯到 1989 年 3 月 Tim Berners-Lee （英国科学家，万维网之父）向他的老板 Mike Sendall 提交了一份 “Information Management: A Proposal” 建议书开始了，他的老板接受了它，称他的提议 “Vague, but exciting” （模糊，但令人兴奋）。1990 年 Berners-Lee 在一台 NeXT 电脑上开始开发 WorldWideWeb （第一个 Web 浏览器），并于 1990 年 12 月 20 日发布了第一个描述项目本身的网站（info.cern.ch）；它可以从 CERN 网络访问 Internet。该网站解释了万维网是什么，人们如何使用浏览器和设置网络服务器，以及如何开始使用您自己的网站。

2019 年 2 月，为庆祝 WorldWideWeb 发展三十周年，CERN 重新发布了 Web 版 WorldWideWeb。因此我们现在可以在一个现代的浏览器里运行历史上第一个浏览器 WorldWideWeb 来浏览网页，点击体验一下来自 1989 年跨越时空的对话。

图片来源：https://worldwideweb.cern.ch/browser

浏览器大战

网页浏览器之争（英语：Browser wars）是指不同的网络浏览器之间为争取使用者优先采用，造成彼此使用率的竞争。通常可分为两段时期的竞争过程：

第一时期为 1998 年微软公司的 Internet Explorer 取代网景公司的 Netscape Navigator 成为主要浏览器。

第二时期为 2003 年后 Internet Explorer 份额逐渐受到其他浏览器蚕食，包括 Mozilla Firefox，Google Chrome，Safari 和 Opera。

想要更多浏览器大战历史，可以点击这里进行访问。

不过在当今，曾几何时的浏览器霸主 IE ，也在 2022 年 6 月正式终止支援 IE，Internet Explorer 11 应用程序将停止服务，为这个服务用户超过 25 年的浏览器划下句点，并由 Microsoft Edge 接下它的重责大任。尽管对许多一般用户来说，IE 只是用来下载 Chrome 或其余浏览器的浏览器，但即使 Chrome 问世这么多年，仍有不少较为老旧的网页、服务必须依靠 IE 来启动。

网页三剑客

网页设计三剑客

早期的网页设计三剑客软件包括 Dreamweaver，Fireworks，Flash。

其中，Dreamweaver 是一个所见即所得的可视化网站开发工具，主要用于动态网页和静态网页的开发。Fireworks 主要是用于对网页上的图片进行制作和处理，也可用于制作网页布局。Flash 主要用来制作动画。

不过现在已经 2022 了，网页三剑客现状如何呢？

Dreamweaver 虽然为了提升用户体验做了很多版本的更新，可以说目前的 Dreamweaver 较早期已有了很大的提升，不过，VSCode 的出现早已包揽一众青睐者。下面是来自 stackshare.io 的数据，从数字上有着非常大的差距。如果你感兴趣，也可以参与关于两款软件的讨论。

图片来源：stackshare.io

网页开发三剑客

网页开发三剑客包括 HTML 、CSS 、JavaScript 。简单来说，HTML 就是网页的骨架，CSS 是我们对页面的美化装饰，而 JavaScript 则是与用户与页面进行的交互。

图片来源：https://github.com/girliemac/a-picture-is-worth-a-1000-words

如果有一天一个网站没有 HTML ，那注定我们无缘在浏览器中看到它，而如果没有了 CSS 和 JavaScript 又会是怎样一番光景呢？仍然以淘宝网为例，在人为删除页面的样式与脚本引用后，效果如下：

图片来源：www.taobao.com

现如今，社区中有时还会听到新网页三剑客，这里则指的是 HTML5、CSS3、JavaScript（ES6），只是选取了三者的最新版本。可见作为前端从业者，这三项已经是必备技能了。

开发历程

如果说条条大路通罗马，那前端的路子可就太野了。最早期的前端开发（也被叫做写页面的），这是因为早期的网站还停留在静态页面阶段，开发者只需要掌握 HTML、CSS、JavaScript 就可以胜任。

但是随着技术的发展，大家很快发现了静态页面的弊端，如重复的工作量，无法动态的更新等等，后期有很长一段时间，我们采用的开发模式即在后端语言中嵌入 HTML 进行数据动态化，如 PHP、ASP.NET、JSP 等。前端在其中依然处于混沌的状态。

在 2005 年，AJAX 技术的到来使得前端又掀起了新一轮的技术风潮，在此前前后端分离的概念也被提了好几年，而通过 AJAX 异步请求数据，再通过 DOM 进行渲染，虽然解决了前后端分离，但是也带来了新的问题，如大量的异步请求，DOM 操作使代码变得更加复杂且不易维护。于是涊现了一批 MVC、MVP、MVVM 的前端分层框架，其中最为典型的三大框架：Vue.js、React、Angularjs，在这样的开发模式下，前后端职责划分更加清楚，二者唯一的衔接点就是 API。

在互联网大的浪潮中，移动 APP 兴起、前后端分离，到现在的全栈开发，前端屹立其中，定位也更加清晰，现在各行各业对于前端的需求都是不可或缺的，前端的应用场景也涉及更加广泛，如网站、移动 APP、大数据可视化、小程序等等。

了解更多前端历史：

前端人聚集地

社区&问答

摸鱼

写在最后

在面对行业内卷严重的今天，技术栈不断变化，甚至有些框架早早退役，但究其本质，前端作为用户交互的第一参与者，像早期 PC 端通过鼠标、键盘完成交互，到现在通过手指在手机上进行互动，在人工智能到来的今天，我们仅挥一挥手就完成一次交互。可能未来我们交互的媒介会有更巨大变化，但交互的本质永远不会改变。

4
0