网页制作教程

兰义湧 王向华 编著

内 容 简 介

本书从网页制作所涉及的背景知识出发，以图文并茂的方式，通过实例对 HTML 基础

知识进行讲解，在此基础上，对 Dreamweaver、Fireworks、Flash 等网页制作工具分别进行

了详细的介绍和说明。内容循序渐进，便于初学者逐步了解和掌握网页制作的方法和步骤。

本书注重实际动手能力的培养，以实例的形式对各知识点进行分析讲解，引导读者

更好地掌握网页制作技巧和相关工具的使用方法。

本书适合作为高等院校网页制作课程的指导教程，也可作为网页制作爱好者的参考书。

图书在版编目（CIP）数据

网页制作教程 / 兰义湧, 王向华编著. — 北京 :

中国铁道出版社, 2015.6

ISBN 978-7-113-20469-3

Ⅰ. ①网… Ⅱ. ①兰… ②王… Ⅲ. ①网页制作工具

－教材 Ⅳ. ①TP393.092

中国版本图书馆 CIP 数据核字(2015)第 115649 号

书 名：网页制作教程

作 者：兰义湧 王向华 编著

策 划：魏 娜 读者热线：400-668-0820

责任编辑：周海燕 贾淑媛

封面设计：刘 颖

封面制作：白 雪

责任校对：汤淑梅

责任印制：李 佳

出版发行：中国铁道出版社（100054，北京市西城区右安门西街 8 号）

网 址：http:// www.51eds.com

印 刷：北京鑫正大印刷有限公司

版 次：2015 年 6 月第 1 版 2015 年 6 月第 1 次印刷

开 本：787 mm×960 mm 1/16 印张：12.5 字数：238 千

书 号：ISBN 978-7-113-20469-3

定 价：25.00 元

版权所有 侵权必究

凡购买铁道版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话：（010）63550836

打击盗版举报电话：（010）51873659

前 言

foreword

随着个人计算机的普及和计算机网络的广泛应用，基于互联网的万维网以超乎寻常

的速度蓬勃发展，在短短的二十多年里，已渗透到了人类社会的方方面面，造就了知识

大爆炸的信息时代。在万维网出现以前，人们一般通过纸质媒体（报纸、杂志、书信等）

和有声媒体（电视、广播、电话等）进行知识获取和信息交流。互联网的发展，对现今

人们的生活方式产生了巨大影响。如今，在互联网上人们不但可以浏览新闻、查阅资料、

聊天交流、玩游戏等，还可以通过互联网进行商品交易、网上办公、网上购物等，这些

功能给人们的现实生活带来了极大的便利。

在这种背景下，了解和掌握网页的设计与制作便成了当下许多人的愿望，为此，我

们编写了此教程，希望可以引导对网页制作感兴趣的朋友了解网页设计的基本方法和步

骤。本书结合作者多年来的网页设计实践，既有基础知识，又注重实际操作，以图文并

茂的方式为初学者提供简单易懂的讲解。希望读者通过学习本书能够对网页设计有基本

了解，并可以自己动手完成网页的设计与制作。

本书共 6 章：

第 1 章 网页设计基础。介绍了网页设计的一些基础知识，对互联网（Internet）、万

维网（WWW）进行了比较详细的介绍，同时对于本教程将要涉及的一些背景知识也给予

了介绍，其中包括 HTML、URL、HTTP、IP 地址、DNS 以及浏览器、Web 服务器等；

分析了网页的特征、网页的基本元素和网页设计的基本原则；对一些常用的网页制作工

具和辅助工具也做了简要介绍。

第 2 章 HTML 简介。主要介绍了 HTML 的基本概念及其语法。HTML 标记是 HTML

语言的基础。通过介绍 HTML 标记符，使读者基本了解和掌握使用 HTML 设计和制作网

页（包括文字、图像、链接、表格、表单、框架等）的方法。

第 3 章 Dreamweaver 入门。本章主要介绍 Dreamweaver CS5 的新增特性、工作界

面、站点设置及建立等，通过本章的学习，读者可以对 Dreamweaver 的功能有一个全面

的了解。

第 4 章 Dreamweaver 使用详解。本章详细介绍了利用 Dreamweaver 创建站点及文

档的方法，通过本章的学习，读者可以较为熟练地创建各种布局的页面。

第 5 章 Fireworks 制作图片。本章主要介绍了 Fireworks 基础知识，主要内容包括

文本的编辑与运用、编辑图像、Web 图像处理和图像优化与导出。

第 6 章 Flash 制作动画。本章从动画基本概念入手，讲述了 Flash CS5 中主要面板

的使用，以实例讲述了基本类型动画的制作方法，这也是本章的重点内容。Flash 动画以

其体积小、交互功能强而广为流行，但制作动画时也必须对动画进行优化，尽可能将其

尺寸减小，以适应不同的网络环境。

本书主要有如下特点：

（1）注重背景知识。网页制作看似简单，但如果要制作一个高质量的网页，还需要

有一定的背景知识。

（2）结构清晰。首先介绍了网页制作的基础，之后主要对网页制作工具进行了详细

的讲解。

（3）图文并茂。本书以图文并茂的方式为初学者提供简单易懂的讲解。

本书由兰义湧、王向华编著。在编写过程中得到了学校同事、出版社编辑的大力支

持，在此一并表示感谢。编者力求在编写过程中严谨细致、精益求精，但由于水平有限，

书中难免有不足之处，敬请读者谅解，同时欢迎广大读者批评指正。

编者

2015 年 5 月

目 录

contents

第 1 章 网页设计基础 ........................................................................................ 1

1.1 Internet 与 WWW ................................................................................................... 1

1.1.1 Internet 的概念........................................................................................... 1

1.1.2 WWW 概述 ................................................................................................ 2

1.1.3 网页和网站................................................................................................ 5

1.1.4 万维网的运行原理和流程 ......................................................................... 5

1.2 背景知识介绍........................................................................................................ 6

1.2.1 IP 地址....................................................................................................... 6

1.2.2 DNS 域名系统............................................................................................ 9

1.2.3 浏览器 ......................................................................................................11

1.2.4 Web 服务器...............................................................................................12

1.3 网页设计的基础知识 ...........................................................................................14

1.3.1 网页的基本特征 .......................................................................................14

1.3.2 网页的基本构成元素................................................................................15

1.3.3 网页设计的基本原则................................................................................17

1.4 网页制作工具概述 ...............................................................................................19

1.4.1 网页设计的常用工具................................................................................19

1.4.2 网页设计的辅助工具................................................................................20

本章小结......................................................................................................................20

习题 .............................................................................................................................21

第 2 章 HTML 简介 .......................................................................................... 23

2.1 HTML 基本概念....................................................................................................23

2.2 HTML 文档结构....................................................................................................23

2.2.1 HTML 文档基本结构 ................................................................................23

2.2.2 编写第一个 HTML 页面 ...........................................................................24

2.3 HTML 基础标记....................................................................................................25

2.3.1 网页头部标记 ...........................................................................................25

2.3.2 文档主体标记 ...........................................................................................27

2 网页制作教程

2.3.3 段落标记...................................................................................................30

2.3.4 图片标记...................................................................................................31

2.3.5 超链接标记...............................................................................................32

2.3.6 列表标记...................................................................................................33

2.3.7 表单标记...................................................................................................35

2.3.8 表格标记...................................................................................................38

2.3.9 框架标记...................................................................................................41

2.3.10 其他一些常用标记 .................................................................................42

本章小结......................................................................................................................45

习题 .............................................................................................................................45

第 3 章 Dreamweaver 入门 .............................................................................. 48

3.1 Dreamweaver 基础.................................................................................................48

3.1.1 Dreamweaver 概述 .....................................................................................48

3.1.2 Dreamweaver 工作界面 .............................................................................49

3.1.3 Dreamweaver 创建 Web 站点的流程 .........................................................50

3.1.4 了解工作区...............................................................................................52

3.1.5 设置 Dreamweaver 站点 ............................................................................54

3.1.6 创建和打开文档 .......................................................................................55

3.2 Dreamweaver 建站实例 .........................................................................................56

3.2.1 设置站点和项目文件................................................................................56

3.2.2 创建基于表格的页面布局 ........................................................................58

3.2.3 向页面添加内容 .......................................................................................59

3.2.4 使用 CSS 设置页面格式 ..........................................................................61

3.2.5 发布站点...................................................................................................64

本章小结......................................................................................................................67

习题 .............................................................................................................................68

第 4 章 Dreamweaver 使用详解 ....................................................................... 69

4.1 Dreamweaver 的站点管理 .....................................................................................69

4.1.1 创建站点...................................................................................................69

4.1.2 管理站点...................................................................................................69

4.2 创建和编辑文档...................................................................................................73

4.2.1 创建文档...................................................................................................73

目录 3

4.2.2 设置页面属性 ...........................................................................................73

4.3 向页面添加内容...................................................................................................74

4.3.1 插入文本...................................................................................................74

4.3.2 插入特殊字符 ...........................................................................................75

4.3.3 插入图像...................................................................................................76

4.3.4 插入多媒体对象 .......................................................................................77

4.3.5 建立超链接...............................................................................................80

4.4 页面布局 ..............................................................................................................82

4.4.1 使用表格...................................................................................................83

4.4.2 使用布局视图和扩展表格视图 ................................................................86

4.4.3 使用框架...................................................................................................91

4.5 网页模板与网页样式 ...........................................................................................95

4.5.1 模板及样式的作用 ...................................................................................95

4.5.2 使用模板...................................................................................................95

4.5.3 CSS 样式基础..........................................................................................102

4.5.4 使用 Dreamweaver 设计 CSS ...................................................................104

4.6 层与行为 ............................................................................................................116

4.6.1 层的基本概念 .........................................................................................116

4.6.2 层的基本操作 .........................................................................................116

4.6.3 层的属性设置 .........................................................................................118

4.6.4 认识“行为” .........................................................................................122

4.6.5 Dreamweaver 的内置“行为” ................................................................123

4.7 建立表单 ............................................................................................................130

4.7.1 创建表单.................................................................................................130

4.7.2 添加表单域.............................................................................................131

4.7.3 处理表单.................................................................................................135

4.7.4 表单制作实例 .........................................................................................135

4.8 测试和发布网站.................................................................................................139

4.8.1 测试网站.................................................................................................139

4.8.2 发布网站.................................................................................................141

本章小结....................................................................................................................144

习题 ...........................................................................................................................144

4 网页制作教程

第 5 章 Fireworks 制作图片 ........................................................................... 146

5.1 Fireworks 基础 ....................................................................................................146

5.1.1 位图与矢量图 .........................................................................................146

5.1.2 Fireworks 工作界面.................................................................................147

5.1.3 Fireworks 基本操作.................................................................................148

5.1.4 常用面板介绍 .........................................................................................148

5.2 文本的编辑与运用 .............................................................................................149

5.3 编辑图像 ............................................................................................................150

5.3.1 矢量图编辑.............................................................................................150

