标题：一个浏览器的自白

小 C：“Nginx 大哥，你在吗？”
Nginx：“Chrome 小老弟，我在呢！你准备好了吗？”
小 C：“我准备好了，开始传输数据吧！”

完成了三次相互的问候，我便开始与 Nginx 大哥展开了数据传输的工作。

我叫小 C，是 Chrome 家族的第 103 代（版本）浏览器，到我这一代，我们浏览器已经为人类服务 30 多年了。我每天的工作就是不停地和 Nginx 大哥打招呼，然后发送 HTTP 请求，Nginx 大哥也挺配合，但是有时候请求他的浏览器太多了，他忙不过来的话也不会理我。除了 Nginx 大哥之外，有时也会根据主人的需要去请求其他的服务器，Apache 也是我经常请求的一个大哥。

其实，我的工作非常简单，就是按照主人的需求，去找不同的服务器大哥获取数据，然后把拿到的文件渲染到界面上。不过我能够看懂的文件也就那么几种，最主要的还是 .html、.css、.js 这三种含有代码的文件，其他的都是一些静态资源文件，比如图片、视频、音频文件。

人类的程序员们非常聪明，在开发一个网页的时候，为了提高开发的效率，会发明很多种文件类型，例如 .vue、.jsx 、.ts 等，但是我能够处理的也只有上面提到的 .html、.css、.js 这三种文件。

至于我为什么只能处理这三种文件，还得从发明我的那个人说起。

我叫 “浏览器”

在很久以前，人类还没有发明互联网，电脑之间文件传输的方式也很单一，人类使用电脑除了工作之外就没有其他的娱乐活动了。小李子是一位热爱文学的程序员，每天下班回到家里，都迫不及待地打开电脑，翻看自己珍藏多年的小说文件。这些小说的文本文件都被小李子很用心地归类整理到不同的文件夹下面管理，方便自己阅读。

有一天晚上，小李子像往常一样打开了一个小说文件，在小说中的某处提到了一个人的名字 “马克 · 吐温”，这时小李子想查看与马克 · 吐温相关的文学作品，在电脑上翻了好久也没有看到自己想要的文件，有些不耐烦地嘟囔了一句：“什么鬼！找个文件都这么麻烦，要是点一下名字就出现马克 · 吐温的作品就好了”。

突然，一个新的想法从小李子的大脑中闪过：在文本中添加一个链接，当链接被点击后就直接打开关联的文件，这样岂不是更好！实现这个功能对于程序员出身的小李子来说，并不是什么难事。首先，小李子把所有小说文件中需要链接到其他文件的地方，使用一个标记给括起来，并且在标记上添加一些其他的信息。

例如，在一段文字中出现了马克 · 吐温的名字：

为了谋生，马克·吐温先后在印刷所当过学徒、当过送报人和排字工，后来又在密西西比河的船上当过水手和舵手。

将马克吐温的名字使用一个标记给括起来，就变成了下面的文本内容：

为了谋生，<a href="MarkTwain.txt">马克·吐温</a>先后在印刷所当过学徒、当过送报人和排字工，后来又在密西西比河的船上当过水手和舵手。

这种带有标记的文本如果还使用传统的 .txt 保存，肯定是不行的，而且展示内容的时候还要把 <a></a> 这种标记隐藏起来，被标记所包裹的文本还需要使用不同颜色与其他文本内容进行区分，最终的效果应该是这个样子的：

为了实现这一系列的想法，小李子加班加点，开发了一款新的软件，使用这个软件可以浏览本地的所有文件，并且可以对带有标记的文本做特殊的渲染处理。

能够被这个新软件打开的文件也不再是一个普通的文本文件，而是变成了一个超文本（Hypertext）。既然是超文本，那就不仅仅是渲染链接那么简单，还可以渲染图片、表格、列表等内容。这样一来，用于渲染内容的标记就丰富起来了，而且软件打开的文本内容也变得更加多样化。

于是，小李子就制定了一套用于描述界面的标记语言——HyperText Markup Language（超文本标记语言），简称 HTML。使用 HTML 编写的文本也就以 .html 为扩展名，这个专门用于浏览并渲染 HTML 文件的软件也有了自己的名字：浏览器。

有了浏览器和 HTML，小李子再也不用看枯燥的文字了，他把电脑中的所有小说文件都修改成了 xxx.html 文件类型，并且为小说中的文字了添加链接，还配上了图片。原本的小说内容就变成了：

<img src="./pic/mt.jpg">
为了谋生，<a href="MarkTwain.txt">马克·吐温</a>先后在印刷所当过学徒、当过送报人和排字工，后来又在密西西比河的船上当过水手和舵手。

在浏览器中打开就是下面的样子：

我有了新搭档

