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））。

4. 第二部分第二课预告

今天的课就到这里，一块儿加油吧！

下一课：Web探索之旅 | 第二部分第二课：服务器语言

我是谢恩铭，公众号「程序员联盟」（微信号：coderhub）运营者，慕课网精英讲师 Oscar 老师，终生学习者。热爱生活，喜欢游泳，略懂烹饪。人生格言：「向着标杆直跑」