5.3.2 位图编辑.................................................................................................152

5.4 Web 图像处理 ....................................................................................................154

5.4.1 图像热点.................................................................................................154

5.4.2 图像切片.................................................................................................154

5.4.3 制作按钮.................................................................................................155

5.4.4 制作弹出菜单 .........................................................................................158

5.5 图像优化与导出.................................................................................................159

5.5.1 优化图像.................................................................................................159

5.5.2 导出图像.................................................................................................160

5.5.3 Fireworks 与 Dreamweaver 的协作...........................................................162

本章小结....................................................................................................................163

习题 ...........................................................................................................................163

第 6 章 Flash 制作动画 .................................................................................. 165

6.1 Flash 基础...........................................................................................................165

6.1.1 Flash CS5 简介 ........................................................................................165

6.1.2 Flash CS5 工作界面 ................................................................................165

6.2 Flash 设计基础 ...................................................................................................167

6.2.1 时间轴 ....................................................................................................167

6.2.2 帧 ............................................................................................................168

6.2.3 图层 ........................................................................................................168

6.2.4 时间轴特效.............................................................................................169

6.2.5 常用面板.................................................................................................170

6.3 Flash 简单动画制作 ...........................................................................................170

目录 5

6.3.1 Flash 动画的基本类型 ............................................................................170

6.3.2 制作动画的一般过程..............................................................................171

6.4 创建动画 ............................................................................................................171

6.4.1 逐帧动画.................................................................................................171

6.4.2 补间（运动补间）动画..........................................................................172

6.4.3 补间（形状补间）动画..........................................................................175

6.4.4 轨迹动画.................................................................................................176

6.4.5 蒙版动画.................................................................................................178

6.5 声音的使用 ........................................................................................................182

6.5.1 声音类型.................................................................................................182

6.5.2 声音导入及属性设置..............................................................................182

6.6 影片优化与发布.................................................................................................183

6.6.1 优化影片.................................................................................................184

6.6.2 发布影片.................................................................................................184

本章小结....................................................................................................................187

习题 ...........................................................................................................................188

参考文献 ......................................................................................................... 189

第 1 章 网页设计基础

在网页出现以前，人们一般通过纸质媒体（报纸、杂志、书信等）和有声媒体（电

视、广播、电话等）进行知识获取和信息交流。进入 20 世纪 90 年代，随着网络技术的

发展和个人计算机的普及，一种新型的信息呈现方式应运而生，那就是万维网（World

Wide Web，WWW）。自它诞生之日起，即以超乎寻常的速度蓬勃发展，在短短的二十多

年里，便渗透到了人类社会的方方面面，造就了知识大爆炸的信息时代。而组成万维网

的基本单元便是一个个网页。为此，本章就网页涉及的一些背景知识进行介绍。

1.1 Internet 与 WWW

1.1.1 Internet 的概念

1．Internet 简介

Internet，又称因特网，是由网络与网络相互连通而形成的庞大网络，这些网络以一

组通用的协议为基础，互连成逻辑上单一的国际性网络。这种将计算机网络互相联接在

一起的方法称为“网络互联”，在此基础上发展出覆盖全世界的全球性网络，称为互联网，

即互联网是“网络的网络”。在这个网络中有交换机、路由器等网络设备，也包含各种不

同的连接链路、种类繁多的服务器和数不尽的计算机和终端设备。

互联网始于 1969 年的美国，其前身是 ARPANET（阿帕网，美国国防部研究计划署网络），

起初服务于美国军方，后来又成为连接大学及高等院校计算机的学术系统，逐步发展成为一个

覆盖五大洲 150 多个国家的开放型全球计算机网络系统，拥有许多服务商。普通计算机用户只

需要一台个人计算机，用电话线通过调制解调器和因特网服务商连接，便可进入互联网。

在如今的日常生活中，互联网已经渗透到人们生活中的方方面面，使用互联网可以

将信息瞬间发送给千里之外的人们，它是信息社会的基础。

2．Internet 运行原理

互联网是一个庞大的计算机网络，可如何实现网络中计算机之间的数据传输呢？

这主要依赖于 Internet 专门使用的一种计算机网络通信协议 TCP/IP，通过该协议可以

2 网页制作教程

确保数据安全、可靠地到达指定的目的地。TCP/IP 分两部分：TCP（Transmission Control

Protocol，传输控制协议）和 IP（Internet Protocol，网间协议），TCP/IP 所采用的通信

方式是分组交换。所谓分组交换，简单说，就是数据在传输时分成若干段，每个数据

段称为一个数据包。TCP/IP 的基本传输单位就是数据包，TCP 和 IP 既可以联合使用，

也可以与其他协议一起工作，它们在数据传输过程中主要完成以下功能：

① 首先由 TCP 把数据分成若干数据包，给每个数据包写上序号，以便接收端能够根

据序号将数据还原成原来的格式。

② IP 给每个数据包写上发送主机和接收主机的地址，一旦写上源地址和目的地址，数

据包就可以在物理网上传送了。IP 还具有利用路由算法进行路由选择的功能。

③ 这些数据包可以通过不同的传输途径（路由）进行传输，由于路径不同，加上其

他的原因，可能出现顺序颠倒、数据丢失、数据失真甚至重复的现象。这些问题都由 TCP

来处理，它具有检查和处理错误的功能，必要时还可以请求发送端重发。

简言之，IP 负责数据的传输，而 TCP 负责数据的可靠性。为此，一台计算机若想要

加入到互联网中，成为互联网中的一员，就必须遵循 TCP/IP，否则它将无法与其他计算

机进行数据交互。

3．互联网的应用

随着互联网的普及，它对现今人们的生活方式产生了巨大的影响。如今，在互联网

上，人们不但可以浏览新闻、查阅资料、聊天交流、玩游戏等，而且可以通过互联网进

行商品交易、网上办公、网上购物等，这些功能给人们的现实生活带来了极大的便利。

从目前互联网服务功能来划分，主要有以下功能类别：

① 通信（微信、QQ、E-mail 等）。

② 社交（Facebook、微博、人人网、QQ 空间、博客、论坛等）。

③ 休闲娱乐（网游、优酷视频网等）。

④ 新闻资讯（腾讯网、网易新闻网、新浪网、搜狐网等信息门户网站）。

⑤ 网上贸易（网购、售票、转账汇款、工农贸易）。

⑥ 资源共享（各类信息资源的下载）。

⑦ 网络计算（大数据、云服务等）。

1.1.2 WWW 概述

1．WWW 简介

WWW 是环球信息网的缩写（亦作 Web、WWW、W3，英文全称为 World Wide Web），

中文译名为“万维网”或“环球网”等，常简称为 Web。万维网依托于 Internet，是 Internet

第 1 章 网页设计基础 3

提供的一项网络信息服务。

万维网从运行结构上分为 Web 客户端和 Web 服务器程序。Web 客户端（浏览器）

可以访问浏览 Web 服务器上的资源。 Web 是一个由许多互相链接的超文本组成的系统，

通过互联网访问，在这个系统中，每个有用的事物，称为“资源”，并且由一个全局的

“统一资源定位符”（Uniform Resource Identifier，URI）标识，这些资源通过超文本传输

协议（Hypertext Transfer Protocol，HTTP）来传送给客户端用户，而后者通过单击链接

来获取资源。

万维网的发明者蒂姆·伯纳斯·李在 1994 年 10 月于麻省理工学院（MIT）计算机科

学实验室成立了万维网联盟（World Wide Web Consortium，简称 W3C），又称 W3C 理事会，

主要负责万维网标准和规则的制定。

2．超文本传输协议（HTTP）

HTTP 是 Hypertext Transfer Protocol 的缩写，即超文本传输协议。 顾名思义，HTTP

提供了访问超文本信息的功能，是 Web 浏览器和 Web 服务器之间的应用层通信协议。

HTTP 是分布式的、通用的、面向对象的协议。通过扩展命令，它还可以用于类似的任务，

如域名服务或分布式面向对象系统。万维网使用 HTTP 传输各种超文本页面和数据。

HTTP 会话过程包括 4 个步骤：

① 建立连接：客户端的浏览器向服务器端发出建立连接的请求，服务器端给出响应

就可以建立连接了。

② 发送请求：客户端按照协议的要求通过连接向服务器端发送自己的请求内容。

③ 给出应答：服务器按照客户端的要求给出应答，把结果（HTML 文件）返回给客

户端。

④ 关闭连接：客户端接到应答后关闭连接。

HTTP 是基于 TCP/IP 的协议，它不仅保证正确传输超文本文档，还确定传输文档中

的哪一部分，以及哪部分内容首先显示等。

3．统一资源定位符（URL）

统一资源定位符（Uniform Resource Locator，URL）是一个负责给万维网资源进行准

确定位的系统，有时又称“统一资源标识符”。每个 Web 资源都必须有唯一的 URL，它

包含的信息指出资源的位置以及浏览器应该怎么处理它。它最初是由蒂姆·伯纳斯·李

发明用来作为万维网的地址，现在已经被万维网联盟编制为互联网标准 RFC1738。

基本的 URL 应该包含模式（或称协议）、服务器名称（或 IP 地址）、路径和文件名等

信息，基本结构如图 1-1 所示。

4 网页制作教程

图 1-1 URL 的基本结构

（1）第一部分

模式/协议（scheme）：它告诉浏览器如何处理将要打开的文件。最常用的模式是超文

本传输协议（HTTP），其他协议如下：

https：用安全套接字传送的超文本传输协议。

ftp：文件传输协议。

mailto：电子邮件地址。

file：当地计算机或网上分享的文件。

news：Usenet 新闻组。

gopher：Gopher 协议。

telnet：Telnet 协议。

（2）第二部分

文件所在服务器的名称或 IP 地址，后面是到达这个文件的路径和文件本身的名称。

服务器的名称或 IP 地址后面有时还跟一个冒号和一个端口号（如:8080）。路径部分包含

等级结构的路径定义，一般来说，不同部分之间以斜线（/）分隔，有时候，URL 以斜杠

“/”结尾，而没有给出文件名，在这种情况下，URL 引用路径中最后一个目录中的默认

文档（如 index.html 或 default.htm）。

如对于 http://www.pku.edu.cn/about/bdjj.jsp 这个 URL 来说，http://表明了协议类型是

HTTP，www.pku.edu.cn 是服务器名称（也称域名），about/bdjj.jsp 指明了路径/文件名。客

户端用户通过这个 URL 可以准确找到相关的文件资源。

4．超文本标记语言（HTML）

HTML 的英文全称为 Hypertext Markup Language，即超文本标记语言，是万维网资源

呈现给客户端用户的一种表现方式。“超文本”就是指除了文字外，页面还可以包含图片、

链接，以及音乐、程序等非文字元素。超文本标记语言是标准通用标记语言（SGML）下

的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示在网页中的各个

部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器

如何显示其中的内容（如：文字如何处理、布局如何安排、图片如何显示等）。浏览器按

顺序执行网页文件，然后根据标记符解释和显示其标记的内容，对书写错误的标记将不