在一个周末的下午，小李子正在用浏览器阅读自己改造的 HTML 图文小说，他的死党大胖正好过来串门，看到小李子电脑屏幕上花花绿绿的内容，非常惊奇地问：“伙计，你这个是什么软件啊？怎么文字旁边还配了图片，太神奇了！”
小李子傲娇地答道：“这个是我刚刚发明的软件，叫浏览器，看起小说贼爽！”
大胖：“我也要，我也要！赶紧给我拷一份。”

于是，小李子就大方地拷贝了一份浏览器软件，还有自己编写好的 .html 文件都送给了大胖，让他安装到自己的电脑上去用。大胖开心地跑回家里赶紧试了一下，感觉很神奇。不过，没多久，大胖就急冲冲地跑回来，问小李子：“你给我的那些 html 文件里，有个是关于《安娜·卡列尼娜》介绍的链接，我点了之后根本打不开！”

小李子这才想起来，原来是自己疏忽了，少给大胖拷贝了一个关于小说介绍的文件夹，就赶紧给大胖又拷贝了一份小说介绍。大胖抱怨了一句：“你这么聪明，就不能让我电脑上的浏览器直接打开你电脑上的文件吗？害得我多跑一趟。”

说者无心，听者有意，这句话一下把小李子给点醒了，对呀！这个浏览器如果只是在单机里运行肯定是不能发挥它的作用，我必须得搞一个网络才行！而且还要实现多台电脑之间的通信。

沿着这个方向，小李子又有了新的想法，在自己电脑上设计一个新的软件，这个软件可以指定远程电脑访问本地文件夹的范围，然后接收远程浏览器的请求，解析远程浏览器需要的文件，在本地找到该文件后再响应给远程浏览器。而且远程浏览器和本地的这个软件实现通信时，还需要有一套标准的网络传输协议。例如，我本地电脑的 IP 地址是 192.168.1.10，大胖在他电脑的浏览器中需要输入这个 IP 地址才能找到我的这台电脑，并且指定一个端口来访问我电脑上的这个用于接收请求的软件。然后，我电脑上的这个软件再根据请求的参数，找到对应的 .html 文件，响应给大胖的浏览器。这样，大胖就可以用浏览器远程访问我电脑上的 .html 文件了。

软件开发完成后，小李子给大胖演示了一遍，大胖又一次被小李子的发明震撼到了：“太棒了！你电脑上安装的这个新软件叫什么名字？”

小李子想了想，这个软件就像是一个网络上的服务员，专门在网络中为浏览器提供查找文件的服务，那就叫它“服务器”吧。小李子还为这个服务器软件起了一个响亮的名字：Apache。同时，用于传输超文本的协议被叫作超文本传输协议，即：HyperText Transfer Protocol，简称 HTTP。

到目前为止，浏览器请求服务器就有了一套完整的规范，即：

http://ip:port/path?paramName=paramValue&...

这套构想很快就得到了很多朋友的支持，并且每个人都愿意把自己珍藏的资源拿出来分享，只需要在自己电脑上安装一个服务器软件，然后把要分享的资源文件修改成 .html ，并放到服务器指定的文件夹下面，别人就可以通过自己电脑上的浏览器软件来访问本服务器上的资源了。整个网络就像是一个很大的 “盘丝洞”，如下图：

小李子希望让更多的人认识并使用这个网络，把这个网络推广到全世界，便为这个网络起了一个名字：万维网（英文：World Wide Web），简称 WWW。

我要变得更好看

正如小李子所料，浏览器被更多的人安装到了电脑上，用来浏览万维网上的信息。但是当时间久了，大家都觉得浏览器中展示的内容并没有像图书那样精美，也缺少便于阅读的文字排版。为了挽救浏览器和 HTML，也为了给万维网上增添一些色彩，一个叫小维的程序员发明了一套样式标准。

小维为 HTML 量身定制了一个 <style> 标记，并且制定了一套样式标准，只要遵循这套样式标准，浏览器中展示的文本内容就会变得非常精美。例如，只需要通过几个具有语言化的属性设置，HTML 就有了自己的样式：

