内容简介
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源创计划”，欢迎正在阅读的你也加入，一起分享。