第一部分 第二部分

协议类型:// 服务器名称:端口号/路径/文件名

第 1 章 网页设计基础 5

指出其错误，也不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出

错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解

释，因而可能会有不同的显示效果。

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件嵌入，

这也是万维网（WWW）盛行的原因之一，其主要特点如下所述：

① 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

② 可扩展性：超文本标记语言的广泛应用带来了加强功能、增加标记符等要求，超

文本标记语言采取子类元素的方式，为系统扩展带来保证。

③ 平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网盛行的另

一个原因。

④ 通用性：HTML 是网络的通用语言，是一种简单、通用的标记语言。它允许网页

制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无

论使用的是什么类型的计算机或浏览器。

1.1.3 网页和网站

网页是网站的基本信息单位，是 WWW 的基本文档。它由文字、图片、动画、声音

等多种媒体信息以及链接组成，是用 HTML 编写的。通过链接实现与其他网页或网站的

关联和跳转，网页文件的扩展名一般为.html、.htm、.asp、.aspx、.php 或.jsp 等。

网站就是指在互联网上，根据一定的规则，使用 HTML 等语言制作的用于展示特定

内容的相关网页的集合，是由众多不同内容的网页构成，网页的内容可体现网站的全部

功能。通常把进入网站首先看到的网页称为首页或主页。新浪、网易、搜狐就是国内比

较知名的大型门户网站。人们可以通过浏览器来访问网站，获取自己需要的资讯（信息）

或者享受网站提供的其他服务。

1.1.4 万维网的运行原理和流程

当我们访问万维网上的网页时，到底是经过了怎样的流程呢？进入万维网上的一

个网页，或者访问其他网络资源时，通常首先要在浏览器上输入想访问网页的统一资

源定位符 URL，或者通过超链接方式链接到那个网页或网络资源。之后，根据 URL

的服务器名称内容，域名服务器将其解析成网络可以识别的对应 IP 地址。接下来根

据网页文件名称向解析到的 IP 地址所在服务器发送一个 HTTP 请求。在通常情况下，

HTML 文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户浏览

器。浏览器接下来的工作是把 HTML、CSS 和其他接收到的文件所描述的内容，加上

图像、链接和其他必须的资源，显示给用户。这些就构成了所看到的“网页”。

6 网页制作教程

总体来说，WWW 采用客户机/服务器（B/S）的工作模式，工作流程具体如下：

① 用户使用浏览器或其他程序建立客户机与服务器连接，并发送浏览请求。

② Web 服务器接收到请求后，返回信息到客户机并呈现给用户。

③ 通信完成，关闭连接。

1.2 背景知识介绍

1.2.1 IP 地址

1．IP 地址的概念

在了解 IP 地址之前，先介绍一下 IP。IP 是 Internet Protocol 的缩写，意思是“网

络之间互连的协议”，也就是为计算机网络相互连接进行通信而设计的协议。在互联

网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则。任何厂家生

产的计算机系统，只要遵守 IP 就可以与互联网互连互通。正是因为有了 IP，互联网

才得以迅速发展成为世界上最大的、开放的计算机通信网络。因此，IP 也可以叫作“互

联网协议”。

IP 中还有一个非常重要的内容，那就是给互联网上的每台计算机和其他设备都规定

了一个唯一的地址，即 IP 地址（Internet Protocol Address），它是一种在 Internet 上给主机

编址的方式，也称为网际协议地址。常见的 IP 地址，分为 IPv4 与 IPv6 两大类（如不特

别标示，本教程所说的 IP 地址一般指 IPv4 地址）。

IP 地址就像是我们的家庭住址一样，如果你要写信给一个人，你就要知道他（她）

的地址，这样邮递员才能把信送到。计算机发送信息就好比是邮递员，它必须知道唯一

的“家庭地址”才不至于把信送错人家。只不过我们的地址是使用文字来表示的，而计

算机的地址用二进制数字来表示。好比我们的电话通信系统，在电话通信中，电话用户

是靠电话号码来识别的，同样，在网络中为了区别不同的计算机，也需要给计算机指定

一个连网专用号码，这个号码就是“IP 地址”。

IPv4 地址是一个 32 位的二进制数，通常被分割为 4 个“8 位二进制数”（也就是 4

个字节）。IP 地址通常用“点分十进制”表示成（a.b.c.d）的形式，其中，a,b,c,d 都是 0

到 255 之间的十进制整数。如：点分十进制 IP 地址 192.168.1.1，实际上是 32 位二进制

数 11000110.10101000.00000001.00000001。

2．IP 地址编址方案

根据 IP 地址的概念可知，IPv4 地址的范围用点分十进制可表示为 0.0.0.0 到

255.255.255.255，一共有 232 个 IP 地址。为了有效地利用这些 IP 地址资源，相关机构制

第 1 章 网页设计基础 7

定了 IP 地址编址方案，将 IP 地址分成了网络号和主机号两部分，设计者就必须决定每部

分包含多少位。网络号的位数直接决定了可以分配的网络数（计算方法：2 网络号位数-2）；

主机号的位数则决定了网络中最大的主机数（计算方法：2 主机号位数

-2）。然而，由于整个

互联网所包含的网络规模可能比较大，也可能比较小，最后选择了一种灵活的方案：将

IP 地址空间划分成不同的类别，每一类具有不同的网络号位数和主机号位数，即将 IP 地

址空间划分为了 A、B、C、D、E 五类，其中 A、B、C 是基本类，D、E 类作为多播和保

留使用。

（1）A 类 IP 地址

一个 A 类 IP 地址是指，在 IP 地址的四段号码中，第一段号码为网络号码，剩下的

三段号码为本地计算机的号码。如果用二进制表示 IP 地址的话，A 类 IP 地址就由 1 字节

的网络地址和 3 字节主机地址组成，同时网络地址的最高位必须是“0”。A 类 IP 地址中

网络的标识长度为 8 位，主机标识的长度为 24 位，A 类网络地址数量较少，有 126 个网

络 ， 每 个网络可以 容纳主 机 数 达 1 600 多 万 台 。 A 类 IP 地 址 范 围 为 1.0.0.0 到

126.255.255.255。最后一个是广播地址。A 类 IP 地址的子网掩码为 255.0.0.0，每个网络

支持的最大主机数为 2563

-2=16 777 214 台。

（2）B 类 IP 地址

一个 B 类 IP 地址是指，在 IP 地址的四段号码中，前两段号码为网络号码。如果用

二进制表示 IP 地址的话，B 类 IP 地址就由 2 字节的网络地址和 2 字节主机地址组成，网

络地址的最高位必须是“10”。B 类 IP 地址中网络的标识长度为 16 位，主机标识的长度

也为 16 位，B 类网络地址适用于中等规模的网络，有 16 384 个网络，每个网络所能容纳

的计算机数为 6 万多台。B 类 IP 地址范围从 128.0.0.0 到 191.255.255.255。最后一个是广

播 地 址 。 B 类 IP 地 址 的 子 网 掩 码 为 255.255.0.0 ， 每 个网络 支 持 的 最 大 主 机数为

2562

-2=65 534 台。

（3）C 类 IP 地址

一个 C 类 IP 地址是指，在 IP 地址的四段号码中，前三段号码为网络号码，剩下的

一段号码为本地计算机的号码。如果用二进制表示 IP 地址，C 类 IP 地址就由 3 字节的网

络地址和 1 字节主机地址组成，网络地址的最高位必须是“110”。C 类 IP 地址中网络的

标识长度为 24 位，主机标识的长度为 8 位，C 类网络地址数量较多，有 209 万余个网络。

适用于小规模的局域网络，每个网络最多只能包含 254 台计算机。C 类 IP 地址范围为

192.0.0.0 到 223.255.255.255。C 类 IP 地址的子网掩码为 255.255.255.0，每个网络支持的

最大主机数为 256-2=254 台。

（4）D 类 IP 地址

D 类 IP 地址在历史上被叫作多播地址（Multicast Address），即组播地址。在以太网

8 网页制作教程

中，多播地址命名了一组应该在这个网络中接收到一个分组的站点。多播地址的最高位

必须是“1110”，范围从 224.0.0.0到239.255.255.255。

（5）E 类 IP 地址

IP 地址中凡是以“11110”开头的 E 类 IP 地址都保留用于将来和实验使用，范围从

240.0.0.0 到 255.255.255.254。

表 1-1 所示为 IP 地址各类别网络数和主机数列表。

表 1-1 IP 地址各类别网络数和主机数列表

IP 地址分类 第一字节范围 固定最高位 网络位 网络数 主机位 主机数

A 0～127 0 8 126 24 16 777 214

B 128~191 10 16 16 384 16 65 534

C 192~223 110 24 2 097 152 8 254

D 224~239 1110 组播地址

E 240～255 11110 保留给实验用

（6）特殊 IP 和私有 IP

每一个字节都为0的地址（0.0.0.0）对应于当前主机。IP 地址中的每一个字节都为 1

的 IP 地址（255.255.255.255）是当前子网的广播地址。IP 地址中不能以十进制“127”作

为开头，该类地址中数字 127.0.0.1 到 127.255.255.255 用于回路测试，如：126.0.0.1 可以

代表本机 IP 地址，用“http://126.0.0.1”就可以测试本机中配置的 Web 服务器。

在 IP 地址 3 种基本类型里，各保留了 3 个区域作为私有地址，其地址范围如下：

① A类地址：10.0.0.0～10.255.255.255

② B 类地址：172.16.0.0～172.31.255.255

③ C 类地址：192.168.0.0～192.168.255.255

这些私有 IP 地址只能在某个机构或单位内部使用，无法通过网际路由与远程的主机

进行连接通信。

3．下一代 IP 地址：IPv6

现有的互联网是在 IPv4 协议的基础上运行的。IPv6 是下一版本的互联网协议，也

可以说是下一代互联网的协议，它的提出最初是因为随着互联网的迅速发展，IPv4 定

义的有限地址空间将被耗尽，而地址空间的不足必将妨碍互联网的进一步发展。为了

扩大地址空间，拟通过 IPv6 重新定义地址空间。IPv4 采用 32 位地址长度，只有大约

43 亿个地址，在 2011 年 2 月 3 日 IPv4 已分配完毕，而 IPv6 采用 128 位地址长度，几

乎可以不受限制地提供地址。按保守方法估算 IPv6 实际可分配的地址，整个地球的每

平方米面积上仍可分配 1 000 多个地址。在 IPv6 的设计过程中除解决了地址短缺问题

第 1 章 网页设计基础 9

以外，还考虑了在 IPv4 中解决不好的其他一些问题，主要有端到端 IP 连接、服务质

量、安全性、多播、移动性、即插即用等。

与 IPv4 相比，IPv6 主要有如下一些优势。第一，明显地扩大了地址空间。IPv6 采用

128 位地址长度，几乎可以不受限制地提供 IP 地址，从而确保了端到端连接的可能性。

第二，提高了网络的整体吞吐量。由于 IPv6 的数据包可以远远超过 64 KB，应用程序可

