自從個人電腦普及之后，幾乎我們每個人都會使用網(wǎng)絡版述，通過網(wǎng)絡梯澜，我們可以獲取我們想要的信息；可以在電子商務網(wǎng)站上渴析，購買物品晚伙；甚至可以與相距兩千公里外的好友視頻聊天。這一切的美好俭茧，都歸功于互聯(lián)網(wǎng)的發(fā)展咆疗。然而，你真的了解母债，它是怎么產(chǎn)生的嗎午磁？
為什么通過一個叫瀏覽器（Client）的東西，在地址欄上輸入一串莫名其妙的字符（URL）毡们，就能打開一個頁面（Web Page）迅皇？網(wǎng)頁是如何產(chǎn)生的？網(wǎng)頁上面的文字衙熔、圖片以及視頻又是從哪里來的登颓？
想要回答這么些問題，都是源于一個問題红氯，「誒框咙，你這是什么做的？H5嗎痢甘？」我竟然一時語塞喇嘱。很顯然，這是個不太專業(yè)的問題塞栅。而我竟然不知道該怎么回答婉称，好在，「這是Sublime Text做的」這句話，沒有說出來王暗。于是，我就產(chǎn)生了庄敛，想要寫這篇文章的初衷俗壹，希望能通過比較通俗的話，回答上述的問題：「站點是怎么產(chǎn)生的藻烤？」
網(wǎng)頁（Web Page）
首先介紹下绷雏，什么是網(wǎng)頁？什么怖亭，這也需要介紹涎显，確實，這個概念熟悉到兴猩，我們都不知道如何去介紹它了期吓。但還是有必要看下它的定義（來源于維基百科）：
網(wǎng)頁（英語：web page）是一個適用于萬維網(wǎng)和網(wǎng)頁瀏覽器的文件，它存放在世界某個角落的某一部或一組計算機中倾芝，而這部計算機必須是與互聯(lián)網(wǎng)相連讨勤。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與訪問，當我們在網(wǎng)頁瀏覽器輸入網(wǎng)址后晨另，經(jīng)過一段復雜而又快速的程序潭千，網(wǎng)頁文件會被傳送到用戶家的計算機，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容借尿，再展示給用戶刨晴。是網(wǎng)絡中的一“頁”，通常是HTML格式路翻，但現(xiàn)今已經(jīng)有愈來愈多狈癞、各色各樣的網(wǎng)頁格式和標準出現(xiàn)。網(wǎng)頁通常用圖像檔來提供圖畫帚桩。網(wǎng)頁要透過網(wǎng)頁瀏覽器來閱讀亿驾。
看完上述的定義，是不是清晰了不少账嚎，歸納一下：
- 它是一個文件莫瞬；
- 它存在于世界中，某一臺電腦的某一個存儲器中郭蕉；
- 它通常是HTML格式疼邀；
- 我們是通過URL來定位并找到它的；
HTML & H5
好了召锈，回答了什么是網(wǎng)頁旁振，那具體什么是HTML？
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言拐袜。HTML是一種基礎技術吉嚣，常與CSS、JavaScript一起被眾多網(wǎng)站用于設計令人賞心悅目的網(wǎng)頁蹬铺、網(wǎng)頁應用程序以及移動應用程序的用戶界面尝哆。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁甜攀。HTML描述了一個網(wǎng)站的結構語義隨著線索的呈現(xiàn)秋泄，使之成為一種標記語言，而非編程語言规阀。
維基百科上的定義恒序，令我也耳目一新，完全不需要我再多說什么了谁撼。我們知道了什么是HTML歧胁，那么，H5又是個啥彤敛？準確的來講与帆，應該叫HTML5，它是HTML最新的一個修訂版本墨榄，它具備了比HTML4更高級的一些特性玄糟，讓我們的網(wǎng)頁更加的生動有趣，例如集成了音頻袄秩，視頻以及畫布等特性阵翎。讓原本比較枯燥的頁面「動」了起來，隨著一些比較絢麗的頁面的產(chǎn)生之剧，讓它越來越被大家所熟悉郭卫。于是這個概念被放大了，一些頁面通過HTML5的特性背稼，實現(xiàn)了比較高端的動畫效果贰军。為了區(qū)別之前的頁面，也就H5 H5的叫開了蟹肘，但是词疼，它本質上還是HTML，是網(wǎng)頁的一個基本組成單位帘腹。
目前幾乎所有的網(wǎng)頁都是通過HTML5實現(xiàn)的贰盗，并且?guī)缀跛械臑g覽器（新版）都支持HTML5。它是一種標記語言阳欲，被廣泛應用于Web舵盈，并不是一個工具陋率，更加不是一個軟件。所以秽晚，被問到「這是H5寫的嗎瓦糟？」，標準答案為「是」爆惧。
URL（俗稱：網(wǎng)址）
好了狸页，我們通過一個叫做HTML的標記語言，書寫了一個網(wǎng)頁文件扯再，命名為test.html，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>這是一個網(wǎng)頁</title>
</head>
<body>
<h1>這是一個網(wǎng)頁</h1>
</body>
</html>
用瀏覽器打開它址遇，顯示如下：
地址欄上的那一串字符熄阻，就是URL。你也許會問了倔约，這個咋跟我平時看到不一樣呢秃殉？因為這個網(wǎng)頁就在你本地，瀏覽器上顯示的就是浸剩，這個網(wǎng)頁文件的本地路徑钾军。
統(tǒng)一資源定位符（或稱統(tǒng)一資源定位器/定位地址、URL地址等绢要，英語：Uniform Resource Locator吏恭，常縮寫為URL）重罪，有時也被俗稱為網(wǎng)頁地址（網(wǎng)址）樱哼。
URL的完整格式如下：
協(xié)議類型:[//[訪問資源需要的憑證信息@]服務器地址[:端口號]][/資源層級UNIX文件路徑]文件名[?查詢][#片段ID]
如上述本地文件test.html，協(xié)議類型為file://剿配，沒有服務器信息搅幅，直接是資源層級信息/Users/pegnloo53/Desktop/test.html，這是文件在電腦上的絕對路徑呼胚。所以茄唐，你應該能解讀 https://zh.wikipedia.org/wiki/HTML 這條URL了。
TCP/IP協(xié)議
上面URL中的協(xié)議類型http定義了蝇更，Web中的page是通過什么規(guī)則來進行傳播的沪编。整個互聯(lián)網(wǎng)上的所有計算機，都必須遵循一套規(guī)則或者叫協(xié)議簿寂，才能進行通信漾抬，進行交流。這套協(xié)議就叫做TCP/IP協(xié)議常遂。
我們在大學計算機網(wǎng)絡這門課程里纳令，應該學習過網(wǎng)絡ISO的7層模型，從上到下，分別為：應用層平绩，表示層圈匆，會話層，傳輸層捏雌，網(wǎng)絡層跃赚，數(shù)據(jù)鏈路層，物理層性湿。這是理論的網(wǎng)絡7層模型纬傲，而在實際的應用中，我們通常都是采用的TCP/IP協(xié)議模型肤频。如下圖所示對應關系：
我們想要獲取服務器上的資源（或者說是Web Page）叹括，數(shù)據(jù)會從服務器方的應用層，到傳輸層宵荒，到網(wǎng)絡層汁雷，到鏈路層，通過物理設備網(wǎng)線或者光纖等报咳，傳到我們這邊侠讯，接著通過鏈路層，到網(wǎng)絡層暑刃，到傳輸層厢漩，最后呈現(xiàn)在我們的客戶端（瀏覽器）上。示意圖如下：
上述對應關系圖參考文章：OSI七層模型與TCP/IP五層模型
TCP/IP協(xié)議并非只定義了數(shù)據(jù)傳輸?shù)牧飨蛏宰撸恳粚訁f(xié)議本身都定義了數(shù)據(jù)包的一些具體信息袁翁，例如，這個數(shù)據(jù)包將要傳到何處（標記婿脸，端口號）等粱胜。如下圖所示：
原始數(shù)據(jù)被一層一層的進行包裹，到達目的地后狐树，再一層一層的拆包焙压，這個過程就是常說的封裝與解封裝。HTTP只是這套規(guī)則中的一個環(huán)節(jié)抑钟，它只是定義了整套TCP/IP協(xié)議模型中應用層的其中一個協(xié)議涯曲，目的是為了提供一種發(fā)布和接收HTML頁面的方法。
總結
相信到這里在塔，你已經(jīng)可以回答如下問題：
我們的網(wǎng)站到底是怎么產(chǎn)生的幻件？它到底在哪？以及它如何被我們所訪問到蛔溃？
每一個網(wǎng)站都是通過HTML頁面組成绰沥，放在了一臺或是一組服務器上篱蝇，這臺服務器提供了可供外部訪問的URL，我們在瀏覽端上徽曲，通過URL定位到網(wǎng)站所在的地址零截，然后服務器端響應到請求后，通過TCP/IP模型秃臣，一層一層的將信息返回給我們涧衙，于是瀏覽器上就呈現(xiàn)出網(wǎng)站的樣子。
到此就結束了奥此。
你可能意猶未盡弧哎，篇幅關系，先講到這里稚虎，盡量一篇文章一個主題傻铣。
后面有機會，我會繼續(xù)分享相關主題文章祥绞，期待你的關注。
