-- 作者 謝恩銘 轉載請註明出處
Web探索之旅 | 第二部分
- 第二部分第一課：客戶端語言
- 第二部分第二課：伺服器語言
- 第二部分第三課：框架和內容管理系統
- 第二部分第四課：資料庫
- 第二部分第五課：響應式網站和移動應用
大家好。上一個部分 Web探索之旅 | 第一部分：什麼是Web？ 中，我們學習了Web的一些基本概念：
- 什麼是Web？
- Internet和Web的區別
- Web的歷史
第二部分我們會正式進入Web學習的主題了。我們會帶大家瞭解我們平時訪問的網站（Web site）是如何運作的。
首先我們來看看Web開發使用到的程式語言和資料庫，一些框架和內容管理系統，還有響應式設計。這一部分會有不少原理，概念比較重要，不過我們會用形象地比喻來闡明。
第二部分第一課：客戶端語言
在介紹客戶端的程式語言之前，我們得首先介紹一下，什麼是客戶端，以及與其對應的伺服器端是什麼概念。
Client-Server模型
Client在英語中是“客戶”，“委託人”的意思，而Server是“伺服器”，“服務者”的意思。
我們去餐廳用餐，服務我們的服務生/侍者的英語也是“server”（或者也叫“waiter”或“servant”）。
在資訊科技領域，這種模型就是最著名和使用最廣泛的“客戶機-伺服器”（Client-Server）模型（也有稱為“主從架構”的）。
顯而易見，這個模型所表達的是一種服務的關係：
客戶機是一個程式，它使用其他程式提供的服務。而提供服務的程式稱為伺服器。客戶機請求服務，伺服器則執行該服務。
我們的伺服器通常是比較強大的電腦（當然了，你也可以用自己的個人電腦或者一個小小的樹莓派（Raspberry PI）來搭建一個屬於自己的伺服器），專門服務我們的客戶，一個伺服器可以同時服務好多個客戶。
那客戶機是什麼呢？就是獲取服務的機器，一般就是我們自己的家用電腦啦，當然如果你用手機或平板電腦上網，那麼這些裝置也可以稱為客戶機。
在Web領域，我們主要是用客戶機來瀏覽網頁，而客戶機要能瀏覽網頁，還必須裝備一個叫做“瀏覽器”（英語是“browser”）的軟體。
例如，當你在維基百科（Wikipedia）閱讀文章時，你的電腦和網頁瀏覽器就被當做一個客戶端。同時，組成維基百科的電腦、資料庫和應用程式就被當做伺服器。
當你的網頁瀏覽器向維基百科請求一個指定的文章時，維基百科伺服器從維基百科的資料庫中找出所有該文章需要的資訊，結合成一個網頁，再傳送回你的瀏覽器。
至於什麼是資料庫，我們下兩課就會學到。
伺服器的作用簡單來說就是接受客戶機的請求，然後把客戶機需要的網頁提供給客戶機，客戶機則在瀏覽器上瀏覽這些網頁。見下圖：
上圖中，我們可以看到，在我們用電腦（手機，平板之類）上網的時候，同一個伺服器可以服務好多個客戶機。
當然了，同一臺客戶機也可以同時被好幾個伺服器服務（比如我們瀏覽不同網站的時候：在baidu.com，我們用的就是百度的伺服器；在google.com，我們用的就是google的伺服器）。就好比在餐廳裡，一個服務生可以服務好幾個客人，而一個客人也可以被幾個服務生服務。
比較常用的瀏覽器有以下五個：Chrome，Firefox，IE，Safari，Opera。
Chrome（中）：谷歌（Google）公司推出的瀏覽器。可以跨平臺，執行在Linux，Windows，Mac OS上。速度快，推薦使用。
Firefox（左二）：Mozilla基金會（開源社群）推出的瀏覽器。可以跨平臺，執行在Linux，Windows，Mac OS上。外掛豐富，推薦使用。
IE（右一）：Internet Explorer的縮寫，微軟（Microsoft）公司推出的瀏覽器。
Safari（右二）：蘋果（Apple）公司推出的瀏覽器。
Opera（左一）：Opera公司推出的瀏覽器。
對於這五種最流行的瀏覽器，小編推薦Chrome和Firefox。至於Mac OS使用者，其實用Safari也不錯，因為速度快，不耗電，缺點是功能少，支援不全面，有些網頁不能正常顯示。
至於IE和Opera：
Opera從來沒用過，也不知道該不該用。貌似市場份額不大，但據說速度挺快。
IE瀏覽器，小編覺得是史上最坑的瀏覽器，若不是微軟將IE捆綁在Windows作業系統裡發售，估計很多人都不願意使用。
小編做過一些Web前端開發，瞭解過適配IE瀏覽器有多麻煩。
不過之前微軟官方證實，旗下 Internet Explorer（IE瀏覽器）品牌將停止運營。微軟首席營銷官 Chris Capossela 公佈訊息稱，正在全新開發的 “Project Spartan”瀏覽器專案將取代 IE 的位置，只是目前還在為該瀏覽器起名，努力打造另一個全新的瀏覽器品牌。
發一些好玩的圖片，是對比這五個瀏覽器的：
調侃IE瀏覽器：
言歸正傳：
我們的伺服器和客戶端要正常執行來為我們呈現網頁，是需要藉助一些程式語言的，畢竟客戶端和伺服器端執行的都是程式（Program）麼。
上一部分講到的W3C（由Web的發明人Dim Berners Lee創立的Web標準化機構）就制定了一系列統一的語言，主要是客戶端的。
我們所看到的每一個網頁，其實歸根結底都是一個個檔案。而我們的瀏覽器可以把這些檔案解析成我們人類看得懂的各種樣式：圖片，文字，超連結，視訊，音訊等等。
而這些網頁檔案本身是要由特定語言寫成的。
客戶端的語言有：HTML，CSS和JavaScript（簡稱JS）。
HTML：HyperText Markup Language （超文字標記語言）的縮寫。W3C制定的程式語言，用來表述網頁的整體樣式。“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。HTML不是一種程式語言，而是一種標記語言 (markup language)
CSS：Cascading Style Sheets（層疊樣式表）的縮寫。W3C制定的程式語言。既然叫“樣式”表，那麼它就是用於定義如何顯示 HTML 元素。CSS使得HTML寫成的頁面不那麼單調，可以有各種顏色，大小等。
JavaScript：一種指令碼語言。與Java語言沒有關係，不要因為看到名字中包含一個Java就以為JavaScript是Java的變體或者什麼。可插入HTML頁面，使網頁具有動態/互動性。
對於這三種語言，我們這裡就不深究了。如果要學習，可以去W3C學院學習，網址是：
對應中文網站是：
要構建一個網頁檔案，HTML是必須的，CSS和JavaScript並不是必須。
也就是說，如果一個網頁，光用HTML語言也可以描述（比如你可以寫一個HTML的頁面，只顯示“Hello World!”），只不過很單調，沒什麼好看的樣式，也不是動態網頁。但是加上CSS和JS，我們的網頁就豐富起來了。
我們一股腦兒講了不少知識點，不知各位聽官能消化不？其實我們還沒講靜態網頁和動態網頁的概念，下一課【伺服器語言】時再說。
為了更簡單易懂，我們就用去餐廳用餐作比喻，來歸納一下上面的知識點：
- Restaurant（餐廳）：Web大環境
- Client（客戶）：你和你的家人。
- Server（伺服器）：餐廳的服務生。
- Browser（瀏覽器）：選單。
- Web page（網頁）：選單裡的每一頁
你和你的家人作為客戶（相當於客戶機），來到一家餐廳（相當於Web這個大環境）就餐。服務生（相當於伺服器）很熱情地過來招呼每個客戶，問你們要點什麼。
隨即給你們每人一個選單（相當於瀏覽器），選單上每一頁的內容就類似網頁：
然後，你和你的家人各自會點不同的菜色，就類似我們在瀏覽網頁時點選不同的內容。
最後服務生就會在大廚（伺服器後臺）準備好菜之後為我們奉上了。類似網頁根據每個使用者的不同請求所作出的動態呈現：
客戶端語言的翻譯
瀏覽器要將由HTML，CSS和JS寫成的網頁檔案翻譯成我們使用者能看懂的內容。過程類似如下：
其實我們可以在我們所瀏覽的網頁上點選滑鼠右鍵，選擇“檢視網頁原始碼”，就可以看到被瀏覽器解釋之前的這個頁面原來的樣子了：
那麼我們一般的網頁檔案（主要由HTML語言寫成，可能還包含了內嵌的CSS和JS，或者外部引用CSS和JS）的內容大致是什麼樣子的呢？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="shortcut icon" href="https://mp.toutiao.com/static/resource/pgc_web/static/style/image/favicon.75200df.png" type="image/x-icon"/>
<title>手動更新 - 頭條號</title>
<link rel="stylesheet" type="text/css" href="https://mp.toutiao.com/static/resource/pgc_web/static/pkg/common.c8103d9.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>複製程式碼以上就是一個網頁檔案的樣例。可以看到它是HTML語言寫成的，呼叫了css和javascript檔案。
HTML這樣的標記語言的一大特點就是有這樣一對對的<>尖括號構成的結構，叫做tag（標籤）。可以說HTML檔案是由文字資訊加標籤組成，標籤包裹了每一個文字，使得瀏覽器在翻譯HTML檔案時可以知道：“噢，這裡是一個段落”，“噢，那裡是一個標題”，“這裡是一個超連結”，“那裡是一張圖片或一個視訊”，等等：
<p>這是一個段落。</p>
<h1>這是一個標題</h1>複製程式碼這樣我們的瀏覽器解釋網頁的原始碼之後，就為我們呈現了美輪美奐（有的比較單調）的網頁了。
總結
我們的Web之所以能夠正常運作，是依靠了很多程式語言。
HTML，CSS，JavaScript：客戶端程式語言，決定了網站的外觀。其中HTML和CSS可以說是不可或缺的。JavaScript與Java沒有關係，是為了給HTML網頁增加動態功能。然而現在JavaScript也可被用於Web伺服器開發，如Node.js （一個Javascript執行環境（runtime））。
下回預告
微信公眾號「程式設計師聯盟」ProgrammerLeague
我是謝恩銘，在巴黎奮鬥的軟體工程師。
我的簡介
我的經歷
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：“向著標杆直跑”