以利用最大传输单元，获得更快、更可靠的数据传输，同时在设计上改进了选路结构，

采用简化的报头定长结构和更合理的分段方法，使路由器加快数据包处理速度，提高了

转发效率，从而提高网络的整体吞吐量。第三，使得整个服务质量得到很大改善。报头

中的业务级别和流标记通过路由器的配置可以实现优先级控制和服务质量保障，从而极

大地改善了 IPv6 的服务质量。第四，安全性有了更好的保证。采用网际协议安全（IPSec）

可以为上层协议和应用提供有效的端到端的安全保证，能提高在路由器水平上的安全性。

第五，支持即插即用和移动性。设备接入网络时通过自动配置可自动获取 IP 地址和必要

的参数，实现即插即用，简化了网络管理，易于支持移动结点。而且 IPv6 不仅从 IPv4 中

借鉴了许多概念和术语，它还定义了许多移动 IPv6 所需的新功能。第六，更好地实现了

多播功能。在 IPv6 的多播功能中增加了“范围”和“标志”，限定了路由范围和可以区分

永久性与临时性地址，更有利于多播功能的实现。

随着互联网的飞速发展和互联网用户对服务水平要求的不断提高，IPv6 在全球将

会越来越受到重视。但实际上，目前并不急于推广 IPv6，只需在现有的 IPv4 基础上

将 32 位扩展 8 位到 40 位，即可解决 IPv4 地址不够的问题，这样一来可用地址数就扩

大了 256 倍。

1.2.2 DNS 域名系统

互联网中的主机都拥有一个自己的 32 位二进制 IP 地址，虽然用点分十进制法

进行了简化， 类似 210.31.1.10，但这还是 不容易记住。 如果能够用一个具有 一定意

义的名字来表示该 IP 主机，那就比较方 便记忆了 。正如我们每个 人都有唯一的身份

证号码一样，我们一般不去记忆这 些号码，而是记住这个人的姓名，若想知道某个

人的身份证号码，则可以通过一套户籍管理系统来查询姓名和 身份证号码之间的对

应关系。在互联网中，也建立了 一套这样的系统，建立主机名和其 IP 之间的对应关

系，由此便产生 了域名服务系统（Domain Name Service），域名就 是指主机在互联网

中 的名称。

互联网上的域名就相当于现实生活中的门牌号码一样，可以在纷繁芜杂的网络世界

里准确无误地把我们指引到要访问的站点。在互联网发展之初并没有域名，有的只是 IP

地址。由于当时互联网主要应用在科研领域，使用者非常少，所以记忆这样的数字并不

10 网页制作教程

是非常困难。但是随着时间的推移，连入互联网的计算机越来越多，需要记忆的 IP 地址

也越来越多，记忆这些数字串变得越来越困难，于是域名应运而生。域名就是对应于 IP

地 址 的用于在互联网上 标 识机器的有 意 义 的 字 符 串 。 例 如 CNNIC 的 域 名

WWW.CNNIC.NET.CN，比起 IP 地址而言就更形象，也更容易记忆。

为了便于大家进一步了解域名的实质，有必要在这里谈谈域名的体系结构。从

WWW.CNNIC.NET.CN 这个域名来看，它是由几个不同的部分组成的，这几个部分彼此

之间具有层次关系。其中最后的.CN 是域名的第一层，.NET 是第二层，.CNNIC 是真正

的域名，处在第三层，当然还可以有第四层，如：INNER.CNNIC.NET.CN，至此可以看

出，域名从后到前的层次结构类似于一个倒立的树形结构。其中第一层的.CN 叫做地理

顶级域名。

目前互联网上的域名体系中共有三类顶级域名。

一 是地理顶级域名，共有 243 个国家和地区的 代码，例如.CN 代表中国，.JP 代

表日本，.UK 代表英国等。

另一类是类别顶级域名，共有 7 个 ，.COM（公司），.NET（网络机构），.ORG

（ 组织机构），.EDU（美国教育），.GOV（美国政府部门），.ARPA（美国军方），.INT

（国际组织）。由于互联网最初是在美国发展起来的，所以最初 的域名体系也主要供

美国使用，所以.GOV，.EDU，.ARPA 虽然都是顶级域名，但却是美国使用的，只

有.COM，.NET，.ORG 成 为供全球使用的顶级域名。 相对于地理顶级域名来说， 这

些顶级域名都是根据不同的类别来区分的 ，所以称之为类别顶级域名。

随着互联网的不断发展，新的顶级域名也根据实际需要不断被扩充到现有的域名体

系中来。新增加的顶级域名是.BIZ（商业），.COOP（合作公司），.INFO（信息行业），.AERO

（航空业），.PRO（专业人士），.MUSEUM（博物馆行业），.NAME（个人）。

在这些顶级域名下，还可以再根据需要定义次一级的域名，如在我国的顶级域名.CN

下又设立了.COM，.NET，.ORG，.GOV，.EDU，以及我国各个行政区划的字母代表，如.BJ

代表北京，.SH 代表上海等。

图 1-2 所示为国际域名结构示意图。

实际上，DNS 是一种能够实现名字解析的分层结构数据库系统，它有各基本组成部

分：域名空间、域名服务器和地址转换请求程序。所谓域名服务器实际上就是装有域名

系统的主机。当域名服务器收到本地某台主机发来的地址转换请求时，先判断该地址是

否属于本地子域，若是本地子域的域名，则直接从库中取出对应地址，否则，将地址转

换请求转给上一层域名服务器，并接收上一层域名服务器送来的对应地址。有了域名服

务系统，凡是域名空间中有定义的域名，都可以有效地转换为 IP 地址。同样，IP 地址也

可以通过 DNS 转换为域名。

第 1 章 网页设计基础 11

图 1-2 国际域名结构示意图

1.2.3 浏览器

对于浏览器，相信大家都不会陌生，只要有上网经历的朋友都应该使用过某种浏览

器。浏览器是指可以显示由 HTML 编写的网页文件，并让用户与这些文件交互的一种软

件，它是万维网最重要的客户端软件。

大部分浏览器支持除了 HTML 之外的各种格式，例如 JPEG、PNG、GIF 等图像格式，

并且能够扩展支持众多的插件（plug-ins）。另外，许多浏览器还支持其他的 URL 类型

及其相应的协议，如 FTP、Gopher、HTTPS（HTTP 协议的加密版本）。HTTP 内容类型

和 URL 协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。

进入 21 世纪，随着互联网的发展，浏览器作为互联网的入口，已经成为各大软件巨

头的必争之地，竞争十分激烈。国内网民计算机上常见的网页浏览器有 Internet Explorer、

Google Chrome、Firefox、360 浏览器、QQ 浏览器、Safari、Opera、百度浏览器、搜狗浏览

器、猎豹浏览器、UC 浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到

的客户端程序。以下就几种主要的浏览器进行简要介绍。

（1）Internet Explorer

Internet Explorer（IE）是微软操作系统捆绑的软件之一，大多数网民都在使用 IE，

这要感谢它对 Web 站点强大的兼容性。最新版本的 Internet Explorer 包括 Metro 界面、

HTML5、CSS3 以及大量的安全更新。

（2）Chrome

Chrome 是由 Google 公司开发的网页浏览器，浏览速度在众多浏览器中走在前列，属

…

根域名服务

地理顶级域 类别顶级域 新增顶级域

类别域名 行政区域名

.us .cn … .com .net … …

.com .net .BJ .SH …

.BIZ .IN

12 网页制作教程

于高端浏览器。Chrome 采用 BSD 许可证授权并开放源代码，开源计划名为 Chromium。

Chrome 浏览器已经成为网民最喜欢使用的浏览器之一。

（3）Firefox

Mozilla Firefox（火狐浏览器）目前是市场占有率第三的浏览器，仅次于微软的 Internet

Explorer 和 Google 的 Chrome。最新版的 Firefox 新增了类型推断，再次大幅提高了

JavaScript 引擎的渲染速度，使得很多富含图片、视频、游戏以及 3D 图片的富网站和网

络应用能够更快地加载和运行。

（4）Opera

Opera 浏览器，是一款由挪威 Opera Software ASA 公司制作的支持多页面标签式浏览

的跨平台浏览器，可以在 Windows、Mac 和 Linux 三个操作系统平台上运行。Opera 浏览

器创始于 1995 年 4 月，到 2015 年 1 月 28 日，官方发布的个人计算机用的最新版本为

Opera 27。

（5）360 浏览器

360 浏览器（360 Browser）是 360 安全中心推出的一款基于 IE 和 Chrome 双内核的浏

览器，是世界之窗开发者凤凰工作室和 360 安全中心合作的产品。它和 360 安全卫士、

360 杀毒等软件产品一同成为 360 安全中心的系列产品。360 安全浏览器拥有全国最大的

恶意网址库，采用恶意网址拦截技术，可自动拦截挂马、欺诈、网银仿冒等恶意网址。

其独创沙箱技术，在隔离模式，即使访问木马也不会感染。

（6）QQ 浏览器

QQ 浏览器（QQ Browser）是一款采用 Trident 和 Webkit 双引擎的网页浏览器。QQ 浏

览器是一款由腾讯公司自主研发的新一代浏览器，采用单核模式，集超小安装包和超强

稳定性于一身，访问网页速度也得到进一步优化。正式外发版将智能支持 IE 内核，有效

提升网页兼容性，减少系统漏洞。其目的是为用户打造一款快速、稳定、安全、网络化

的优质浏览器。目前其最新版本为 8.1。

（7）傲游浏览器

傲游浏览器（Maxthon Browser）基于 IE 内核，并在其之上有创新，其插件比 IE 更

丰富。

1.2.4 Web 服务器

Web 服务器是指安装在 Internet 上具有独立 IP 地址的计算机中，并可以向 Internet

上的客户端提供 WWW、E-mail 和 FTP 等各种 Internet 服务的服务器端软件，它能为客户

端用户的请求提供所需文档。当 Web 浏览器（客户端）连到服务器上并请求文件时，Web

服务器将处理该请求并将文件反馈到该浏览器上，附带的信息会告诉浏览器如何查看该

第 1 章 网页设计基础 13

文件（即文件类型）。Web 服务器使用 HTTP 与客户机浏览器进行信息交流。

在 UNIX 和 Linux 平台下使用最广泛的免费 Web 服务器是 Apache和Nginx 服务器，

而 Windows 平台 NT/2000/2003 使用 IIS 的 Web 服务器。在选择 Web 服务器时应考虑的本

身特性因素有：性能、安全性、日志和统计、虚拟主机、代理服务器、缓冲服务和集成

应用程序等，下面介绍几种常用的 Web 服务器。

（1）IIS

Microsoft 的 Web 服务器产品为 Internet Information Services（IIS）。IIS 是允许在公共

Intranet 或 Internet 上发布信息的 Web 服务器。IIS 是目前最流行的 Web 服务器产品之一，

很多著名的网站都是建立在 IIS 的平台上。IIS 提供了一个图形界面的管理工具，称为

