作者 謝恩銘鸠姨。
轉(zhuǎn)載請(qǐng)注明出處。
原文：http://www.reibang.com/p/c59adf8ae2f5
《Web探索之旅》全系列
內(nèi)容簡(jiǎn)介
- 前言
- 客戶端語(yǔ)言
- 總結(jié)
- 第二部分第二課預(yù)告
1. 前言
上一課 Web探索之旅 | 第一部分：什么是Web必逆？ 中，我們學(xué)習(xí)了 Web 的一些基本概念：
- 什么是 Web？
- Internet 和 Web 的區(qū)別
- Web 的歷史
這一課開始岭接，我們會(huì)帶你了解我們平時(shí)訪問的網(wǎng)站（Web site）是如何運(yùn)作的。
首先我們來看看 Web 開發(fā)使用到的編程語(yǔ)言臼予，數(shù)據(jù)庫(kù)鸣戴，一些框架和內(nèi)容管理系統(tǒng)，還有響應(yīng)式設(shè)計(jì)粘拾。會(huì)有不少原理和重要的概念窄锅，不過我們會(huì)用形象的比喻來闡明。
2. 客戶端語(yǔ)言
在介紹客戶端的編程語(yǔ)言之前缰雇，我們得首先介紹一下入偷，什么是客戶端，以及與其對(duì)應(yīng)的服務(wù)器端是什么概念械哟。
Client-Server 模型
Client 表示“客戶疏之，委托人”，Server 表示“服務(wù)器暇咆，服務(wù)者”锋爪。
我們?nèi)ゲ蛷d用餐，服務(wù)我們的服務(wù)生 / 侍者的英語(yǔ)也是 server（或者也叫 waiter）爸业。
在信息技術(shù)領(lǐng)域其骄，這種模型就是最著名和使用最廣泛的“客戶機(jī)-服務(wù)器”（Client-Server）模型（也有稱為“主從架構(gòu)”的）。
我們之前的課程已經(jīng)介紹過 Client-Server 模型了扯旷，但是我們?cè)賮磉M(jìn)行更形象的介紹拯爽。
顯而易見，這個(gè)模型所表達(dá)的是一種服務(wù)的關(guān)系：
客戶機(jī)是一個(gè)程序薄霜，它使用其他程序提供的服務(wù)某抓。而提供服務(wù)的程序稱為服務(wù)器纸兔。客戶機(jī)請(qǐng)求服務(wù)否副，服務(wù)器則執(zhí)行該服務(wù)汉矿。
我們的服務(wù)器通常是比較強(qiáng)大的電腦（當(dāng)然了，你也可以用自己的個(gè)人電腦或者一個(gè)小小的樹莓派（Raspberry PI）來搭建一個(gè)屬于自己的服務(wù)器）备禀，專門服務(wù)我們的客戶洲拇，一個(gè)服務(wù)器可以同時(shí)服務(wù)好多個(gè)客戶。
那客戶機(jī)是什么呢曲尸？就是獲取服務(wù)的機(jī)器赋续，一般就是我們自己的家用電腦啦，當(dāng)然如果你用手機(jī)或平板電腦上網(wǎng)另患，那么這些設(shè)備也可以稱為客戶機(jī)纽乱。
在 Web 領(lǐng)域，我們主要是用客戶機(jī)來瀏覽網(wǎng)頁(yè)昆箕，而客戶機(jī)要能瀏覽網(wǎng)頁(yè)鸦列，還必須裝備一個(gè)叫作瀏覽器（browser）的軟件。
例如鹏倘，當(dāng)你在維基百科（Wikipedia）閱讀文章時(shí)薯嗤，你的電腦和網(wǎng)頁(yè)瀏覽器就被當(dāng)做一個(gè)客戶端。同時(shí)，組成維基百科的電腦、數(shù)據(jù)庫(kù)和應(yīng)用程序就被當(dāng)做服務(wù)器兴溜。
當(dāng)你的網(wǎng)頁(yè)瀏覽器向維基百科請(qǐng)求一個(gè)指定的文章時(shí)朽褪，維基百科服務(wù)器從維基百科的數(shù)據(jù)庫(kù)中找出所有該文章需要的信息，結(jié)合成一個(gè)網(wǎng)頁(yè)，再發(fā)送回你的瀏覽器。
至于什么是數(shù)據(jù)庫(kù)，我們之后的課程會(huì)學(xué)到归园。
服務(wù)器的作用簡(jiǎn)單來說就是接受客戶機(jī)的請(qǐng)求，然后把客戶機(jī)需要的網(wǎng)頁(yè)提供給客戶機(jī)稚矿，客戶機(jī)則在瀏覽器上瀏覽這些網(wǎng)頁(yè)庸诱。見下圖：
上圖中，我們可以看到晤揣，在我們用電腦（手機(jī)桥爽，平板之類）上網(wǎng)的時(shí)候，同一個(gè)服務(wù)器可以服務(wù)好多個(gè)客戶機(jī)昧识。
當(dāng)然了钠四，同一臺(tái)客戶機(jī)也可以同時(shí)被好幾個(gè)服務(wù)器服務(wù)（比如我們?yōu)g覽不同網(wǎng)站的時(shí)候：在 baidu.com，我們用的就是百度的服務(wù)器；在 google.com缀去，我們用的就是 Google 的服務(wù)器）侣灶。就好比在餐廳里，一個(gè)服務(wù)生可以服務(wù)好幾個(gè)客人缕碎，而一個(gè)客人也可以被幾個(gè)服務(wù)生服務(wù)褥影。
比較常用的瀏覽器有以下五個(gè)：Chrome，F(xiàn)irefox咏雌，IE凡怎，Safari，Opera赊抖。
Chrome（中）：谷歌（Google）公司推出的瀏覽器统倒。可以跨平臺(tái)氛雪，運(yùn)行在 Linux房匆，Windows，macOS 等操作系統(tǒng)上注暗。速度快坛缕，推薦使用墓猎。
Firefox（左二）：Mozilla 基金會(huì)（開源社區(qū)）推出的瀏覽器捆昏。可以跨平臺(tái)毙沾，運(yùn)行在 Linux骗卜，Windows，macOS 等操作系統(tǒng)上左胞。插件豐富寇仓，推薦使用。
IE（右一）：Internet Explorer 的縮寫烤宙，微軟（Microsoft）公司推出的瀏覽器遍烦。
Safari（右二）：蘋果（Apple）公司推出的瀏覽器。
Opera（左一）：Opera 公司推出的瀏覽器躺枕。
對(duì)于這五種最流行的瀏覽器服猪，我推薦 Chrome 和 Firefox。至于 macOS 用戶拐云，其實(shí)用 Safari 也不錯(cuò)罢猪，因?yàn)樗俣瓤欤缓碾姴娲瘢秉c(diǎn)是功能少膳帕，支持不全面，有些網(wǎng)頁(yè)不能正常顯示薇缅。
至于 IE 和 Opera：
Opera 我從來沒用過危彩，也不知道該不該用攒磨。貌似市場(chǎng)份額不大，但據(jù)說速度挺快汤徽。
IE 瀏覽器咧纠，我個(gè)人覺得是這幾個(gè)里面最差的瀏覽器，若不是微軟將 IE 捆綁在 Windows 操作系統(tǒng)里發(fā)售泻骤，估計(jì)很多人都不愿意使用漆羔。
不過現(xiàn)在微軟也在慢慢用新的瀏覽器 Edge 來替代 IE 瀏覽器了。
我們的服務(wù)器和客戶端要正常運(yùn)行來為我們呈現(xiàn)網(wǎng)頁(yè)狱掂，是需要借助一些編程語(yǔ)言的演痒，畢竟客戶端和服務(wù)器端運(yùn)行的都是程序（program）么。
上一課講到的 W3C（由 Web 的發(fā)明人 Dim Berners Lee 創(chuàng)立的 Web 標(biāo)準(zhǔn)化機(jī)構(gòu)）就制定了一系列統(tǒng)一的語(yǔ)言趋惨，主要是客戶端的鸟顺。
我們所看到的每一個(gè)網(wǎng)頁(yè)，其實(shí)歸根結(jié)底都是一個(gè)個(gè)文件器虾。而我們的瀏覽器可以把這些文件解析成我們?nèi)祟惪吹枚母鞣N樣式：圖片讯嫂，文字，超鏈接兆沙，視頻欧芽，音頻等等。
而這些網(wǎng)頁(yè)文件本身是要由特定語(yǔ)言寫成的葛圃。
客戶端的語(yǔ)言有：HTML千扔，CSS 和 JavaScript（簡(jiǎn)稱 JS）。
HTML：HyperText Markup Language （超文本標(biāo)記語(yǔ)言）的縮寫库正。W3C 制定的編程語(yǔ)言曲楚，用來表述網(wǎng)頁(yè)的整體樣式∪旆“超文本”就是指頁(yè)面內(nèi)可以包含圖片龙誊、鏈接，甚至音樂喷楣、程序等非文字元素趟大。HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言（markup language）抡蛙。
CSS：Cascading Style Sheets（層疊樣式表）的縮寫护昧。W3C 制定的編程語(yǔ)言。既然叫“樣式”表粗截，那么它就是用于定義如何顯示 HTML 元素惋耙。CSS 使得 HTML 寫成的頁(yè)面不那么單調(diào)，可以有各種顏色，大小绽榛，等等湿酸。
JavaScript：一種腳本語(yǔ)言。不要因?yàn)榭吹矫种邪粋€(gè) Java 就以為 JavaScript 是 Java 的變體或者什么灭美，JavaScript 和 Java 沒有任何關(guān)系推溃。可插入 HTML 頁(yè)面届腐，使網(wǎng)頁(yè)具有動(dòng)態(tài) / 交互性铁坎。
對(duì)于這三種語(yǔ)言，我們這里就不深究了犁苏。如果要學(xué)習(xí)硬萍，可以去 W3C 學(xué)院學(xué)習(xí)，網(wǎng)址是：http://www.w3schools.com 围详。對(duì)應(yīng)中文網(wǎng)站是：http://www.w3school.com.cn 朴乖。
要構(gòu)建一個(gè)網(wǎng)頁(yè)文件，HTML 是必須的助赞，CSS 和 JavaScript 并不是必須买羞。
也就是說，如果一個(gè)網(wǎng)頁(yè)雹食，光用 HTML 語(yǔ)言也可以描述（比如你可以寫一個(gè) HTML 的頁(yè)面畜普，只顯示“Hello World !”），只不過很單調(diào)婉徘，沒什么好看的樣式漠嵌，也不是動(dòng)態(tài)網(wǎng)頁(yè)。但是加上 CSS 和 JS盖呼，我們的網(wǎng)頁(yè)就豐富起來了。
我們一股腦兒講了不少知識(shí)點(diǎn)化撕，不知各位聽官能消化不几晤？其實(shí)我們還沒講靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的概念，下一課再說植阴。
為了更簡(jiǎn)單易懂蟹瘾，我們就用去餐廳用餐作比喻，來歸納一下上面的知識(shí)點(diǎn)：
- Restaurant（餐廳）：Web 大環(huán)境掠手。
- Client（客戶）：你和你的家人憾朴。
- Server（服務(wù)器）：餐廳的服務(wù)生。
- Browser（瀏覽器）：菜單喷鸽。
- Web page（網(wǎng)頁(yè)）：菜單里的每一頁(yè)众雷。
你和你的家人作為客戶（相當(dāng)于客戶機(jī)），來到一家餐廳（相當(dāng)于 Web 這個(gè)大環(huán)境）就餐。服務(wù)生（相當(dāng)于服務(wù)器）很熱情地過來招呼每個(gè)客戶砾省，問你們要點(diǎn)什么鸡岗。
隨即給你們每人一個(gè)菜單（相當(dāng)于瀏覽器），菜單上每一頁(yè)的內(nèi)容就類似網(wǎng)頁(yè)：
然后编兄，你和你的家人各自會(huì)點(diǎn)不同的菜色轩性，就類似我們?cè)跒g覽網(wǎng)頁(yè)時(shí)點(diǎn)擊不同的內(nèi)容。
最后服務(wù)生就會(huì)在大廚（服務(wù)器后臺(tái)）準(zhǔn)備好菜之后為我們奉上了狠鸳。類似網(wǎng)頁(yè)根據(jù)每個(gè)用戶的不同請(qǐng)求所作出的動(dòng)態(tài)呈現(xiàn)：
客戶端語(yǔ)言的翻譯
瀏覽器要將由 HTML揣苏，CSS 和 JS 寫成的網(wǎng)頁(yè)文件翻譯成我們用戶能看懂的內(nèi)容。過程類似如下：
其實(shí)我們可以在我們所瀏覽的網(wǎng)頁(yè)上點(diǎn)擊鼠標(biāo)右鍵件舵，選擇“查看網(wǎng)頁(yè)源代碼”舒岸，就可以看到被瀏覽器解釋之前的這個(gè)頁(yè)面原來的樣子了：
那么我們一般的網(wǎng)頁(yè)文件（主要由 HTML 語(yǔ)言寫成，可能還包含了內(nèi)嵌的 CSS 和 JS芦圾，或者外部引用 CSS 和 JS）的內(nèi)容大致是什么樣子的呢蛾派？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="shortcut icon" type="image/x-icon"/>
<title>手動(dòng)更新 - 頭條號(hào)</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>
以上就是一個(gè)網(wǎng)頁(yè)文件的樣例「錾伲可以看到它是用 HTML 語(yǔ)言寫成的洪乍，調(diào)用了 css 和 javascript 文件。
HTML 這樣的標(biāo)記語(yǔ)言的一大特點(diǎn)就是有這樣一對(duì)對(duì)的 <> 尖括號(hào)構(gòu)成的結(jié)構(gòu)夜焦，叫做 tag（標(biāo)簽）壳澳。可以說 HTML 文件是由文本信息加標(biāo)簽組成茫经，標(biāo)簽包裹了每一個(gè)文本巷波，使得瀏覽器在翻譯 HTML 文件時(shí)可以知道：“噢，這里是一個(gè)段落”卸伞，“噢抹镊，那里是一個(gè)標(biāo)題”，“這里是一個(gè)超鏈接”荤傲，“那里是一張圖片或一個(gè)視頻”垮耳，等等：
<p>這是一個(gè)段落。</p>
<h1>這是一個(gè)標(biāo)題</h1>
這樣我們的瀏覽器解釋網(wǎng)頁(yè)的源代碼之后遂黍，就為我們呈現(xiàn)了美輪美奐（有的比較單調(diào)）的網(wǎng)頁(yè)了终佛。
3. 總結(jié)
我們的 Web 之所以能夠正常運(yùn)作，是依靠了很多編程語(yǔ)言雾家。
HTML铃彰，CSS，JavaScript：客戶端編程語(yǔ)言芯咧，決定了網(wǎng)站的外觀牙捉。其中 HTML 和 CSS 可以說是不可或缺的竹揍。
JavaScript 與 Java 沒有任何關(guān)系，是為了給 HTML 網(wǎng)頁(yè)增加動(dòng)態(tài)功能鹃共。然而現(xiàn)在 JavaScript 也可被用于 Web 服務(wù)器端的開發(fā)鬼佣，如 Node.js（一個(gè) Javascript 運(yùn)行環(huán)境（runtime））。
4. 第二部分第二課預(yù)告
今天的課就到這里霜浴，一起加油吧晶衷！
下一課：Web探索之旅 | 第二部分第二課：服務(wù)器語(yǔ)言
我是 謝恩銘，終生學(xué)習(xí)者阴孟。
熱愛生活晌纫，喜歡游泳，略懂烹飪永丝。
人生格言：「向著標(biāo)桿直跑」
