作者 謝恩銘。
轉載請注明出處。
原文：http://www.itdecent.cn/p/c59adf8ae2f5
《Web探索之旅》全系列
內容簡介
- 前言
- 客戶端語言
- 總結
- 第二部分第二課預告
1. 前言
上一課 Web探索之旅 | 第一部分：什么是Web？ 中，我們學習了 Web 的一些基本概念：
- 什么是 Web？
- Internet 和 Web 的區(qū)別
- Web 的歷史
這一課開始，我們會帶你了解我們平時訪問的網(wǎng)站（Web site）是如何運作的。
首先我們來看看 Web 開發(fā)使用到的編程語言，數(shù)據(jù)庫，一些框架和內容管理系統(tǒng)，還有響應式設計。會有不少原理和重要的概念，不過我們會用形象的比喻來闡明。
2. 客戶端語言
在介紹客戶端的編程語言之前，我們得首先介紹一下，什么是客戶端，以及與其對應的服務器端是什么概念。
Client-Server 模型
Client 表示“客戶，委托人”，Server 表示“服務器，服務者”。
我們去餐廳用餐，服務我們的服務生 / 侍者的英語也是 server（或者也叫 waiter）。
在信息技術領域，這種模型就是最著名和使用最廣泛的“客戶機-服務器”（Client-Server）模型（也有稱為“主從架構”的）。
我們之前的課程已經(jīng)介紹過 Client-Server 模型了，但是我們再來進行更形象的介紹。
顯而易見，這個模型所表達的是一種服務的關系：
客戶機是一個程序，它使用其他程序提供的服務。而提供服務的程序稱為服務器?？蛻魴C請求服務，服務器則執(zhí)行該服務。
我們的服務器通常是比較強大的電腦（當然了，你也可以用自己的個人電腦或者一個小小的樹莓派（Raspberry PI）來搭建一個屬于自己的服務器），專門服務我們的客戶，一個服務器可以同時服務好多個客戶。
那客戶機是什么呢？就是獲取服務的機器，一般就是我們自己的家用電腦啦，當然如果你用手機或平板電腦上網(wǎng)，那么這些設備也可以稱為客戶機。
在 Web 領域，我們主要是用客戶機來瀏覽網(wǎng)頁，而客戶機要能瀏覽網(wǎng)頁，還必須裝備一個叫作瀏覽器（browser）的軟件。
例如，當你在維基百科（Wikipedia）閱讀文章時，你的電腦和網(wǎng)頁瀏覽器就被當做一個客戶端。同時，組成維基百科的電腦、數(shù)據(jù)庫和應用程序就被當做服務器。
當你的網(wǎng)頁瀏覽器向維基百科請求一個指定的文章時，維基百科服務器從維基百科的數(shù)據(jù)庫中找出所有該文章需要的信息，結合成一個網(wǎng)頁，再發(fā)送回你的瀏覽器。
至于什么是數(shù)據(jù)庫，我們之后的課程會學到。
服務器的作用簡單來說就是接受客戶機的請求，然后把客戶機需要的網(wǎng)頁提供給客戶機，客戶機則在瀏覽器上瀏覽這些網(wǎng)頁。見下圖：
上圖中，我們可以看到，在我們用電腦（手機，平板之類）上網(wǎng)的時候，同一個服務器可以服務好多個客戶機。
當然了，同一臺客戶機也可以同時被好幾個服務器服務（比如我們?yōu)g覽不同網(wǎng)站的時候：在 baidu.com，我們用的就是百度的服務器；在 google.com，我們用的就是 Google 的服務器）。就好比在餐廳里，一個服務生可以服務好幾個客人，而一個客人也可以被幾個服務生服務。
比較常用的瀏覽器有以下五個：Chrome，F(xiàn)irefox，IE，Safari，Opera。
Chrome（中）：谷歌（Google）公司推出的瀏覽器。可以跨平臺，運行在 Linux，Windows，macOS 等操作系統(tǒng)上。速度快，推薦使用。
Firefox（左二）：Mozilla 基金會（開源社區(qū)）推出的瀏覽器。可以跨平臺，運行在 Linux，Windows，macOS 等操作系統(tǒng)上。插件豐富，推薦使用。
IE（右一）：Internet Explorer 的縮寫，微軟（Microsoft）公司推出的瀏覽器。
Safari（右二）：蘋果（Apple）公司推出的瀏覽器。
Opera（左一）：Opera 公司推出的瀏覽器。
對于這五種最流行的瀏覽器，我推薦 Chrome 和 Firefox。至于 macOS 用戶，其實用 Safari 也不錯，因為速度快，不耗電，缺點是功能少，支持不全面，有些網(wǎng)頁不能正常顯示。
至于 IE 和 Opera：
Opera 我從來沒用過，也不知道該不該用。貌似市場份額不大，但據(jù)說速度挺快。
IE 瀏覽器，我個人覺得是這幾個里面最差的瀏覽器，若不是微軟將 IE 捆綁在 Windows 操作系統(tǒng)里發(fā)售，估計很多人都不愿意使用。
不過現(xiàn)在微軟也在慢慢用新的瀏覽器 Edge 來替代 IE 瀏覽器了。
我們的服務器和客戶端要正常運行來為我們呈現(xiàn)網(wǎng)頁，是需要借助一些編程語言的，畢竟客戶端和服務器端運行的都是程序（program）么。
上一課講到的 W3C（由 Web 的發(fā)明人 Dim Berners Lee 創(chuàng)立的 Web 標準化機構）就制定了一系列統(tǒng)一的語言，主要是客戶端的。
我們所看到的每一個網(wǎng)頁，其實歸根結底都是一個個文件。而我們的瀏覽器可以把這些文件解析成我們人類看得懂的各種樣式：圖片，文字，超鏈接，視頻，音頻等等。
而這些網(wǎng)頁文件本身是要由特定語言寫成的。
客戶端的語言有：HTML，CSS 和 JavaScript（簡稱 JS）。
HTML：HyperText Markup Language （超文本標記語言）的縮寫。W3C 制定的編程語言，用來表述網(wǎng)頁的整體樣式?！俺谋尽本褪侵疙撁鎯瓤梢园瑘D片、鏈接，甚至音樂、程序等非文字元素。HTML 不是一種編程語言，而是一種標記語言（markup language）。
CSS：Cascading Style Sheets（層疊樣式表）的縮寫。W3C 制定的編程語言。既然叫“樣式”表，那么它就是用于定義如何顯示 HTML 元素。CSS 使得 HTML 寫成的頁面不那么單調，可以有各種顏色，大小，等等。
JavaScript：一種腳本語言。不要因為看到名字中包含一個 Java 就以為 JavaScript 是 Java 的變體或者什么，JavaScript 和 Java 沒有任何關系?？刹迦?HTML 頁面，使網(wǎng)頁具有動態(tài) / 交互性。
對于這三種語言，我們這里就不深究了。如果要學習，可以去 W3C 學院學習，網(wǎng)址是：http://www.w3schools.com 。對應中文網(wǎng)站是：http://www.w3school.com.cn 。
要構建一個網(wǎng)頁文件，HTML 是必須的，CSS 和 JavaScript 并不是必須。
也就是說，如果一個網(wǎng)頁，光用 HTML 語言也可以描述（比如你可以寫一個 HTML 的頁面，只顯示“Hello World !”），只不過很單調，沒什么好看的樣式，也不是動態(tài)網(wǎng)頁。但是加上 CSS 和 JS，我們的網(wǎng)頁就豐富起來了。
我們一股腦兒講了不少知識點，不知各位聽官能消化不？其實我們還沒講靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的概念，下一課再說。
為了更簡單易懂，我們就用去餐廳用餐作比喻，來歸納一下上面的知識點：
- Restaurant（餐廳）：Web 大環(huán)境。
- Client（客戶）：你和你的家人。
- Server（服務器）：餐廳的服務生。
- Browser（瀏覽器）：菜單。
- Web page（網(wǎng)頁）：菜單里的每一頁。
你和你的家人作為客戶（相當于客戶機），來到一家餐廳（相當于 Web 這個大環(huán)境）就餐。服務生（相當于服務器）很熱情地過來招呼每個客戶，問你們要點什么。
隨即給你們每人一個菜單（相當于瀏覽器），菜單上每一頁的內容就類似網(wǎng)頁：
然后，你和你的家人各自會點不同的菜色，就類似我們在瀏覽網(wǎng)頁時點擊不同的內容。
最后服務生就會在大廚（服務器后臺）準備好菜之后為我們奉上了。類似網(wǎng)頁根據(jù)每個用戶的不同請求所作出的動態(tài)呈現(xiàn)：
客戶端語言的翻譯
瀏覽器要將由 HTML，CSS 和 JS 寫成的網(wǎng)頁文件翻譯成我們用戶能看懂的內容。過程類似如下：
其實我們可以在我們所瀏覽的網(wǎng)頁上點擊鼠標右鍵，選擇“查看網(wǎng)頁源代碼”，就可以看到被瀏覽器解釋之前的這個頁面原來的樣子了：
那么我們一般的網(wǎng)頁文件（主要由 HTML 語言寫成，可能還包含了內嵌的 CSS 和 JS，或者外部引用 CSS 和 JS）的內容大致是什么樣子的呢？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="shortcut icon" type="image/x-icon"/>
<title>手動更新 - 頭條號</title>
<link rel="stylesheet" type="text/css" >
<script type="text/javascript" charset="utf-8" src="https://mp.toutiao.com/static/resource/pgc_web/static/js/lib/pre.2dc26ef.js"></script>
</head>
<body >
<div id="pagelet-header" gap="^用戶profile">
<div class="shead">
</body >
</html>
以上就是一個網(wǎng)頁文件的樣例。可以看到它是用 HTML 語言寫成的，調用了 css 和 javascript 文件。
HTML 這樣的標記語言的一大特點就是有這樣一對對的 <> 尖括號構成的結構，叫做 tag（標簽）?？梢哉f HTML 文件是由文本信息加標簽組成，標簽包裹了每一個文本，使得瀏覽器在翻譯 HTML 文件時可以知道：“噢，這里是一個段落”，“噢，那里是一個標題”，“這里是一個超鏈接”，“那里是一張圖片或一個視頻”，等等：
<p>這是一個段落。</p>
<h1>這是一個標題</h1>
這樣我們的瀏覽器解釋網(wǎng)頁的源代碼之后，就為我們呈現(xiàn)了美輪美奐（有的比較單調）的網(wǎng)頁了。
3. 總結
我們的 Web 之所以能夠正常運作，是依靠了很多編程語言。
HTML，CSS，JavaScript：客戶端編程語言，決定了網(wǎng)站的外觀。其中 HTML 和 CSS 可以說是不可或缺的。
JavaScript 與 Java 沒有任何關系，是為了給 HTML 網(wǎng)頁增加動態(tài)功能。然而現(xiàn)在 JavaScript 也可被用于 Web 服務器端的開發(fā)，如 Node.js（一個 Javascript 運行環(huán)境（runtime））。
4. 第二部分第二課預告
今天的課就到這里，一起加油吧！
我是 謝恩銘，終生學習者。
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：「向著標桿直跑」