Internet 服务管理器，可用于监视、配置和控制 Internet 服务。

IIS 是一种 Web 服务组件，其中包括 Web 服务器、FTP 服务器、NNTP 服务器和 SMTP

服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包

括互联网和局域网）上发布信息成了一件很容易的事。它提供 ISAPI（Intranet Server API）

作为扩展 Web 服务器功能的编程接口；同时，它还提供一个 Internet 数据库连接器，可

以实现对数据库的查询和更新。

（2）Apache

Apache 是世界上用得最多的 Web 服务器，市场占有率达 60%左右。它源于 NCSAhttpd

服务器，当 NCSA WWW 服务器项目停止后，那些使用 NCSA WWW 服务器的人们开始交

换用于此服务器的补丁，这也是 apache 名称的由来。世界上很多著名的网站都是 Apache

的产物，它的成功之处主要在于它的源代码开放、支持跨平台的应用（可以运行在几乎

所有的 UNIX、Windows、Linux 系统平台上）以及它的可移植性等方面。

（3）Tomcat

Tomcat 是一个开放源代码、运行 Servlet 和 JSP Web 应用软件的基于 Java 的 Web 应

用软件容器。Tomcat Server 是根据 Servlet 和 JSP 规范进行执行的，因此就可以说 Tomcat

Server 也实行了 Apache-Jakarta 规范，且比绝大多数商业应用软件服务器要好。

（4）kangle

kangle Web 服务器（简称：kangle）是一款跨平台、功能强大、安全稳定、易操作的

高性能 Web 服务器和反向代理服务器软件。此外，kangle 也是一款专为做虚拟主机研发

的 Web 服务器。实现虚拟主机独立进程、独立身份运行。用户之间安全隔离，一个用户

出问题不影响其他用户。安全支持 PHP、ASP、ASP.NET、Java、Ruby 等多种动态开发

语言。

（5）WebSphere

WebSphere Application Server 是一种功能完善、开放的 Web 应用程序服务器，是 IBM

14 网页制作教程

电子商务计划的核心部分，它是基于 Java 的应用环境，用于建立、部署和管理 Internet

和 Intranet Web 应用程序。这一整套产品进行了扩展，以适应 Web 应用程序服务器的需

要，范围从简单到高级，直到企业级。

（6）WebLogic

BEA WebLogic Server 是一种多功能、基于标准的 Web 应用服务器，为企业构建自己

的应用提供了坚实的基础。各种应用开发、部署所有关键性的任务，无论是集成各种系统

和数据库，还是提交服务、跨 Internet 协作，起始点都是 BEA WebLogic Server。由于它

具有全面的功能、对开放标准的遵从性、多层架构、支持基于组件的开发，基于 Internet

的企业都选择它来开发、部署最佳的应用。

（7）JBoss

是一个基于 Java EE 的开放源代码的应用服务器。JBoss 代码遵循 LGPL 许可，可以

在任何商业应用中免费使用，而不用支付费用。JBoss 是一个管理 EJB 的容器和服务器，

支持 EJB 1.1、EJB 2.0和EJB 3 的规范。但 JBoss 核心服务不包括支持 Servlet/JSP 的 Web

容器，一般与 Tomcat 或 Jetty 绑定使用。

1.3 网页设计的基础知识

1.3.1 网页的基本特征

网页分为静态网页和动态网页，各有各的特征，在 Web 出现的早期，网站以静态页

面为主，现在随着互联网的发展和网站设计技术的提高，动态页面已经成为网站的主流。

1．静态网页概述

静态网页的网址形式通常是以.htm、.html、.shtml、.xml 等为扩展名的。静态网页，

一般来说是最简单的 HTML 网页，服务器端和客户端是一样的，而且没有脚本和小程序，

所以它的内容是固定的。在 HTML 格式的网页上，也可以出现各种动态的效果，如.GIF

格式的动画、Flash、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的

动态网页是不同的概念。

2．静态网页的特点

① 静态网页每个网页都有一个固定的 URL，且网页 URL 以.htm、.html、.shtml 等常

见形式为扩展名，一般不出现“？”字符。

② 网页内容一经发布到 Web 服务器上，无论是否有用户访问，每个静态网页的内容

都是保存在 Web 服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，

每个网页都是一个独立的文件。

第 1 章 网页设计基础 15

③ 静态网页的内容相对稳定，因此容易被搜索引擎检索。

④ 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信

息量很大时完全依靠静态网页制作方式比较困难。

⑤ 静态网页的交互性差，在功能方面有较大的限制。

3．动态网页概述

动态网页是以.asp、.jsp、.php、.perl、.cgi 等形式为扩展名，并且在很多动态网页网

址中有一个标志性的符号——“?”。动态网页与网页上的各种动画、滚动字幕等视觉上的

“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的

内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站

技术生成的网页都称为动态网页。动态网站也可以采用静动结合的原则，适合采用动态

网页的地方用动态网页，如果有必要使用静态网页，则可以考虑用静态网页的方法来实

现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。

4．动态网页特点

① 交互性：即网页会根据用户的要求和选择而动态改变和响应。例如访问者在网页

填写表单信息并提交，服务器经过处理将信息自动存储到后台数据库中，并打开相应提

示页面。

② 自动更新：即无须手动操作，便会自动生成新的页面，可以大大节省工作量。例

如，在论坛中发布信息，后台服务器将自动生成新的网页。

③ 随机性：即当不同的时间、不同的人访问同一网址时会产生不同的页面效果。

④ 动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一

个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中

“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处

理才能适应搜索引擎的要求。

静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的

功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静

态网页的方式会更简单，如果网站功能复杂的话，最好采用动态网页技术来实现。

1.3.2 网页的基本构成元素

网页由文本、图像、动画、超链接等基本元素构成，本小节将对这些基本元素进行

简单介绍，为后面各章中运用这些元素制作网页奠定基础。

1．文本

网页中的信息主要是以文本为主的。在网页中可以通过字体、大小、颜色、底纹、

16 网页制作教程

边框等来设置文本的属性。这里指的文字是文本文字，而并非图片中的文字。在网页制

作中，文字可以方便地设置成各种字体和大小，但是这里还是建议用于正文的文字一般

不要太大，也不要使用太多的字体，中文字体使用宋体，9 磅或 12 像素左右即可。因为

过大的字在显示器中显示时，线条不够平滑。颜色也不要使用得太过斑驳，以免造成丑

女浓妆艳抹的恶俗效果。大段文本文字的排列，建议参考一些优秀的杂志或报纸。

2．图像

今天看到的丰富多彩的网页，都是因为有了图像，可见图像在网页中的重要性。用

于网页中的图片一般为 JPG 和 GIF 格式的，即以.jpg（或.jpeg）和.gif 为扩展名的文件。

3．超链接

超链接是网站的灵魂，从一个网页指向另一个目的端的链接。例如指向另一个网页

或相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片、一个

电子邮件地址、一个文件、一个程序或者是本页中的其他位置。超链接广泛地存在于网

页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击，即可链接到

相应地址（URL）的网页。有链接的地方，鼠标指针会变成小手形状。可以说超链接正

是 Web 的主要特色。

4．表格

表格是网页排版的灵魂。使用表格排版是网页的主要制作形式。通过表格可以精确

地控制各网页元素在网页中的位置。表格并非指网页中直观意义的表格，范围要更广一

些。它是 HTML 语言中的一种元素，表格主要用于网页内容的排列，组织整个网页的外

观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。

有了表格的存在，网页中的元素得以方便地固定在设计的位置上。一般表格的边线不在

网页中显示。

5．表单

表单是用来收集网站访问者信息的域集。网站访问者填写表单的方式是输入文本、

单击单选按钮与复选框，以及从下拉菜单中选择选项。在填写好表单之后，网站访问者

便送出所输入的数据，该数据就会根据所设置的表单处理程序，以各种不同的方式进行

处理。

6．GIF 动画

动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有

效的方法。不过现在的网页往往不是缺乏动画，而是太多动画让人眼花缭乱，无心细看。

这就对动画制作的要求越来越高。动画制作的手段有很多，技术发展也很快。尽管各种

形式的动画使用形式不一。GIF 动画的标准简单，在各种类、各版本的浏览器中都能播放。

第 1 章 网页设计基础 17

7．Flash 动画

Macromedia 的 Flash 虽然出现时间不长，但已经成为最主要的 Web 动画形式之一。Flash

不仅比 DHTML 易学得多，而且有很多重要的动画特征，如关键帧、运动路径、动画蒙版、

形状变形和洋葱皮等。利用这个多才多艺的程序，不仅可以建立 Flash 电影，而且可以把

动画输出为 QuickTime 文件、GIF 文件或其他许多不同的文件格式（JPEG、PNG 等）。

8．框架

框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口

中显示。例如可以在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏

中的链接而改变，这样只要制作一个导航栏的网页即可，而不必将导航栏的内容复制到

各栏目的网页中去。

网页中除了这些最基本的元素，还包括横幅广告、字幕、悬停按钮、日戳、计数器、

音频、视频等元素。

1.3.3 网页设计的基本原则

网页设计中要遵循哪些基本原则呢？怎样才能设计出一个合格的网页？我们知道，

设计的个性化表现得非常明显，每个设计师都有着自己的设计理念，而用户也有着自己

的需求，因而这两者经常会出现冲突。因此，网页设计中要遵循一定的原则。下面是一

些网站设计中应注意的原则。

1．明确建立网站的目标和用户需求

Web 站点的设计必须体现用户的需求。如企业用户，网站需要展现企业形象、产品

介绍和服务内容，体现企业发展战略等内容，因此必须明确设计站点的目的和用户需求，

从而做出切实可行的设计计划。根据用户的需求、市场的状况、企业自身的情况等进行

综合分析，网站建设必须以“用户”为中心，而不是以“设计者”为中心进行网站设计

和规划。

2．网页设计总体方案主题鲜明

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和

特色做出定位，规划网站的组织结构。Web 站点应针对所服务对象的不同而具有不同的

形式。有些站点只提供简洁文本信息，有些则须采用多媒体表现手法，提供华丽的图像、

闪烁的动画、复杂的页面布置，甚至可以下载声音和录像片段。好的 Web 站点把图形表

现手法和有效的组织与通信结合起来。为了做到主题鲜明突出，要点明确，必须按照用

户的要求，以简单明确的语言和画面体现站点的主题，调动一切手段充分表现网站的个

性和情趣，办出网站的特点。

18 网页制作教程

3．网站的版式设计合理

网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面

设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之

间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，必须反复推敲整体布

局的合理性，使浏览者有一个流畅的视觉体验。

4．网页设计中合理运用色彩

色彩是艺术表现的要素之一。在网页设计中，须根据和谐、均衡和重点突出的原则，

将不同的色彩进行组合、搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地

加以运用。

5．网页设计形式与内容相统一

为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的

内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白

等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感

的文字、图案，或采用夸张的手法来表现内容，往往会达到比较好的效果。点、线、面

作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效

