Web探索之旅 | 第二部分第一課：客戶端語言

時間 2020-07-08

標籤 web 探索之旅第二部分一課客戶端語言欄目 HTML 简体版

原文原文鏈接

做者謝恩銘，公衆號「程序員聯盟」（微信號：coderhub）。轉載請註明出處。原文：www.jianshu.com/p/c59adf8ae…javascript

《Web探索之旅》全系列css

內容簡介

前言
客戶端語言
總結
第二部分第二課預告

1. 前言

上一課 Web探索之旅 | 第一部分：什麼是Web？中，咱們學習了 Web 的一些基本概念：html

什麼是 Web？
Internet 和 Web 的區別
Web 的歷史

這一課開始，咱們會帶你瞭解咱們平時訪問的網站（Web site）是如何運做的。java

首先咱們來看看 Web 開發使用到的編程語言，數據庫，一些框架和內容管理系統，還有響應式設計。會有很多原理和重要的概念，不過咱們會用形象的比喻來闡明。程序員

2. 客戶端語言

在介紹客戶端的編程語言以前，咱們得首先介紹一下，什麼是客戶端，以及與其對應的服務器端是什麼概念。web

Client-Server 模型

Client 表示「客戶，委託人」，Server 表示「服務器，服務者」。數據庫

咱們去餐廳用餐，服務咱們的服務生 / 侍者的英語也是 server（或者也叫 waiter）。編程

在信息技術領域，這種模型就是最著名和使用最普遍的「客戶機-服務器」（Client-Server）模型（也有稱爲「主從架構」的）。瀏覽器

咱們以前的課程已經介紹過 Client-Server 模型了，可是咱們再來進行更形象的介紹。bash

顯而易見，這個模型所表達的是一種服務的關係：

客戶機是一個程序，它使用其餘程序提供的服務。而提供服務的程序稱爲服務器。客戶機請求服務，服務器則執行該服務。

咱們的服務器一般是比較強大的電腦（固然了，你也能夠用本身的我的電腦或者一個小小的樹莓派（Raspberry PI）來搭建一個屬於本身的服務器），專門服務咱們的客戶，一個服務器能夠同時服務好多個客戶。

那客戶機是什麼呢？就是獲取服務的機器，通常就是咱們本身的家用電腦啦，固然若是你用手機或平板電腦上網，那麼這些設備也能夠稱爲客戶機。

在 Web 領域，咱們主要是用客戶機來瀏覽網頁，而客戶機要能瀏覽網頁，還必須裝備一個叫做瀏覽器（browser）的軟件。

例如，當你在維基百科（Wikipedia）閱讀文章時，你的電腦和網頁瀏覽器就被當作一個客戶端。同時，組成維基百科的電腦、數據庫和應用程序就被當作服務器。

當你的網頁瀏覽器向維基百科請求一個指定的文章時，維基百科服務器從維基百科的數據庫中找出全部該文章須要的信息，結合成一個網頁，再發送回你的瀏覽器。

至於什麼是數據庫，咱們以後的課程會學到。

服務器的做用簡單來講就是接受客戶機的請求，而後把客戶機須要的網頁提供給客戶機，客戶機則在瀏覽器上瀏覽這些網頁。見下圖：

上圖中，咱們能夠看到，在咱們用電腦（手機，平板之類）上網的時候，同一個服務器能夠服務好多個客戶機。

固然了，同一臺客戶機也能夠同時被好幾個服務器服務（好比咱們瀏覽不一樣網站的時候：在 baidu.com，咱們用的就是百度的服務器；在 google.com，咱們用的就是 Google 的服務器）。就比如在餐廳裏，一個服務生能夠服務好幾個客人，而一個客人也能夠被幾個服務生服務。

比較經常使用的瀏覽器有如下五個：Chrome，Firefox，IE，Safari，Opera。

Chrome（中）：谷歌（Google）公司推出的瀏覽器。能夠跨平臺，運行在 Linux，Windows，macOS 等操做系統上。速度快，推薦使用。
Firefox（左二）：Mozilla 基金會（開源社區）推出的瀏覽器。能夠跨平臺，運行在 Linux，Windows，macOS 等操做系統上。插件豐富，推薦使用。
IE（右一）：Internet Explorer 的縮寫，微軟（Microsoft）公司推出的瀏覽器。
Safari（右二）：蘋果（Apple）公司推出的瀏覽器。
Opera（左一）：Opera 公司推出的瀏覽器。

對於這五種最流行的瀏覽器，我推薦 Chrome 和 Firefox。至於 macOS 用戶，其實用 Safari 也不錯，由於速度快，不耗電，缺點是功能少，支持不全面，有些網頁不能正常顯示。

至於 IE 和 Opera：

Opera 我歷來沒用過，也不知道該不應用。貌似市場份額不大，但聽說速度挺快。

IE 瀏覽器，我我的以爲是這幾個裏面最差的瀏覽器，若不是微軟將 IE 捆綁在 Windows 操做系統裏發售，估計不少人都不肯意使用。

不過如今微軟也在慢慢用新的瀏覽器 Edge 來替代 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 就覺得 JavaScript 是 Java 的變體或者什麼，JavaScript 和 Java 沒有任何關係。可插入 HTML 頁面，使網頁具備動態 / 交互性。

對於這三種語言，咱們這裏就不深究了。若是要學習，能夠去 W3C 學院學習，網址是：www.w3schools.com 。對應中文網站是：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>
複製代碼

這樣咱們的瀏覽器解釋網頁的源代碼以後，就爲咱們呈現了美輪美奐（有的比較單調）的網頁了。

3. 總結

咱們的 Web 之因此可以正常運做，是依靠了不少編程語言。
HTML，CSS，JavaScript：客戶端編程語言，決定了網站的外觀。其中 HTML 和 CSS 能夠說是不可或缺的。
JavaScript 與 Java 沒有任何關係，是爲了給 HTML 網頁增長動態功能。然而如今 JavaScript 也可被用於 Web 服務器端的開發，如 Node.js（一個 Javascript 運行環境（runtime））。