好想跟你讲清楚,站点到底是怎么产生的?

自从个人电脑普及之后,几乎我们每个人都会使用网络,通过网络,我们可以获取我们想要的信息;可以在电子商务网站上,购买物品;甚至可以与相距两千公里外的好友视频聊天。这一切的美好,都归功于互联网的发展。然而,你真的了解,它是怎么产生的吗?

为什么通过一个叫浏览器(Client)的东西,在地址栏上输入一串莫名其妙的字符(URL),就能打开一个页面(Web Page)?网页是如何产生的?网页上面的文字、图片以及视频又是从哪里来的?

想要回答这么些问题,都是源于一个问题,「诶,你这是什么做的?H5吗?」我竟然一时语塞。很显然,这是个不太专业的问题。而我竟然不知道该怎么回答,好在,「这是Sublime Text做的」这句话,没有说出来。于是,我就产生了,想要写这篇文章的初衷,希望能通过比较通俗的话,回答上述的问题:「站点是怎么产生的?」

网页(Web Page)

首先介绍下,什么是网页?什么,这也需要介绍,确实,这个概念熟悉到,我们都不知道如何去介绍它了。但还是有必要看下它的定义(来源于维基百科):

网页(英语:web page)是一个适用于万维网网页浏览器的文件,它存放在世界某个角落的某一部或一组计算机中,而这部计算机必须是与互联网相连。网页经由网址URL)来识别与访问,当我们在网页浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到用户家的计算机,然后再通过浏览器解释网页的内容,再展示给用户。是网络中的一“页”,通常是HTML格式,但现今已经有愈来愈多、各色各样的网页格式和标准出现。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。

看完上述的定义,是不是清晰了不少,归纳一下:

  • 它是一个文件;
  • 它存在于世界中,某一台电脑的某一个存储器中;
  • 它通常是HTML格式;
  • 我们是通过URL来定位并找到它的;

HTML & H5

好了,回答了什么是网页,那具体什么是HTML?

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言,而非编程语言

维基百科上的定义,令我也耳目一新,完全不需要我再多说什么了。我们知道了什么是HTML,那么,H5又是个啥?准确的来讲,应该叫HTML5,它是HTML最新的一个修订版本,它具备了比HTML4更高级的一些特性,让我们的网页更加的生动有趣,例如集成了音频,视频以及画布等特性。让原本比较枯燥的页面「动」了起来,随着一些比较绚丽的页面的产生,让它越来越被大家所熟悉。于是这个概念被放大了,一些页面通过HTML5的特性,实现了比较高端的动画效果。为了区别之前的页面,也就H5 H5的叫开了,但是,它本质上还是HTML,是网页的一个基本组成单位。

目前几乎所有的网页都是通过HTML5实现的,并且几乎所有的浏览器(新版)都支持HTML5。它是一种标记语言,被广泛应用于Web,并不是一个工具,更加不是一个软件。所以,被问到「这是H5写的吗?」,标准答案为「是」。

URL(俗称:网址)

好了,我们通过一个叫做HTML的标记语言,书写了一个网页文件,命名为test.html,内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>这是一个网页</title>
</head>
<body>
    <h1>这是一个网页</h1>
</body>
</html>

用浏览器打开它,显示如下:

image.png

地址栏上的那一串字符,就是URL。你也许会问了,这个咋跟我平时看到不一样呢?因为这个网页就在你本地,浏览器上显示的就是,这个网页文件的本地路径。

统一资源定位符(或称统一资源定位器/定位地址URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址网址)。

URL的完整格式如下:

协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

如上述本地文件test.html,协议类型为file://,没有服务器信息,直接是资源层级信息/Users/pegnloo53/Desktop/test.html,这是文件在电脑上的绝对路径。所以,你应该能解读 https://b.lupeng.me 这条URL了。

TCP/IP协议

上面URL中的协议类型http定义了,Web中的page是通过什么规则来进行传播的。整个互联网上的所有计算机,都必须遵循一套规则或者叫协议,才能进行通信,进行交流。这套协议就叫做TCP/IP协议。

我们在大学计算机网络这门课程里,应该学习过网络ISO的7层模型,从上到下,分别为:应用层,表示层,会话层,传输层,网络层,数据链路层,物理层。这是理论的网络7层模型,而在实际的应用中,我们通常都是采用的TCP/IP协议模型。如下图所示对应关系:

image.png

我们想要获取服务器上的资源(或者说是Web Page),数据会从服务器方的应用层,到传输层,到网络层,到链路层,通过物理设备网线或者光纤等,传到我们这边,接着通过链路层,到网络层,到传输层,最后呈现在我们的客户端(浏览器)上。示意图如下:

TCP/IP

上述对应关系图参考文章:OSI七层模型与TCP/IP五层模型

TCP/IP协议并非只定义了数据传输的流向,每一层协议本身都定义了数据包的一些具体信息,例如,这个数据包将要传到何处(标记,端口号)等。如下图所示:

原始数据被一层一层的进行包裹,到达目的地后,再一层一层的拆包,这个过程就是常说的封装解封装。HTTP只是这套规则中的一个环节,它只是定义了整套TCP/IP协议模型中应用层的其中一个协议,目的是为了提供一种发布和接收HTML页面的方法。

总结

相信到这里,你已经可以回答如下问题:

我们的网站到底是怎么产生的?它到底在哪?以及它如何被我们所访问到?

每一个网站都是通过HTML页面组成,放在了一台或是一组服务器上,这台服务器提供了可供外部访问的URL,我们在浏览端上,通过URL定位到网站所在的地址,然后服务器端响应到请求后,通过TCP/IP模型,一层一层的将信息返回给我们,于是浏览器上就呈现出网站的样子。

到此就结束了。

你可能意犹未尽,篇幅关系,先讲到这里,尽量一篇文章一个主题。
后面有机会,我会继续分享相关主题文章,期待你的关注。


Comments
Write a Comment