果，充分表达完美的设计意境。

6．网页设计中可利用多媒体功能

网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维

动画、Flash 等来表现。但由于网络宽带的限制，在使用多媒体的形式表现网页的内容时

不得不考虑客户端的传输速度。

7．结构清晰并且便于使用

如果人们看不懂或很难看懂你的网站，那么，他如何了解你要提供的内容呢？要使

用一些醒目的标题或文字来突出你的产品与服务。并且即使你拥有最棒的产品，如果客

户从你的网站上不清楚在介绍什么或不清楚如何受益的话，他们是不会喜欢你的网站的，

这就是网页设计的失败。

8．导向清晰

网页设计中，导航一般使用超文本链接或图片链接，使人们能够在网站上自由前进

或后退，而不会让他们使用浏览器上的前进或后退。最好在所有的图片上使用“ALT”标

识符注明图片名称或解释，以便那些不愿意自动加载图片的用户能够了解图片的含义。

第 1 章 网页设计基础 19

9．快速的下载时间

很多的浏览者不会进入需要等待 5 分钟下载时间才能进入的网站，在互联网上 30 秒

的等待时间与我们平常 10 分钟等待时间的感觉相同。因此，建议在网页设计中尽量避免

使用过多的图片及体积过大的图片。一般将主要页面的容量控制在 50 KB 以内，平均

30 KB 左右，确保普通浏览者页面等待时间不超过 10 秒。

10．非图形的内容

在必要时适当使用动态 GIF 图片，为减少动画容量，应用巧妙设计的 Java 动画可以

用很小的容量使图形或文字产生动态的效果。但是，由于在互联网浏览的大多是一些寻

找信息的人们，仍然建议要确定你的网站将为他们提供的是有价值的内容，而不是过度

的装饰。

以上内容就是关于网页设计要遵循的一些基本原则，学习者可以在网站设计实践中

慢慢去体会和练习。

1.4 网页制作工具概述

1.4.1 网页设计的常用工具

对于不太会写计算机代码的人员，可以借助“所见即所得”的网页制作工具来完成

网页的设计工作。目前，比较常用的网页设计工具有：Dreamweaver，Fireworks，Flash，

俗称网页三剑客，是一套强大的网页编辑工具，最初是由 Macromedia 公司开发出来的。

Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页和静态网

页的开发；Fireworks 主要是用于对网页上常用的 JPG、GIF 图片的制作和处理，也可用于

制作网页布局；Flash 主要用来制作动画。

1．Dreamweaver

Dreamweaver 是 美 国 Macromedia 公 司 （现已 被 Adobe 公 司 收 购 ， 成 为 Adobe

Dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一

套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出

跨越平台限制和跨越浏览器限制的充满动感的网页。

说到 Dreamweaver，我们应该了解一下网页编辑器的发展过程，随着互联网的普及，

HTML 技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器的基本性质，

可以分为所见即所得网页编辑器和非所见即所得网页编辑器，两者各有千秋。所见即所得

网页编辑器的优点就是直观，使用方便，容易上手，在所见即所得网页编辑器中进行网页

制作和在 Word 中进行文本编辑不会感到有什么区别，但它同时也存在着许多的弱点。

20 网页制作教程

2．Flash

Flash 是美国 Macromedia 公司所设计的二维动画软件，全称 Macromedia Flash，主

要用于设计和编辑 Flash 文档。附带的 Macromedia Flash Player，用于播放 Flash 文档。

2011 年底，Flash 被 Adobe 公司收购，最新版本为 2013 年宣布的 Adobe Flash Creative

Cloud（CC），播放器也更名为 Adobe Flash Player。

3．Fireworks

Fireworks 可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与

Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性，还提

供了一个预先构建资源的公用库，并可与 Adobe Photoshop、Adobe Illustrator、Adobe

Dreamweaver 和 Adobe Flash 软件集成。在 Fireworks 中可将设计迅速转变为模型，或利用

来自 Illustrator、Photoshop 和 Flash 的其他资源，然后直接置入 Dreamweaver 中轻松地进

行开发与部署。

1.4.2 网页设计的辅助工具

除了以上比较常用的网页制作工具外，还有一些网页设计辅助工具，我们也在这里

作一个简要介绍。

1．FrontPage

FrontPage，是微软公司出品的一款网页制作入门级软件。FrontPage 使用方便简单，

会用 Word 就能做网页，所见即所得是其特点，该软件结合了设计、程式码、预览三种模

式。微软在 2006 年年底前停止提供 FrontPage 软件。

2．Adobe Photoshop

Adobe Photoshop，简称“PS”，是由 Adobe Systems 开发和发行的图像处理软件。

Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效

地进行图像编辑工作。Photoshop 有很多功能，在图像、图形、文字、视频、出版等各方

面都有涉及。

2003 年，Adobe Photoshop 8 被更名为 Adobe Photoshop CS。2013 年 7 月，Adobe 公司

推出了最新版本的 Photoshop CC，自此，Photoshop CS6 作为 Adobe CS 系列的最后一个版

本被新的 CC 系列取代。

本 章 小 结

本章介绍了网页设计的一些基础知识，对互联网（Internet）、万维网（WWW）进行

第 1 章 网页设计基础 21

了比较详细的介绍，同时对于本教程将要涉及的一些背景知识也给予了介绍，其中包括

HTML、URL、HTTP、IP 地址、DNS 以及浏览器、Web 服务器等。分析了网页的特征、

网页的基本元素和网页设计的基本原则。对一些常用的网页制作工具和辅助工具也做了

简要介绍。

习 题

选择题

1．Internet 的基本结构域技术起源于（ ）。

A．UNIX B．NOVELL C．ARPANET D．DEC Net

2．关于 Internet，以下说法正确的是（ ）。

A．Internet 属于美国 B．Internet 属于联合国

C．Internet 属于国际红十字会 D．Internet 不属于某个国家或组织

3．WWW 是指（ ）。

A．World Wide Web B．Wide World Web

C．Web World Wide D．Web Wide World

4．Internet 与 WWW 的关系是（ ）。

A．都表示互联网，名称不同而已 B．WWW 是 Internet 上的一个应用功能

C．Internet 与 WWW 没有关系 D．WWW 是 Internet 上的一种协议

5．URL 的一般格式为（ ）。

A．/<路径>/<文件名>/<主机>

B．<通信协议>://<主机>/<路径>/<文件名>

C．<通信协议>:/<主机>/<文件名>

D．//<主机>/<路径>/<文件名>;<通信协议>

6．代表网页文件的扩展名是（ ）。

A．html B．txt C．doc D．ppt

7．URL 是（ ）。

A．统一资源定位 B．统一审查定位

C．统一资源定位器 D．统一审查定位器

8．HTTP 的中文意思是（ ）。

A．超文本传输协议 B．文件传输协议

C．布尔逻辑搜索 D．电子公告牌

22 网页制作教程

9．用户使用的因特网协议集被称为（ ）。

A．SMTP B．DNS C．FTP D．TCP/IP

10．什么是 DNS？（ ）

A．数据名称服务 B．将域名变成 IP 地址

C．把 IP 地址变成域名 D．文件传输服务

11．以下哪个主机在地理位置上属于中国？（ ）

A．Microsoft.au B．bta.cn

C．ibm.il D．news.com

12．在网址 http://www.ibm.com/中，com 表示（ ）。

A．无任何含义 B．域名 C．文件扩展名 D．服务器

13．根据域名代码规定，gov 代表（ ）。

A．商业机构 B．教育机构 C．网络支持中心 D．政府部门

14．下列各项中，属于教育机构域名的是（ ）。

A．tsinghua.edu.cn B．sava.gov.cn C．sxtl.net.cn D．yoyo.com.cn

15．IPv4 地址中有（ ）。

A．1 个字节 B．2 个字节 C．3 个字节 D．4 个字节

16．IPv6 将 32 位地址空间扩展到（ ）。

A．128 位 B．256 位 C．64 位 D．1 024 位

17．下列 IPv4 地址中合法的是（ ）。

A．300.200.100.10 B．123.222.12.256

C．127.0.0.0 D．192.168.0.100

18．下列正确的 IP 地址是（ ）。

A．10.10.192.139 B．10.10.192

C．10.10.192.136.1 D．256.257.0.1

19．下面属于网页浏览器的软件是（ ）。

A．Google B．Outlook Express

C．Office D．Internet Explorer

20．下面哪项不是 Web 浏览器？（ ）

A．Linux B．Opera

C．Internet Explorer D．Netscape Navigator

第 2 章 HTML 简介

第 1 章中我们已经对 HTML 作了简要的介绍，本章将对 HTML 进一步进行讲解。

2.1 HTML 基本概念

HTML（Hypertext Markup Language）超文本标记语言，通过使用标记来描述文档结构

和表现形式的一种语言，由浏览器进行解析，然后把效果显示成网页。它是网页构成的

基础，用户见到的所有网页都离不开 HTML，所以学习 HTML 是基础中的基础。

HTML 作为网页制作的标记语言，具有以下特点：

HTML 语言是一种标记语言，不需要编译，直接由浏览器执行。

HTML 文件是一个文本文件，包含了一些 HTML 元素等。

HTML 文件必须使用 html 或 htm 为文件扩展名。

HTML 是大小写不敏感的，HTML 与 html 是一样的。

2.2 HTML 文档结构

2.2.1 HTML 文档基本结构

HTML 语言是一种标记语言，它由<…>符号来标记。一个 HTML 文档一般由头部和

正文两部分组成，而且 HTML 文档中的所有内容以及其他 HTML 标记都必须包含在

<html>…</html>标记中。

<html>…</html>是成对出现的，这种标记称为容器标记。<html>是一个 HTML 文件

开始的标记，而</html>是一个 html 文件结束的标记。<head>和</head>之间的内容是 HTML

文件的头部。<title>和</title>之间的内容为网页的标题，即显示在窗口的标题部分。

<body>…</body>标记包含了文档的正文部分，在非框架结构的文档中，该标记必不可少。

在此标记中，可以定义文档内容的各种属性，如设定文本的背景颜色和前景颜色，根据

链接文本的状态定义该链接的颜色等。

24 网页制作教程

2.2.2 编写第一个 HTML 页面

打开记事本，新建一个文件，然后复制以下代码到这个新文件，再将这个文件存成

2-1.html。

【例 2-1】HTML 页面示例。

<html>

<head>

<title>我的第一个网页</title>

</head>

<body>

这是我的第一个网页。

</body>

</html>

要浏览这个 2-1.html 文件，双击它，或者打开浏览器，在 File 菜单选择 Open，然后

选择这个文件就行了。例 2-1 运行的最终效果如图 2-1 所示。

图 2-1 第一个 HTML 页面实例

【示例解释】

这个文件的第一个标记是<html>，这个标记告诉浏览器这是 HTML 文件的头。文件

的最后一个标记是</html>，表示 HTML 文件到此结束。

在<head>和</head>之间的内容，是 head 信息。head 信息是不显示出来的，在浏览器

