內容簡介
1、第二部分第一課：客戶端語言
2、第二部分第二課預告：服務器語言
第二部分：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學院學習，網址是：
http://www.w3schools.com/
對應中文網站是：
http://www.w3school.com.cn/
要構建一個網頁文件，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））。
第二部分第二課預告
今天的課就到這裏，一起加油吧！
下一課我們學習：服務器語言
程序員聯盟社區
目前有一個微信羣和一個QQ羣，凡是對編程感興趣的朋友都可以加，大家可以交流，學習，互動，討論編寫的程序的源代碼，編程問答等。
微信羣（程序員聯盟），加羣請私信我（微信羣人數超過100之後，不能通過掃描二維碼加入了，只能私信我，謝謝）
QQ羣： 413981577 （1000人羣）
QQ羣文件裏有很多編程書籍PDF和其他資料。掃描下面二維碼加QQ：
我們還建立了一個公共的百度雲盤，2TB容量，已有很多優秀編程資源，大家也可以上傳。鏈接加羣之後會發送。
百度貼吧 【程序員聯盟】 歡迎您加入，交流編程，討論代碼，共享資源，已經有很多話題。吧主就是小編。
http://tieba.baidu.com/f?kw=%E7%A8%8B%E5%BA%8F%E5%91%98%E8%81%94%E7%9B%9F&ie=utf-8
點擊左下角【閱讀原文】即可進入 【程序員聯盟】 百度貼吧
《程序員聯盟》的微社區，方便大家提問和互動。可以關注一下。
微社區地址和二維碼如下：
http://m.wsq.qq.com/264152148
謝謝！
*您若覺得本文不錯，請點擊畫面右上角《···》按鈕“分享到朋友圈”或“發送給朋友”
*新朋友請關注「程序員聯盟」微信搜公衆號 ProgrammerLeague
小編微信號： frogoscar
小編QQ號： 379641629
小編郵箱： [email protected]
程序員聯盟QQ羣：413981577
程序員聯盟微信羣：先加我微信
有朋友反映看手機端的文章太累，其實是可以用瀏覽器網頁來看的：
方法1. 點擊畫面右上角的《···》按鈕，然後選擇“複製鏈接”，再把鏈接黏貼到你的瀏覽器裏面或用郵件發送給自己，就可以在電腦的瀏覽器裏打開了
方法2. 頭條網www.toutiao.com，搜索我的自媒體“程序員聯盟”，內有所有文章，也可以直接進這個鏈接：http://www.toutiao.com/m3750422747/
方法3. 我的51CTO博客，CSDN博客和博客園鏈接（所有文章都在上面）
http://4526621.blog.51cto.com
http://blog.csdn.net/frogoscar
http://www.cnblogs.com/frogoscar
如何查看所有文章：
1. 點擊“查看公衆號”，再點擊“查看歷史消息”
2. 在公衆號回覆任何信息，可以看到包含“查看歷史消息”的鏈接。
本文分享自微信公衆號 - 程序員聯盟（coderhub）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。