现在人们每天都在使用网络，交通、住宿、购物、外出吃饭大多数都用手机操作，甚至很多人出门都不带钱包。如果家里断网，或者手机断网，那么用微信、看新闻、看视频、网购、手机支付都将无法使用。
网络到底是什么?每一台手机、电脑、以及远程的服务又是如何连接？如何传输数据？如何开发自己的网站，需要哪些技术？本讲将一一为读者解答。
17.1 互联网
早期接入网络的只有计算机，所以称为计算机网络，后来又有手机、智能硬件加入，称之为互联网（英文Internet，也译为因特网）更加准确。它是由多个小网络连接而成的庞大网络，在硬件方面，网络之间通过网络设备（交换机、路由器等）以及链路（无线链路、光纤等）相连；在软件方面通过网络协议通讯。
17.1.1 硬件连接
网络硬件连接如图17.1所示：
图17.1 网络硬件连接示意图
在家里或者单位上网时一般通过路由器连接电脑（或手机设备）和网络，目前的路由器一般同时提供有线和无线连接两种方式。有线连接是通过网线连接路由器和其它设备，无线连接则使用WIFI连接设备和路由器。相比之下，有线连接速度更快，数据传输更稳定，而无线连接更加方便。普通计算机与路由器之间一般使用网线相连，而手机与家中路由器一般使用无线连接。
路由器是本地网络和互联网之间的枢纽。路由器一方面构建小型的网络用于连接本地设备，另一方面向外连接互联网。除了计算机，通过路由器连接的还有笔记本电脑，智能硬件，如智能音箱、网络摄像头等，从而使物与物连接，通过协议协同工作，也是常说的物联网。
在户外或者不连接路由器的情况下，手机还可以通过移动网络上网，手机利用无线传输连接基站，基站又接入互联网。基站的全称是公用移动通信基站，是移动设备接入互联网的接口设备。
服务器是向外提供服务的设备，服务器是由高性能的计算机或者大型计算机组成的系统，相对于普通计算机性能更好，更稳定。根据功能不同，可支持数据库服务、文件服务（网盘）、应用服务（微信、淘宝）、WEB服务（百度、新浪）等等。手机和电脑通过网络与服务器连接。
17.1.2 软件支持
互联网上的数据通过协议传输，协议本身不是一种软件，而是一种通讯标准，它如同人类的语言，在不同的设备、不同的软件之间，只要服从同一套协议，即可相互传输数据、交换信息。网络协议种类繁多，协议常被分层，下层协议为上层协议提供服务，层层包裹。根据不同的标准，有的分为五层，有的分为七层。
下面介绍比较简单的TCP/IP四层网络结构，如图17.2所示：
图17.2 TCP/IP网络结构
1. 链路层
最底层的“链路层”负责设备与网络之间的数据交换，在这一层实现了对不同网络（有线网、无线网）的支持。
2. 网络层
网络层用于在复杂的网络环境中为数据报找到一个合适的传输路径，这一层实现了IP协议。 IP****地址是给每个连接在互联网上的主机或路由器分配的一个地址，用于标识网络中的唯一一台设备。32位地址可用四个字节表示，通常将每一个字节换算成一个十进制数，每个字节的数值范围在0-255之间，各字节之间用“.”分隔，IP地址形如“192.168.0.1”。
3. 传输层
传输层实现了两台设备之间的数据传输，支持TCP和UDP两种连接方式，TCP协议的工作方式是：建立连接、传输数据、断开连接，相对来说更可靠。而UDP也叫无连接协议。程序员常常在传输层之上编写基于TCP或UPD协议的程序。
4. 应用层
最上层是应用层，这一层用于支持针对具体功能的协议，如HTTP（超文本链接协议），FTP（文件传输协议），TELNET（虚拟终端协议等）。像浏览器和Web服务器就通过HTTP协议通讯。
综上，网络协议中的每一层都需要它下层的支持。层层封装，最终实现数据传输功能。
17.2 Web服务
WEB服务也是最常见的一种服务，它实现网上信息浏览服务，也就是说无论是手机或是电脑，使用浏览器连接网站所获得的服务都属于WEB服务。Web服务器一般指网站服务器。
17.2.1 HTTP 协议
HTTP协议是最常见的网络协议，它用于客户端（手机或电脑）的浏览器与服务器提供的WEB服务的交互。HTTP是应用层协议，是简单的请求-响应协议，它基于TCP连接。
工作流程如下：用户使用电脑打开浏览器，在其地址栏输入http://www.baidu.com，浏览器先在应用层将其按HTTP协议规则编码，然后在传输层封装成符合TCP规则的数据包，接下来在网络层进行IP规则封装，最后编码成链路层可正常传输的数据包，将数据传输至互联网，在传输层通过IP协议查找和定位百度服务器，找到后在本机与服务器之间建立TCP连接，进行HTTP协议数据包的传输，在数据交互完成之后断开连接。电脑的浏览器收到数据、解析内容，并将其中的文字和图片显示在浏览器中。
客户端与服务器交互一般有两种方式：B/S模式和C/S模式。其中的B代表Browser浏览器，C代表Client客户端，S代表服务器端，二者的不同在于， C/S模式需要在本机安装软件后才能使用，例如微信，而B/S模式使用本机的浏览器就能访问，不用另外安装软件，比较方便。
当开发者编写了一段程序或者功能，需要提供给用户使用，尤其是提供给网络上其它计算机或者手机上的用户使用时，B/S模式是一个很好的选择。开发者可以将自己的计算机作为小型的服务器，在其上运行WEB服务，供他人通过浏览器、本地网络、HTTP协议使用该功能。
17.2.2 HTML语言
HTML是超文本标记语言的缩写，用于创建网页，在浏览器上看到的网页大多数都是由HTML语言编写的。
HTML语言编写的网页也存储在文件之中，扩展名一般是“.html”或者“.htm”。手动编写html文件难免输入错误，建议使用以下网址提供的HTML编辑工具：https://c.runoob.com/front-end/61，编写和验证HTML，验证无误后再使用。
先来看一段最简单的HTML代码：
01 <html>
02 <head>
03 <title>我的标题</title>
04 </head>
05 <body>
06 <h1>一级标题</h1>
07 <p>正文</p>
08 </body>
09 </html>
HTML标签是由尖括号括起来的关键词，比如<p>是一个标签; <p>正文</p>是一个元素，也就是说元素由开始标签、结束标签以及其中的内容组成。
标签有以下几种常用写法：
1.包含开始标签和结束标签的内容
大多数的元素使用开始标签和结束标签，标签成对出现，它的格式为：
01 <标签>内容</标签>
例如：
01 <p>内容</p>
标签p用于定义段落，<p>和</p>分别设置了元素的起始点和结束点，以上语句定义了内容是“内容”的一个段落。
2. 空元素标签
空元素标签是只有标签，没有内容，它的格式为：
01 <标签/>
例如：
01 <br/>
标签br用于换行，不显示任何信息，使用空标签即可实现该功能。
3. 带属性的标签
在标签中设置属性的格式为：
01 <标签 属性名=值>内容</标签>
02 <标签 属性名=值/>
例如：
01 <a href="http://www.baidu.com ">打开百度</a>
02 <img src="http://pics.sc.chinaz.com/Files/pic/icons128/6519/r16.png”/>
第01行标签a用于超链接，在网页上显示“打开百度”，当点击该字符串时，网页跳转到由属性href指定的网页地址：http://www.baidu.com。在定义这一网页元素时，即需要在网页中显示字符串，又需要指定跳转的位置，带属性的标签可实现该功能。
第02行标签img用于显示图片，网页中显示的图片必须存储在网络上，并使用src属性设置图片的地址。
4. 注释
程序注释是对代码的解释和说明，目的是为了让自己和其他程序员更容易看懂，不需要显示给用户。
HTML中的注释格式为：
01 <!—注释内容-->
例如：
01 <!—这是一个注释-->
5. 网页的基本元素
一般网页中可以使用嵌套，其中的元素层层包含，元素通过标签定义。一般网页都会包含html、head、body这几个基本元素，如上例所示：
第01和09行为html标签，在最外层，用于标记网页的开始和结束。
第02和04行为head标签，是文件头，head中的内容一般不被显示出来，用于描述网页的字符编码、网页的风格，有时还包含一些可运行的程序。
第05和08行为body标签，是网页的主体，通过浏览器显示的内容都在body中添加。
网页中的文字、段落、输入框、按钮、图片、表格都对应不同的标签，读者如果想学习更多相关知识，请参考：https://www.runoob.com/html/html-tutorial.html。
开发者一般不需要手写每一行HTML代码，但需要能看懂基本的HTML格式文件。
如果读者比较熟悉Word软件，也可以在Word中编辑网页内容，然后另存为“网页（*.html）”格式，以此创建html文件，美中不足是使用Word创建的网页文件内容较多，难以阅读，但可以正常使用。
课后练习：（练习答案见本讲最后的小结部分）
练习一：用自己的语言解释以下概念：互联网、网址、网页。
练习二：在https://c.runoob.com/front-end/61中编辑和调试，生成如图17.3的网页，并保存在HTML文件中，在本机的浏览器中打开。
图17.3 网页效果
17.3 网站开发相关知识
17.3.1 客户端和服务端
服务端用于给其它机器提供服务，例如：百度搜索、腾讯视频等功能都是由远程服务器提供的，相对的，用户使用手机或者电脑连接服务器时称为客户端。
当使用Jupyter Notebook时，可以看到弹出一个类似命令行界面的黑框，它就是启动在后台的服务端，同时弹出的浏览器是客户端，客户端与服务端连接，此时可以用浏览器调试程序，实际上客户端只负责显示，Python代码和数据都保存在服务端，当关闭服务端后（黑框），客户端也无法正常使用。
17.3.2 前端和后端
网站开发通常分为前端开发和后端开发，前端开发主要关注与用户的交互部分，比如文字、图片、音视频的显示，支持网页内容在计算机和手机的屏幕中不同的版式，处理用户在网页上的操作等等。
而后端主要用于支持网页对应的功能，比如搭建各种服务，管理多台服务器协同工作，从数据库中读取和存储数据，计算、预测、分析筛选等等，后端往往是用户不可见的。
前端和后端使用不同的语言开发，本讲主要介绍前端的实现方法，在下一讲将介绍后端的实现方法。
17.3.3 网页和网站
网页是上例中使用HTML语言编写的文本文件，可以用浏览器打开。比如淘宝中的每一个页面都是网页，如淘宝首页、商品列表、详细介绍都以网页方式呈现。网页相互之间通过超链接等方式跳转（从一个网页打开另一个网页）。
网页是网站的重要组成部分，比如淘宝网是一个网站，它包括众多网页，网页是网站的前端部分，再加上后端存储、计算等等后台支持，共同构成了网站。
17.3.4 静态网页和动态网页
网页又分为：静态网页和动态网页，静态网页是事先写好，一般以HTML格式存放在服务器上。如果想修改其内容，则需要修改编辑HTML文件。而动态网页根据用户的操作生成其内容，比如搜索网页根据用户搜索的内容返回不同列表，新闻网页根据当前的新闻数据的变化不断更新内容，浏览器中显示的HTML格式的数据是根据当时的数据以及用户的需求即时生成的。HTML格式的数据常由其它编程语言自动生成，像Java、PHP都是常用的开发工具，Python也是常用工具之一，它最大的优势是使用简单，下一讲将介绍用Python生成动态网页的实现方法。
17.3.5 网页相关编程语言
除了基本的HTML语言以外，CSS和JavaScript也是前端开发的必备技能。
CSS用于精确控制网页的排版，比如一个网站中的网页一般具有同样的字体、背景颜色、显示风格等等，如果在每个网页的每个控件中逐一设置，网页数据将变得非常庞大而复杂。CSS用于描述HTML中组件的样式，只需要在HTML的头部（head）中指定css文件，即可在网页的各个控件中使用CSS中定义的风格。
JavaScript是一种脚本语言，它也支持变量、表达式、函数等等。一般嵌入在网页之中，在浏览器显示网页时，由浏览器解释执行，如果把HTML称为网页的描述语言，则可以把JavaScript称为网页编程语言。它可以给HTML增加动态的功能，比如接收网页中按钮按下的事件并调用对应的功能。
17.3.6 HTML5
HTML5是HTML的第五次修改版本。它增加了更多的元素和属性，实现了很多之前只能通过嵌入JavaScript脚本才能实现的功能，比如视频元素、音频元素、更强大的表单功能等等。
需要注意的是：一些早期的浏览器，或者浏览器早期版本，无法正常支持HTML5，所以使用HTML5编写网页时需要考虑浏览器是否支持。
17.4 思维训练
17.4.1学习的能力
同样的学校，同样的老师，一样做作业，为什么学习效果却各不相同？除了努力程度，也要看能力。人们常把能力归因于先天的基因和后天的教育。
人与人之间基因的相似程度高达99.99%。在开发机器人的时候，科学家们发现：走路、抓握、视觉、语言比逻辑推理、数学更加复杂，而人类无论聪明与否都能正常使用这些功能。可见，实际上普通人的智力差异并没有想象中那么大。有些基因只有特定情况下才能开启，没努力到一定程度，就无法开启相应的技能。
能力也与知识基础相关。有时，同一个人在不同阶段做同一件事效果也有差异。两年前我第一次看一本强人工智能的书，每天看两小时，近一个月才看完，不是没有充足的时间，主要因为其中不熟悉的概念太多，看多了也吸收不了。今年，当这本书看到第四遍的时候，三五天时间就可以看完，随着一次一次复习，里面很多东西慢慢记住了。就像建金字塔一样，很多时候取决于基础。
整体的能力由很多更小的能力组合而成。有些人从小学习了某些技能，经年累月逐渐变成常识和习惯，时间太长，以至于我们以为天生就会。人们常把举一反三的看作是与生俱来的能力。以写程序为例：如果不理解每一条语句，更不能理解它们组合之后的功能，如果面临考试，只能死记硬背，之后也只能解决完全相同的问题。而这种泛化能力的差异，都是由于前期偷懒、不求甚解导致的。
偷懒在很多时候并不是故意的，只是一种习惯。大多数抉择并不是基于深思熟虑，而是取决于习惯。观察实践的习惯，坚持认真的习惯、列计划、复习、定期自查、整理思路、排列优先级，这些方法在一次又一次地重复之后，构建了脑中的回路，最终铸就了性格。决定着面对每一次受挫、每一次走神，每一个诱惑、每一个问题时的反应。日积月累，人与人之间的差别也越来越大。
好在，习惯可以后天塑造，但是需要较长的时间周期，同理，坏习惯养成的时间越长，就越不容易改变。
17.4.2 知识屏蔽
到目前为止，我们学习了游戏制作、简单的数据库、数据分析、网络编程……实际上，深入学习其中的任何一项都需要大量时间。比如在大学阶段的《计算机网络》课，学习网络相关的知识、原理，使用方法，这门课程需要学习整个学期。如果要系统地学习上述知识，需要用大学四年时间学习计算机相关专业。然而，很多深层知识在工作中也很少用到。笔者利用多年软件开发和数据分析的工作经验，整理了其中最为重要的知识点。
尽管无法用一本书讲完所有相关的计算机知识，花几个月的时间，也不能把一个四年级小学生培养成直接去IT公司面试和工作的员工。选择哪些知识点，深入到什么程度？让大家既能学习到具体实用的技术，又不过于肤浅？这里加入了更多的扩展，并且刻意屏蔽了一些原理和内部细节，讲到够用即可的程度。利用同样的时间精力，别人还在研究原理，你已经写过很多代码了。
同理，也建议大家在小学和中学阶段，不要陷进细节里，尽量扩展宽度，以便从整体的尺度以及更多的角度考虑问题。
17.5 小结
17.5.1单词
本讲需要掌握的英文单词如表17.1所示。
表17.1本讲需要掌握的英文单词
17.5.2 习题答案
- 练习一：用自己的语言解释以下概念：互联网、网址、网页。
详见本讲正文部分。
- 练习二：在https://c.runoob.com/front-end/61中编辑和调试，生成如图17.1的网页，并存储在HTML文件中，在本机的浏览器中打开。
01 <html>
02 <body>
03 <h1>标题1</h1>
04 <p>我是第一段</p>
05 <p>我是回车</p>
06 <br/>
07 <a href="http://www.baidu.com">这是超链接</a>
08 <p>我是图片</p>
09 <img src="http://pics.sc.chinaz.com/Files/pic/icons128/6519/r16.png"/>
10 </body>
11 </html>
打开Windows记事本（开始->所有程序->附件->记事本），输入以上内容，保存为a.html。在文件管理器中双击打开a.html即可在浏览器中显示此网页。
网友评论