中看不到。但是这并不表示这些信息没有用处。比如可以在 head 信息里加上一些关键词，

这有助于搜索引擎搜索到此网页。

在<title>和</title>之间的内容，是这个文件的标题。可以在浏览器最顶端的标题栏看

到此标题。

在<body>和</body>之间的信息是网页的正文部分。

第 2 章 HTML 简介 25

HTML 文件看上去和一般文本类似，但是它比一般文本多了许多标记符号，比如

<html>、<body>等，通过这些标记，可以告诉浏览器如何显示这个文件。

2.3 HTML 基础标记

2.3.1 网页头部标记

HTML 头部信息（head）里包含关于所在网页的信息。头部信息（head）里的内容，

主要是被浏览器所用，不会显示在网页的正文中。

另外，搜索引擎如谷歌、百度等也会查找网页中的 head 信息。为了让搜索引擎能够

收录网页，也要填写适当的 head 信息。

下面说几个常用的 head 信息里的 HTML 标记，如标题（title）、链接（link）、样式

（style）以及关于信息（meta）。

1．标题（title）

标题（title）是最常用的 head 信息。它不显示在 HTML 网页正文里，显示在浏览器

窗口的标题栏里。例 2-2 的效果如图 2-2 所示。

【例 2-2】头部标题示例。

<head><title>

头部信息(head)之标题(title)说明

</title></head>

图 2-2 标题（title）标记实例效果

2．链接（link）

用链接（link）可以建立和外部文件的链接。常用的是对 CSS 外部样式表（External style

sheet）的链接。示例代码如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">

26 网页制作教程

3．样式（style）

用样式（style）可以设置网页的内部样式表（Internal Style Sheet）。示例代码如下：

<head>

<style>

body {background-color:white; color:black;}

h1 {font: 18pt arial bold;}

</style>

</head>

4．关于网页信息（meta）

在计算机语言里，经常可以看到一个前缀——meta，meta 就是“关于”（about）的

意思。

meta 解释起来比较拗口，比如 meta data，意为描述 data 的 data，英文即 data about data。

还有一个词叫 meta language，表示一种描述其他语言的语言。

在 HTML 里，meta 标记（meta tags）表示用来描述网页的有关信息。示例代码如下：

<meta name="description" content="网页制作教程之头部信息">

<meta name="keywords" content="HTML,网页制作 ">

<meta name="author" content="理学院">

利用 meta 中的 Refresh 还可以实现自动跳转页面的功能。示例代码：

<meta http-equiv="Refresh" content="5;url=http://www.muc.edu.cn">

【例 2-3】meta 中的 Refresh 示例。

<html>

<head>

<meta http-equiv="Refresh" content="5;url=http://www.muc.edu.cn">

</head>

<body>

<p>

中央民族大学官方网站链接已改为

<a href="http://www.muc.edu.cn"> http://www.muc.edu.cn</a>。

</p>

<p>

如果在 5 秒钟后网页没有自动跳转，请点击上面的链接，进入中央民族大学官网。

</p>

</body>

</html>

以上代码运行效果如图 2-3 所示，网页打开 5 秒后将自动跳转到中央民族大学官网。

第 2 章 HTML 简介 27

图 2-3 标记 meta 跳转 效果

2.3.2 文档主体标记

1．文档背景颜色和背景图片

HTML 的 <body> 有两个关于背景的属性，一个是 bgcolor，是设置背景颜色的；另

一个是 background，是设置背景图片的。

① bgcolor 属性。bgcolor 属性用来设置 HTML 网页的背景颜色，如下代码示例：

<html>

<body bgcolor="red">

<h2>看，这个页面是红色的。</h2>

</body>

</html>

② background 属性。background 属性用来设置 HTML 网页的背景图片。background

属性值就是背景图片的路径和文件名，如：

<body background="/images/bgimg.gif">

如果背景图片小于网页显示窗口，那么这个背景图片会自动重复，代码示例如下：

<html>

<body background="/images/smallbgimg.gif">

<h3>这个网页有背景图片哦！</h3>

<p>如果图片比页面小，图片会自动重复。</p>

</body>

</html>

为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。

2．文本格式化标记

此类型的标记用于定义文本的类型，比如注释、引用、代码等。其主要属性如下：

28 网页制作教程

<!--…-->：将文本定义为注释。

<cite>…<cite>：将文本定义为引用。

<comment>…</comment>：将文本定义为说明。

<code>…</code>：将文本定义为代码。

<del>…</del>：显示文本被删除的效果（在文本中加一道横线）。

<dfn>…</dfn>：文本是某个名词的定义。

<em>…</em>：将文本定义为要点。

<ins>…</ins>：显示文本插入的效果（加下划线，并在结尾加省略号）。

<kbd>…</kbd>：用户自定义的文本类型。

<q>…</q>：定义文本为内联文本类型。

<strong>…</strong>：显示文本着重强调的效果（黑体）。

<var>…</var>：标识此文本为定义变量。

【例 2-4】文本格式化标记示例。

<html>

<head><title>格式化文本标记示例</title></head>

<body>

<center>

<h2>下面是一些格式化文本示范</h2>

<hr width=300 size=2>

</center>

<p><!--注释文本将不被显示--></P>

<p>引用：毛主席说：<cite>"好好学习，天天向上。"</cite></p>

<p>说明：<comment>说明性文本将不会被显示出来。</comment></p>

<p>删除：在此处有一道<del>删除线。</del></p>

<p>定义：<dfn>平行四边形</dfn>是两组对边互相平行的四边形。</p>

<p>要点：<em>要点</em>将以斜体显示。</p>

<p>插入：<ins>这段是插入文本。</ins></p>

<p>内联体：<q>这段是内联体文本。</q></p>

<p>着重体：明天是<strong>除夕。</strong></p>

<p>定义变量：这里定义一个变量<var>variable.</var></p>

</body>

</html>

程序的运行结果如图 2-4 所示。

第 2 章 HTML 简介 29

图 2-4 文本格式化标记效果

3．字体样式

HTML 中的字体样式主要有粗体、斜体、小字体、大字体、宽字体、电报字体、显示

下划线或显示删除线等，各种字体的样式标记如下：

<b>…</b>：文本以粗体字显示。

<big>…</big>：文本以大字体显示。

<button>…</button>：将文本设定为按钮。

<i>…</i>：文本以斜体显示。

<small>…</small>：文本以小字体显示。

<span>…</span>：设定内部的字体样式。

<strike>…</strike>：文本显示时加删除线。

_…：文本以下沉的样式显示。

^…：文本以上浮的样式显示。

<tt>…</tt>：文本以电报体或宽字体显示。

<u>…</u>：文本显示时加下划线。

<font>…</font>：字体大小、字体风格、字体颜色等设置。

30 网页制作教程

【例 2-5】字体样式示例。

<html>

<head><title>字体样式</title><head>

<body>

<b>粗体字</b>

<i>斜体字</i>

<small>小字体</small>

<big>大字体</big>

<u>加有下划线的文字</u>

<strike>加有删除线的文字</strike>

<tt>电报体或宽字体</tt>

<font size="3" face="楷体" color="red">这是一段大小为 9px 的红色楷体字</font> </body>

</html>

示例代码的运行结果如图 2-5 所示。

图 2-5 字体样式实例效果

2.3.3 段落标记

在 HTML 文档中，使用<p>…</p>标记对文本进行分段排列，该标记有一个常用属性

align，该属性取值主要有：left、right、center，分别表示文本靠左、靠右、居中排列显示。

【例 2-6】段落标记示例。

<html>

<head>

<title>段落标记实例</title>

</head>

<body>

<p align="left">第一段文本，靠左排列。</p>

<p align="right">第二段文本，靠右排列。</p>

第 2 章 HTML 简介 31

<p align="center">第三段文本，居中排列。</p>

</body>

</html>

以上运行效果如图 2-6 所示。

图 2-6 段落标记实例

如果希望在不产生一个新段落的情况下进行换行（新行），可以使用换行符<br/>

标签。

<p>这是第一行<br/>这是第二行<br/>这是第三行</p>

以上代码在段落标签中的一行文字中需要换行的地方插入<br/>标签，便可以对文字

进行强行换行。

2.3.4 图片标记

HTML 文档中显示图片（格式一般为 jpg、jpeg、gif、png 等）用图片标记<img>，这

是一个非封闭标记，图片标记有两个常用属性 src 和 alt。src 属性指定了所要显示图片的

所在位置，alt 用于指定替代图片的文本（当图片无法显示时显示该文本内容）。

【例 2-7】图片标记示例。

<html>

<head>

<title>图片标记</title>

</head>

<body>

<img src="images/yjx.jpg" alt="郁金香">

</body>

</html>

运行效果如图 2-7 所示。

32 网页制作教程

图 2-7 图片标记实例

2.3.5 超链接标记

在 HTML 中，超链接用标记<a>和</a>来实现，而定义源端点、目标端点、锚记等相

关内容则由标签<a>的属性完成。标签<a>有如下几个常用属性：

1．href 属性

用来定义指向链接目标端点的 URL，取值是目标端点文件的 URL 路径和文件名。

例如：<a href="http://www.163.com">网易主页</a>

href="http://www.163.com"指明了链接目标端点，“网易主页”是链接文字，浏览时单

击“网易主页”就会打开由 href 指定的主页。

【例 2-8】超链接 href 属性示例。

<html>

<head>

<title>超链接（href 属性实例）</title>

</head>

<body>

欢迎访问<a href="http://www.163.com">网易主页</a>

</body>

</html>

第 2 章 HTML 简介 33

以上代码运行效果如图 2-8 所示。

图 2-8 超链接 href 属性实例

2．target 属性

用于定义链接目标端点文档的显示窗口，取值可以是：_blank、_self、_parent、_top，

也可以是一个框架名。

例如：<a href="kcjs.htm" target="mainFrame">课程介绍</a>

href="kcjs.htm"指明链接目标端点是当前文件夹中 kcjs.htm 文档，target="mainFrame"

指明目标文档将显示在框架名为 mainFrame 的框架窗口中。“课程介绍”是链接文字，浏

览时单击“课程介绍”将在 mainFrame 框架域中显示 kcjs.htm 文档内容。

3．name 属性

用于在当前位置进行插入锚记操作，创建连接的目标端点，通过其他链接可跳转到

创建的目标锚记上。name 的值是锚记的名称。

例如：<a name="a1"></a>

在当前位置插入了一个名称为 a1 的锚记。

4．title 属性

用于设置链接的标题，在浏览器中，鼠标指针指向链接时会显示在鼠标指针旁边，

是链接的说明文字。

例如：<a href="1.htm" target="mainFrame" title="课程介绍">课程介绍</a>

2.3.6 列表标记

在网页中，列表方便、直接，并且美观，故很常用。有关列表的标记符有如下几种：

<dl>：定义列表（可包含一个或多个<dt>或<dd>）。

34 网页制作教程

<dt>：定义列表的术语。

<dd>：提供术语定义。

<li>：定义一个列表项。