<html><style>div {width: 300px;margin: 50px auto;}img {display: block;width: 100%;}a {text-decoration: none;background-color: #007AFF;color: white;}</style><body><div>                        <img src="./pic/mt.jpg" /><p>为了谋生，<a href="MarkTwain.txt">马克·吐温</a>先后在印刷所当过学徒、当过送报人和排字工，后来又在密西西比河的船上当过水手和舵手。</p></div></body>
</html>

这段添加了

当浏览器窗口的页面内容变得越来越丰富之后，为了更好地管理页面中的内容，可以把一个页面划分成不同的版块进行管理，同时也为了方便设置每个版块展示的前后顺序，小维还为这套样式规范增加了 “图层” 的概念。每个图层就像是一张张含有文字或图形的胶片，然后将这些胶片叠加在一起，就拼装成一屏完整的 HTML 网页。

那么，这套样式标准也就有了统一的名字，叫层叠样式表（英文：Cascading Style Sheets），简称 CSS。CSS 的出现，就像是为 HTML 插上了一对翅膀，让页面变得更加丰富多彩。

我要变得更好玩

人类是永远不会被满足的一种生物体，浏览器的出现，让人类感到兴奋的同时又觉得缺少了一丝交互的乐趣。小布作为一名有想法的程序员，为浏览器设计了一套可以交互的脚本语言——JavaScript。

看到这里，很多朋友可能会有一个疑问：这个 JavaScript 语言和 Java 语言是什么关系？

在回答这个问题之前，你先考虑一下，雷峰塔和雷锋有关系吗？老婆饼和老婆有关系吗？巴基斯坦和巴基有关系吗？JavaScript 和 Java 有关系吗？当然，没有毛线关系。

小布为浏览器设计的这套 JavaScript 脚本语言，让浏览器与人类之间有了第一次的“亲密接触”：

<button onclick="ask()">点我</button>
<script type="text/javascript">function ask() {var answer = confirm('你愿意和我交朋友吗？')if (answer === true) {alert('Hello friend !')} else {alert('see you !')}}
</script>

有了 JavaScript，程序员就可以在浏览器中编写有趣的代码，执行简单的程序，为浏览器与人类之间定义了新的交流方式。

总结

好了，关于我这个浏览器的身世就讲完了。渲染 HTML 代码，是我与生俱来的能力；在浏览器不断发展过程中，开发者们又为我定制了强大的解释器，才让我读懂了 JavaScript 脚本代码，执行更加炫酷的特效。

但是，直到今天为止，我也只能渲染 .html、.css 文件，并且可以解释执行 .js 文件。至于程序员们经常把玩的 .vue 、 .jsx 和 .ts 文件，我还没有独立处理的能力，也只能靠其他的兄弟们（编译工具）帮忙去编译成我能够直接执行的文件类型。

当你真正看懂我的时候，也就正式走进了 Web 的世界。

当然，文中出现的这些人物在现实生活中都可以找到原型的。

小李子原型：蒂姆·伯纳斯·李，万维网和浏览器的发明者。
小维原型：哈肯·维姆·莱，CSS 的发明者之一。
小布原型：布兰登·艾奇，JavaScript 的发明者。

该专栏持续更新中 ~ ~

原创文章，转载请注明出处！

小白也能看懂的 Web 前端入门文章（一个浏览器的自白）相关推荐

一张图带你看懂，web前端开发应该知道的HTML5六大趋势
目前最具人气的前端开发技术框架是什么?移动至上时代的来临促使越来越多的开发者利用HTML5开发移动友好型网站.HTML5的主要优势一直在不断演进,旨在提供足以与原生技术相匹配的功能. 从雷军这样的互联 ...
不会真的有人看不懂 Linux 小白都能看懂的大数据入门（一）图文
一.概述 1.1 Linux的历史操作系统,英语Operating System简称为OS.说道操作系统就需要先讲一讲Unix,UNIX操作系统,是一个强大的多用户.多任务操作系统,支持多种处理器架 ...
小白都能看懂的C语言入门教程
文章目录 C语言入门教程 1. 第一个C语言程序HelloWorld 2. C语言的数据类型 3. 常量变量的使用 4. 自定义标识符#define 5. 枚举的使用 6. 字符串和转义字符 7. 判 ...
双碑零基础意大利语学习小白也能看懂的意大利语入门知识
问候语 1)意大利人熟人之间见面,一般用"ciao",类似于英语中的"hi".[读作.查哦.] 再见很简单,就是连读两遍"ciao". 2) ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 3)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第三讲这是小白都能看懂的实战教程手把手教你Python Web全栈开发的 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 1)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第一讲博主博客文章内容导航(实时更新) 更多优质文章推荐: 收藏!最详细的P ...
红色买绿色出简单易操作的买卖点公式散户小白都能看懂
好久没来csdn了,在最初,CSDN是用来记录我做前端写的笔记,后面在工作期间,接触了产品,就转岗了,慢慢的,csdn就很少写了,但是我觉得这里可以作为我记录心得的一个地方,还是挺好的. 因为产品规划 ...
绝对精品推荐做前端的看下：Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈一直想写这篇"十日谈&q ...
python进阶(小白也能看懂)——装饰器浅谈(一）
python进阶(小白也能看懂)--装饰器(一) 第四篇文章目录 python进阶(小白也能看懂)--装饰器(一) 1.函数基础知识例子1.1 例子1.2 例子1.3 例子1.4 2.不带参数的装 ...

小白也能看懂的 Web 前端入门文章（一个浏览器的自白）