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


    标题:一个浏览器的自白

    小 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>先后在印刷所当过学徒、当过送报人和排字工,后来又在密西西比河的船上当过水手和舵手。
    
    • 1

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

    在这里插入图片描述

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

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

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

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

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

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

    在这里插入图片描述

    我有了新搭档

    在一个周末的下午,小李子正在用浏览器阅读自己改造的 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 量身定制了一个