<ul>：无序列表（列表前没有数字标示）。

<ol>：有序列表（列表前有数字标示）。

现在就几个常用的标记进行叙述。

① <ol>：<ol>标记定义了一个有序列表，即列表的每一项前都有编号。

② <ul>：该标记定义了一个无序列表。其 type 属性给出了列表项标号的显示样式，

它的取值有 square（方框）、circle（空心圆圈）、disc（实心圆）。有序列表和无序列表均

可以嵌套使用。

③ <dl>：该标记定义了一个定义列表，这种列表一般用在每个项目都需要几个段落

说明的列表中。定义列表中的项目是通过使用<dd>和<dt>标记创建的。其中，<dt>定义了

每个项目的名称，<dd>定义了解释说明该项目的段落内容。

④ <li>：该标记定义了一个列表项。

【例 2-9】列表标记示例。

<html>

<head><title>列表样式示例</title></head>

<body>

<center><h2>本月售书总结</h2></center>

<dl>

<dt>售书排行榜</dt>

<dd>按书名：

<ol>

<li>数据结构</li>

<li>操作系统</li>

<li>Thinking in C++</li>

</ol>

</dd>

<dd>按出版社：

<ol>

<li>清华大学出版社</li>

<li>机械工业出版社</li>

<li>人民邮电出版社</li>

<li>中国铁道出版社</li>

</ol>

<hr>

<dt>脱销书目：</dt>

<dd>

第 2 章 HTML 简介 35

<ul>

<li>操作系统</li>

<li>数据库系统概论</li>

<li>数据库工程</li>

</ul>

</dd>

</body>

</html>

运行结果如图 2-9 所示。

图 2-9 列表样式实例

2.3.7 表单标记

表单在网页制作中有举足轻重的地位，因为它方便、美观及其强大的功能，成为网

页中必不可少的元素，它为在服务器和客户机之间的数据传输、网页之间的数据保存以

及快速显示在客户机上提供了方便。以下是表单的一些基本元素：

<form>：定义一个表单。

<input>：在表单中插入一个表单元素。

<text>：定义一个文本框。

<textarea>：定义一个文本区域。

36 网页制作教程

<checkbox>：定义一个复选框。

<radio>：定义一个单选框。

<select>：定义一个选项选择控件。

<option>：定义一个静态文本框。

<button>：定义一个按钮。

<tieldset>：定义一个表单按钮组。

<legend>：定义表单控件组的名称。

<password>：定义一个输入密码的文本框，以“*”显示输入的文本。

现在就几个比较常用的属性进行说明。

① <form>…</form>。<form>标记定义了一个交互式表单。当用户发送表单时，表单

包含的数据被发送到表单的 action 属性所定义的 URL 上。action 属性的作用是将表单指

向一个接收表单信息并完成信息处理功能的服务器脚本的 URL 上，以便服务器对所需要

数据进行操作。例如：<form action="login.asp" method="post">，这表示该表单指向 login.asp

的文件，在 login.asp 中可以对表单的内容进行操作。其中 action 是必须的，它可以指向

另外一个文件，也可以指向该文件本身，该文件再进行相应的操作。

方法 method 有 post 和 get 两个值，其默认值为 get。它是将表单的输入内容作为一

个“HTTP GET”请求，然后把表单数据添加到 action 属性所定义的服务器的 URL 上。

post 方法用表单的内容单独建立一个文件，并发送到服务器上。与 post 方法比较，get

方法所能处理的最多表单数据量受限于服务器和浏览器所能处理的最大 URL 长度，而

且还禁止在输入中包含 ASCII 码字符或超过 100 个字符的表单。所以 post 方法较 get 方

法常用。

② <input>。这个标记在表单中应用得最广泛，因为它的 type 属性定义了许多信息输

入选项，该属性的取值有：text（简单文本行）、password（口令字段）、checkbox（复选框）、

radio（单选按钮）、file（打开文件)、submit（提交按钮）、reset（重置按钮）。此外，<input>

标记还有其他的一些属性，如 name 属性为每个选项定义了文本标签；size 属性决定了简

单文本行或口令字段的长度，单位为字符；value 属性对于简单文本行或口令字段定义了

默认文本。

③ <select>…</select>。该标记定义了一个可以滚动的列表或菜单。在此标记中包

含 若 干 个 <option>标 记 就 可 以 为 用 户 提 供 一个选 项 菜单， 每 一个选 项 都存于一个

<option>标记中。<select>的 name 属性为所定义的列表或菜单提供了文本标签；multiple

属性允许多个选项值；size 属性择规定了选项以列表形式一次显示的数目，滚动条将

使所有不可显示的项目都可见。

第 2 章 HTML 简介 37

④ <option>…</option>。该标记定义了<select>菜单中的选项。在<select>中，可以定

义其中一个<option>的 selected 属性，使得该选项为默认选项。

⑤ <textarea>…</textarea>。该标记定义了一个多行输入的文本域。<textarea>的主要

属性是 rows 和 cols，它们分别定义了可显示的行数和列数。name 属性为该文本域提供了

一个文本标签。

⑥ <fieldset>…</fieldset>和<legend>...</legend>。<fieldset>标记定义了一个表单控件

组，它可以将表单中内容相近的选项组织成块，使表单的内容更易显示和管理。<legend>

标记必须放在<fieldset>标记内，它为<fieldset>定义的控件组提供了文字标签。

【例 2-10】表单标记示例。

<html>

<head><title>提交表单示例</title></head>

<body>

<h2 align=center>个人信息表</h2>

<form action="login.asp" method="post">

<p>姓名：<input type=text size=20 value=""></p>

<p>性别：<input type=radio value=男 checked>男

<input type=radio value=女>女</p>

<p>电子邮箱：<input type=text size=30 value=""></p>

<p>个人爱好：<br><input type=checkbox value="唱歌">唱歌

<br><input type=checkbox value="跳舞">跳舞

<br><input type=checkbox value="爬山">爬山

<br><input type=checkbox value="游泳">游泳

<br><input type=checkbox value="看书">看书

</p>

<p>所在城市：

<select><option>北京市</option>

<option>天津市</option>

<option>上海市</option>

</select>

</p>

<p><input type=submit value="提交"><input type=reset value="取消"></p>

</form>

</body>

</html>

运行结果如图 2-10 所示。

38 网页制作教程

图 2-10 表单标记实例

2.3.8 表格标记

在网页中使用表格，会给人一种整洁、美观的感觉。表格可以存放多维数据，并且

便于进行版式控制。但是表格会占用比较多的资源，过多地使用表格往往会使网页下载

速度变慢。尽管如此，表格依然为很多读者所喜爱。下面简单介绍表格的一般用法及其

属性。

<table>：定义一个表格。

<caption>：定义表格说明。

<colgroup>：定义表格列组。

<thead>：定义表格列标题。

<th>：定义一个表格标题单元。

<tbody>：定义表格数据行。

<tr>：定义一个表格行。

<td>：定义一个表格内容单元。

第 2 章 HTML 简介 39

① <table>。该标记符定义了一个可以存放多维数组的表格。其中：border 属性定义

了表格外边框的宽度，它的默认值位 0；width 属性用于指定表格的宽度，其值可以是以

百分比表示的相对值，即相对于窗口的宽度的百分比，也可以是绝对值，其大小用屏幕

像素点的个数表示；cellpadding 属性用来指定表内单元的内容与表格边框之间的距离，

大小单位用像素点表示，默认值位 0；cellspacing 属性用于指定单元格之间的距离，亦即

单元格边框的里边线和外边线之间的距离，大小单位用像素点表示，默认值位 0；rules

属性用于控制表格中分隔线的显示，rules＝all 表示显示所有的分隔线，rules＝rows 表示

只显示行与行之间的分隔线，rules＝cols 表示显示列与列之间的分隔线，rules＝none 表

示不显示任何分隔线；bgcolor 属性用于指定表格的背景色；bordercolor 属性用于指定边

框色。

② <caption>。该标记用于定义表格的标题，并且<caption>必须放在表格的最前面。

③ <thead>。该标记定义了表格中的一组标题行。通过<thead>将若干标题行归为一

组，这样就可以使标题行出现在需要分多页打印的表格的每一页上，又可以在显示长表

格时做到表格内容滚动而标题静止。其 align 属性指定了表格中每个单元格的水平对齐方

式，而 valign 属性定义了单元内容的垂直位置。

④ <tbody>。该标记定义了表格的表体部分，一个<tbody>定义了一组数据行。

⑤ <tr>。该标记定义了表格的一行。<tr>标记必须放在<thead>或<tdody>所定义的行

组中。在<tr>中又包含了<th>和<td>标记。<tr>的 align 属性表示每个单元格的水平对齐方

式，其中 left 表示居左，center 表示居中，right 表示居右；valign 属性定义了单元格内容

的垂直位置，其中 top 表示位于单元格的顶端，middle 表示位于单元格的中间，bottom 表

示位于单元格的底端；height 表示单元格的高度，width 表示单元格的宽度，它既可指定

为数字（表示像素的多少），也可指定为百分比（表示占窗口的比例）；bgcolor 属性定义

了表格行的背景颜色。

⑥ <td>。该标记定义了表格中一个数据单元格。其中，rowspan 属性和 colspan 属性

分别定义了单元格所占的行数和列数。

⑦ <th>。该标记定义了表格中的一个标题单元格。<th>标记应放在<tr>标记中。当

单元格的内容既是标题信息又是表格数据时，应使用<td>标记。

无论是标题单元格还是数据单元格，其中都能包含任何文本、HTML 代码，或两者都

有。这包括链接、列表、表单、图像或其他表格。

【例 2-11】表格标记示例。

<html>

<head><title>表格示例</title></head>

<body>

40 网页制作教程

<center>

<table border="1" bgcolor="lightblue">

<caption>上月销售总结</caption>

<colgroup span=3>

<thead>

<tr>

<th scope="col" rowspan=2>书目种类</th>

<th scope="col" rowspan=2>销售数量（万册）</th>

<th scope="col" rowspan=2>销售金额（万元）</th>

<th scope="col" colspan=2>销售排行榜</th>

</tr>

<tr>

<th scope="col">上月销售</th>

<th scope="col">本月定购</th>

</tr>

</thead>

<tbody>

<tr>

<td align=left>计算机类</td>

<td align=center>3.1</td>

<td align=center>58</td>

<td align=center>网页设计教程</td>

<td align=right>Thinking in C++</td>

</tr>

<tr>

<td align=left>外语类</td>

<td align=center>2.8</td>

<td align=center>49</td>

<td align=center>大学英语四级考试</td>

<td align=center>快乐英语</td>

</tr>

</tbody>

</table>

</center>

</body>

</html>

首先用<table>定义一个表格，其边框“border”为 1，表格背景颜色为浅绿色。<caption>

定义了表格的说明，表示该表格是“上月销售总结”。<colgroup>定义了 4 个列组，其中

“销售排行榜”列定义了两个子列。<thead>定义了表格的列标题。<tbody>定义了表格内