下载掌阅APP，畅读海量书库
立即打开
本节首先介绍与网页有关的一些基本常识，然后介绍HTML的基本工作原理，接着介绍如何用“记事本”创建、编辑网页，以及如何测试网页，最后介绍了比较常见的网页编辑工具。
HTML基本概念
通俗地讲，Internet就是许多不同功能的计算机通过线路连接起来组成的一个世界范围内的网络。从网络通信技术的角度看，Internet是一个以传输控制协议/互联网协议（TCP/IP）连接各个国家、各个地区、各个机构的计算机网络的数据通信网。从信息资源的角度看，Internet是一个集各个部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源网。
网络是指多台计算机通过特定的连接方式构成的一个计算机的集合体；而协议（protocol）则可以理解为网络中的设备在“打交道”时共同遵循的一套规则，即以何种方法获得所需的信息。
Internet能提供的服务包括万维网（World Wide Web，WWW）服务（即网页浏览服务）、电子邮件服务、即时消息传送（如QQ、微信等）、文件存储与传输（如各种云服务等）、网上购物、网络炒股、网络游戏等。
由此可见，WWW并不就是Internet，它只是Internet提供的服务之一。不过，它确实是现在Internet上发展得最为蓬勃的部分。相当多的其他Internet服务都是基于WWW服务的，例如网上聊天、网上购物、网络炒股等。我们平时所说的网上冲浪，其实就是指利用WWW服务获得信息并进行网上交流。
那么，什么是WWW呢？从术语的角度讲，WWW是由遍布在Internet上的称为Web服务器的计算机组成的，它将不同的信息资源有机地组织在一起，让用户可以通过“浏览器”进行信息的浏览。
如果读者熟悉网上的各种操作，那么应该清楚地了解到：获取任何一种Internet服务都需要相应的客户端程序。例如，要收发电子邮件，最常使用的就是Outlook或Foxmail之类的电子邮件客户端程序；要进行网上即时信息传递，只要安装了微信或QQ等即时通信程序即可；要上网浏览，则应使用“浏览器”作为客户端程序。
网上冲浪的基本工作原理如图1-1所示。
图1-1 网上冲浪的基本工作原理
当用户连接到Internet后，如果在浏览器上输入一个Internet地址（实际上是对应一个网页）并按【Enter】键，相当于要求显示该Internet地址上的某个特定网页。首先这个“请求”被浏览器通过网线等传输介质传送到网页所在的服务器（Server）上，然后服务器做出“响应”，再通过传输介质把用户请求的网页传送到用户所在的计算机，最后由浏览器进行显示。当用户在网页中操作时（例如单击超链接），如果需要请求其他网页，则这种“请求”又会通过传输介质传送到提供相应网页的服务器，由服务器做出响应。
通过这个过程，浏览器和服务器之间建立了一种交互关系，使浏览者可以访问位于世界各地计算机（服务器）上的网页。在图1-1中，我们作为浏览者是位于浏览器端，或者说是客户端的；而Internet的另一端则包含大量的用于提供信息服务的服务器，它使我们能够访问形形色色的网页。这些位于相同或不同计算机上的网页通过超链接组织在一起，于是形成了像蜘蛛网一样的WWW系统。
根据以上说明可以看出，浏览器是获取WWW服务的基础，它的基本功能就是对网页进行显示。目前使用比较广泛的浏览器有Chrome、Safari、Edge和Firefox等。本书以Chrome作为默认浏览器。
前面已经说过，WWW是由无数的Web服务器构成的，我们通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了WWW的纵横交织结构。
当然，网页与网页之间的关系并不是完全相同的。通常我们把一系列逻辑上可以视为一个整体的网页叫作网站，或者说，网站就是一个链接的网页集合，它具有共享的属性，例如相关主题或共同目标。
网站的概念是相对的，大可以大到“新浪网”这样的门户网站，网页多得无法计数，而且位于多台服务器上；小可以小到一些个人网站，可能只有零星几个网页，仅在某台服务器上占据很小空间。
“主页”是网站中的一个特殊网页，它是作为一个组织或个人在WWW上开始点的网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，一般叫作index.htm或index.html等（后缀.htm或.html表示HTML文件）。
任何一个网站都是由若干个文件组成的，包括网页文件、图像文件等多种类型。这些文件通过一定的方式以文件夹的形式组织起来，构成了网站的根文件夹。表1-1列出了网站中各种常用文件类型的扩展名。
表1-1 网站中常用文件的扩展名
如果在Chrome浏览器中，打开任意一个网页（例如“淘宝网”首页），然后在窗口中的空白位置单击鼠标右键，在弹出的快捷菜单中选择“查看网页源代码”命令，则系统会显示图1-2所示的网页的源文件信息。
图1-2 网页的源文件信息
这些文本其实就是网页的本质——HTML源代码。超文本标记语言（HyperText Markup Language，HTML）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用<table>标记符可以在网页上定义一个表格。
超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接将文档组织成了网状结构，如图1-3所示（这实际上也是WWW信息组织的基本原理）。例如，我们可以把常规意义上的书本理解为普通文本，而把由超链接组织起来的电子文档理解为超文本。
图1-3 超文本示意图
在HTML文件中，使用标记符可以“告诉”浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加<h1></h1>标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图1-4所示。
图1-4 使用HTML标记符控制内容的显示
HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。
HTML由国际组织万维网联盟（W3C）制定和维护，随着技术的发展，W3C不断推出新的版本。具有里程碑意义的HTML版本包括HTML3.2、HTML4.0/4.01、XHTML1.0/1.1、HTML5等。如果需要了解HTML的更详细的情况，请访问W3C的官方网站，从该网站中可以获得最新的HTML规范。
本书将以HTML5为基础进行讲解。
不管是设计何种类型的网站，一般都应遵循基于Web标准的开发原则。Web标准由三大部分组成，以体现Web开发的整体性和结构化。这三大部分是结构（Structure）、表现（Presentation）和行为（Behavior）。
● 结构：对网页信息内容进行整理和分类。用于结构化设计的Web标准技术包括HTML、XML和XHTML。
● 表现：对被结构化的信息进行显示控制。用于Web设计的标准技术是层叠样式表（Cascading Style Sheets，CSS，也称串联样式表或级联样式表），具体内容见本书第3章、第6章。
● 行为：对文档内部模型进行定义，用于控制动态交互内容。这部分标准技术包括文档对象模型（Document Object Model，DOM）、浏览器对象模型（Browser Object Model，BOM）和脚本程序语言JavaScript等，具体内容见本书第7章。
由于HTML文件的实质是纯文本文件，因此可以用任何纯文本编辑器编辑HTML文件，如可以使用Windows系统中的“记事本”程序；编写完毕之后，可以用任意浏览器对网页进行简单的测试。
网页制作操作
使用“记事本”创建网页的步骤如下。
（1）在Windows（本书以Windows 10为例）中启动“记事本”程序。
（2）在“记事本”的窗口中输入HTML代码。
（3）输入代码结束后，选择“文件”菜单中的“保存”或“另存为”命令，弹出“另存为”对话框。
（4）在“文件名”框中输入网页的名称，注意文件名必须以.htm或.html为扩展名，如图1-5所示。如果必要，可定位到特定的目录。
图1-5 将文本文件保存为HTML文件
网页的文件名中最好只包括英文字母、数字和下画线字符（_）。在中文操作系统中，也可以使用中文字符作为文件名，但不要包括诸如引号之类的特殊字符。需要特别强调的是，文件的命名和其他需要命名的地方一样，一定要让名称具有清楚明确的含义，而不要用一些让人可能无法理解其含义的字符序列。例如，文件名xinqiji.htm很容易被人理解为是与“辛弃疾”相关的网页，而file1.htm则是个抽象的名称，令人无法判断该文件的内容。又例如，yumeiren_liyu.jpg是一个有明显含义的文件名，而1952007154940_1.jpg则是个无法判断其内容的文件名。
（5）单击“保存”按钮，即创建出了一个网页。
保存网页之后，在所选择的文件夹中将包含我们所创建的网页文件。该网页文件名称左边有一个
图标（或者是其他当前计算机上默认浏览器的图标），表示可以由Chrome将其打开。找到刚创建的网页文件并双击，则可以自动启动Chrome浏览器，此时所创建网页中的内容将在浏览器中显示。
一般情况下，浏览器可以正确显示所有HTML代码。如果浏览器不能按照我们的预想进行显示，则表示编写的HTML代码有问题，应对代码进行修改。
最方便的修改代码方式是在网页文件名上单击鼠标右键，然后在弹出的快捷菜单中选择“打开方式>记事本”命令，如图1-6所示。此时HTML文件将在“记事本”中打开，可以在其中对代码进行编辑。更改了HTML文件之后，重新将其保存（注意只有在保存之后，所做的更改才能生效）。再次在Chrome中打开相应网页文件，则可以看到更改后的页面效果。如此反复进行，即可以正确地对网页进行测试。
图1-6 快捷菜单
除了使用像“记事本”这样的纯文本编辑器直接进行HTML代码编辑以外，制作网页时还可以使用以下两类软件工具来提高工作效率。
第一类工具叫作“HTML编辑器”。它是把HTML代码编辑工作简化的一种工具，主要适用于手动编写HTML代码的场合。常见的“HTML编辑器”包括VS Code、Notepad++、Sublime Text、UltraEdit和Xcode（适用于macOS）等。
第二类工具叫作“所见即所得的网页编辑器”。它是把HTML代码编辑工作用可视化的方式实现的一种工具。这是应用非常广泛的一类网页制作工具，尤其适合初学者使用。最常见的“所见即所得的网页编辑器”是Dreamweaver，本书将在第9章介绍如何使用它来制作网页。