1.1 初识网页

网页（Web Page）是网站中的一个页面，是构成网站的基本元素，通常是HTML格式（文件扩展名为.html、.htm、.asp、.aspx、.php或者.jsp等）。文字和图片是构成网页的两个最基本的元素，并通过网页浏览器来阅读。

1.1.1 网页的构成

Internet中的网页内容各异，然而多数网页都是由一些基本的版块组成的，包括Logo、导航条、Banner、内容版块、版尾和版权等。

1. Logo图标

Logo是企业或网站的标志，是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用。通过形象的Logo，可以让浏览者记住公司主体和品牌文化。网络中的Logo徽标主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个版块。例如，微软的Logo，如下图所示。

2. 导航条

导航条是网站的重要组成标签。合理安排的导航条可以帮助浏览者迅速查找需要的信息。例如，新浪网的导航条，如下图所示。

3. Banner

Banner的中文直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过一些动画效果，展示更多的内容，并吸引用户观看，如下图所示。

4. 内容版块

网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。例如，蔡司光学网站的内容版块，如下图所示。

5. 版尾版块

版尾是网页页面的最底端版块，通常放置网站的联系方式、友情链接和版权信息等内容，如下图所示。

1.1.2 静态网页

网页可以从技术上分为静态网页或者动态网页。静态网页是指网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器，如下图所示。

随着技术的发展，在HTML页面中添加样式表、客户端脚本、Flash动画、Java Applet小程序和ActiveX控件等，会使页面的显示效果更加美观和生动。但是，这只不过是视觉动态效果而已，它仍然不具备与客户端进行交互的功能。常见的静态页面以.html或者.htm为扩展名，如下图所示。

1.1.3 动态网页

这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为“动态网页”。

动态网页在于可以根据先前制定好的程序页面，以及用户的不同请求返回其相应的数据。动态页面常见的扩展名有：.asp、.php、.jsp、.cgi等。

动态网页的优点是效率高、更新快、移植性强，从而快速地达到所见即所得的目的，但是它的优点同样也是它的缺点，其工作流程如下图所示。

动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理，而前端显示的内容可以随着后台数据的更改而改变，如发布新闻、发布公司产品、交流互动、博客、学校网等，如下图所示。

下面就常见的几种动态网技术来做简单的介绍。

1. ASP技术

ASP（Active Server Pages，动态服务网页）是微软公司开发的一种由VBScript脚本语言或JavaScript脚本语言调用FSO（File System Object，文件系统对象）组件实现的动态网页技术。

ASP技术必须通过Windows的ODBC与后台数据库通信，因此只能应用于Windows服务器中。ASP技术的解释器包括两种，即Windows 9X系统的PWS和Windows NT系统的IIS，如下图所示。

2. ASP.NET技术

ASP.NET是由微软公司开发的ASP后续技术，其可由C#、VB.net、Perl及Python等编程语言编写，通过调用System.Web命名空间实现各种网页信息处理工作。

ASP.NET技术主要应用于Windows NT系统中，需要IIS及.NET Framework的支持。通过Mono平台，ASP.NET也可以运行于其他非Windows系统中，如下图所示。

3. JSP技术

JSP（JavaServer Pages，Java服务网页）是由太阳计算机系统公司开发的，以Java编写，动态生成HTML、XML或其他格式文档的技术。

JSP技术可应用于多种平台，包括Windows、Linux、UNIX及Solaris。JSP技术的特点在于，如果客户端第一次访问JSP页面，服务器将先解释源程序的Java代码，然后执行页面的内容，因此速度较慢。而如果客户端是第二次访问，则服务器将直接调用Servlet，无需再对代码进行解析，因此速度较快，如下图所示。

4. PHP技术

PHP（Personal Home Page，个人主页）也是一种跨平台的网页后台技术，最早由丹麦人Rasmus Lerdorf开发，并由PHP Group和开放源代码社群维护，是一种免费的网页脚本语言。

PHP是一种应用广泛的语言，其多在服务器端执行，通过PHP代码产生网页，并提供对数据库的读取。

1.1.4 数据库

数据库是“按照数据结构来组织、存储和管理数据的仓库”。在日常工作中，常常需要把某些相关的数据放进“仓库”，并根据管理的需要进行相应的处理。

大家知道数据库是用于存储数据内容的，而对生活中一个事件或者一类问题，如何将它们存储到数据库中呢？在学习数据库之前，先来了解一下数据库的概念。

1. 数据与信息

为了了解世界、交流信息，人们需要描述事物。在日常生活中，可以直接用自然语言（如汉语）来描述。如果需要将这些事物记录下来，也可以将事物变成信息进行存储。而信息是对客观事物属性的反映，也是经过加工处理，并对人类客观行为产生影响的数据表现形式。

例如，在计算机中，为了存储和处理这些事物，需要抽象地描述这些事物的特征，而这些特征，正是在数据库中所存储的数据。数据是描述事物的符号记录，描述事物的符号可以是数字，也可以是文字、图形、图像、声音、语言等多种表现形式。

下面以“学生信息表”为例，通过学号、姓名、性别、年龄、系别、专业和年级等内容，来描述学生在校的特征。

在这里的学生记录就是信息。在数据库中，记录与事物的属性是对应的关系，其表现如下图所示。

可以把数据库理解为存储在一起的相互有联系的数据集合，数据被分门别类、有条不紊地保存。而应用于网站时，则需要注意一些细节问题，即这些特征需要用字母（英文或者拼音）来表示，避免不兼容性问题的发生。例如，对于描述用户注册信息，如下图所示。

其中，每个特征中字母所代表的含义见下表。

2. 数据库

综上所述，数据库（Database，DB）是存储在一起的相关数据的集合，这些数据是结构化的，无有害的或不必要的冗余，并为多种应用服务；数据的存储独立于使用它的程序；对数据库插入新数据，修改和检索原有数据均能按一种公用的和可控制的方式进行。当某个系统中存在结构上完全分开的若干个数据库时，则该系统包含一个“数据库集合”。这是J.Martin给数据库下的一个比较完整的定义。

因此，以Access数据库为例，可以将这个“数据仓库”以表的形式表现出来。其中，每条记录中存储的内容即所指的信息。例如，在“学生信息表”中，显示了每位学生的数据存储情况，如下图所示。

3. 数据库管理系统

数据库管理系统（Database Management System，DBMS）是一种操纵和管理数据库的大型软件，是用于建立、使用和维护数据库的。它对数据库进行统一的管理和控制，以保证数据库的安全性和完整性。

用户通过DBMS访问数据库中的数据，数据库管理员也通过DBMS进行数据库的维护工作。DBMS提供多种功能，可使多个应用程序和用户用不同的方法在同时或不同时刻去建立、修改和询问数据库。主要包括以下几方面的功能。

□ 数据定义功能

DBMS提供数据定义语言（Data Definition Language，简称DDL），用户通过它可以方便地对数据库中的数据对象进行定义。例如，在Access数据表中，可以定义数据的类型、数据的属性（如字段大小、格式）等，如下图所示。

□ 数据操纵功能

DBMS还提供数据操纵语言（Data Manipulation Language，简称DML），用户可以使用DML操纵数据，实现对数据库的基本操作，如查询、插入、删除和修改等。例如，在“学生信息表”中，用鼠标右击任意记录，执行【删除记录】命令，即可删除数据内容，如下图所示。

□ 数据库的运行管理

数据库在建立、运用和维护时，由数据库管理系统统一管理、控制，以保证数据的安全性、完整性。

□ 数据库的建立和维护功能

它包括数据库初始数据的输入、转换功能；数据库的转储、恢复功能；数据库的管理重组功能和性能监视、分析功能等。这些功能通常是由一些实用程序完成的。

4. 数据库的作用

在动态网站建设中，数据库发挥着不可替代的作用。它用于存储网站中的信息，可以包含静止的和经常需要更换的内容。通过对数据库中相应部分内容的调整，可以使网站的内容更加灵活，并且对这些信息进行更新和维护也更加方便、快捷。

□ 新闻系统

如果要在网站中放置新闻，其更新的频率往往比较大，而通过数据库功能可以快速地发布信息，且很容易存储以前的新闻，便于网站浏览者和管理者查阅，同时也避免了直接修改主要页面，以保持网站的稳定性，如下图所示。

□ 产品管理

产品管理是网站数据库的重要应用，如果网站中有大量的产品需要展示和销售，那么使用数据库可以方便地进行分类，把产品更有条理、更清晰地展示给客户。并且方便日后的维护、检索与储存，如下图所示。

□ 收集信息

普通的静态页面是无法收集浏览者的信息的，而管理者为了加强网站的营销效果，往往需要搜集大量潜在客户的信息，或者要求来访者成为会员，从而提供更多的服务，如下图所示。

□ 搜索功能

如果站内提供大量的信息而没有搜索功能，浏览者只能依靠清晰的导航系统，而对于一个新手往往要花些时间搜索网页，有时候甚至无法达到目的。此时，提供方便的站内搜索不仅可以使网站结构清晰，而且有利于需求信息的查找，节省浏览者的时间，如下图所示。

□ BBS论坛

BBS对于企业而言，不仅可以增加与访问者的互动，更重要的是可以加强售前、售后服务和增加新产品开发的途径。利用BBS可以收集客户反馈信息，对新产品以及企业发展的看法、投诉等，增强企业与消费者的互动，提高客户服务质量和效率，如下图所示。

1.2 W3C概述

网页标准化体系简称W3C，它是由万维网联盟（World Wide Web Consortium）建立的一种规范网页设计的标准集。

基于网页标准化体系，网页的设计者可以通过简单的代码，在多种不同的浏览器平台中显示一个统一的页面。该体系的建立，大大提高了设计人员开发网页的效率，减轻了网页设计工作的复杂性，免去了人们编写兼容性代码的麻烦。

1.2.1 了解W3C

网页标准化（W3C）是针对网页代码开发提出的一种具体的标准规范。自从世界上第一个网页浏览器WorldWideWeb在1990年诞生以来，网页代码的编写长期没有一个统一的规范，而是依靠一种只包含少量标签的HTML（HyperText Markup Language，超文本标记语言）作为基本的编写语言。

1993年，第一款针对个人用户的网页浏览器Mosaic出现，极大地引发了互联网的热潮，受到了很多用户的欢迎。Mosaic也是第一种支持网页图像的浏览器，在Mosaic浏览器中，开发者为HTML定义了<img>标签，以方便地显示图像，如下图所示。

早期的HTML语法被定义为松散的规则，因此诞生了众多的版本，既包括1982年开发的原始版本，又包括大量增强的版本。版本的混乱使得很多网页只能在某一种特定的浏览器下被正常浏览。为了保证网页在尽可能多的用户浏览器中正常显示，网页设计者必须耗费更多的精力。

1994年网景公司的NetScape Navigator浏览器诞生。几乎与此同时，微软公司通过收购的方式发行了Internet Explorer浏览器。自此，网景公司和微软公司在争夺网页浏览器市场时进行了一场为时3年的“浏览器大战”。在这场竞争中，双方都为浏览器添加了一些独有的标签。这一举动又造成了大量互不兼容的网页产生，使设计兼容多种浏览器的网页变得非常困难。

1995年，人们为避免因浏览器竞争而导致的开发困难，提出了建立一种统一的HTML标准，以适应所有浏览器平台。这一标准最初被称为HTML+计划，后被命名为HTML 2.0。由于缺乏浏览器的支持，HTML 2.0并未成为实际的标准。

1996年，刚成立的W3C继承了HTML 2.0的思路，提出了HTML 3.0标准，并根据该标准提供了更多新的特性与功能，加入了很多特定浏览器的元素与属性。1996年1月，W3C公布了HTML 3.2标准，并正式成为大多数网页浏览器支持的标准。自此，网页标准化开始为绝大多数网页设计者所重视。

随着多媒体技术的发展与个人计算机性能的快速提高，简单的文字与图像已经不能满足用户的需求，因此，W3C逐渐为网页标准化添加了更多元素。其将HTML标准定义为网页标准化结构语言，并增加了网页标准化表现语言——CSS技术（Cascading Style Sheets，层叠样式表）以及符合ECMA（ECMA国际，一个国际信息与电信标准化组织，前身为欧洲电气工业协会）标准的网页标准化行为语言——ECMAScript脚本语言。

2000年1月，W3C发布了结合XML（eXtensible Markup Language，可扩展的标记语言）技术和HTML的新标记语言XHTML（eXtensible HyperText Markup Language，可扩展的超文本标记语言），并将其作为新的网页标准化结构语言。

目前，XHTML语言已经成为网页编写的首选结构语言，其不仅被应用在普通的计算机中，还被广泛应用于智能手机、PDA、机顶盒，以及各种数字家电等。由XHTML延伸出的多种标准，为各种数字设备所支持。

1.2.2 W3C的结构

作为整个网页标准化体系的支撑，网页结构语言经历了从传统混合了描述与结构的HTML语言到如今结构化的XHTML语言，其间发生了巨大的变化。

1. 传统HTML语言

传统HTML结构语言是指基于HTML 3.2及之前版本的HTML语言。早期的HTML语言只能够描述简单的网页结构，包括网页的头部、主体以及段落、列表等。随着人们对网页美观化的要求越来越高，HTML被人们添加了很多扩展功能。例如，可表示文本的颜色、字体的样式等。

功能的逐渐增多，使得HTML成为了一种混合结构性语句与描述性语句的复杂语言。例如，在HTML 3.2中，既包含了表示结构的<head>、<title>和<body>等标签，也包含了描述性的<b>、<font>等标签。

大量复杂的描述性标签使得网页更加美观，但同时也导致了网页设计的困难。例如，在进行一个简单的、内容非常少的网页设计时，可以通过HTML 3.2中的<font>标签对网页中的文本进行描述，如下所示。

然而，在对大量不同样式的文本进行描述时，HTML 3.2版本就显得力不从心了。网页的设计者不得不在每一句文字上添加<font>标签，并书写大量的代码。这些相同的标签除了给书写造成麻烦以外，还容易发生嵌套错误，给浏览器的解析带来困难，造成网页文档的臃肿。

因此，随着网页信息内容的不断丰富以及互联网的不断发展，传统的HTML结构语言已不堪重负，人们迫切需要一种新的、简便的方式来实现网页的模块化，降低网页开发的难度和成本。

2. XHTML结构语言

XHTML结构语言是一种基于HTML 4.01与XML的新结构化语言。其既可以看作HTML 4.01的发展和延伸，又可以看作XML语言的一个子集。

在XHTML语言中，摒弃了所有描述性的HTML标签，仅保留了结构化的标签，以减小文件内容对结构的影响，同时减少网页设计人员输入代码的工作量。

W3C对XHTML标签、属性、属性值等内容的书写格式做了严格规范，以提高代码在各种平台下的解析效率。无论是在计算机中，还是在智能手机、PDA手持计算机、机顶盒数字设备中，XHTML文档都可以被方便地浏览和解析。

1.2.3 W3C的表现

网页的标准化不仅需要结构的标准化，还需要表现的标准化。早期的网页完全依靠HTML中的描述性标签来实现网页的表现化，设置网页中各种元素的样式。随着HTML 3.2被大多数网站停止使用，以及HTML 4.01和XHTML的不断普及，人们迫切地需要一种新的方式来定义网页中各种元素的样式。

HTML 3.2在描述大量文本的样式时暴露了一些问题，为了解决这些问题，可以从面向对象的编程语言中引入类库的概念，通过在网页标签中添加对类库样式的引用，实现样式描述的可重用性，提高代码的效率。这些类库的集合，就被称作CSS层叠样式表（简称CSS样式表或CSS）。

1. CSS样式表

CSS样式表是一种列表，其中可以包含多种定义网页标签的样式。每一条CSS的样式都包含3个部分，其规范写法如下所示。

在上面的伪代码中，各关键词的含义如下。

□ Selector 选择器，相当于表格表头的名称。选择器提供了一个对网页标签的接口，供网页标签调用。

□ Property 属性，是描述网页标签的关键词。根据属性的类型，可对网页标签的多种不同属性进行定义。

□ value 属性值，是描述网页标签不同属性的具体值。

在CSS中，允许为某一个选择器设置多个属性值，但需要将这些属性以半角分号“;”隔开，如下所示。

同时，CSS还允许对同一个选择器的相同属性进行重复描述。由于各种浏览器在解析CSS代码时使用逐行解析的方式，因此这种重复描述将以最后一次进行的描述内容为准。例如，一个名为simpleClass的类中先描述所有文本的颜色为红色（#FF0000），然后再描述该类中所有文本的颜色为绿色（#00FF00），如下所示。

在上面的代码中，对simpleClass中的内容进行了重复描述，根据逐行解析的规则，最终显示的这些文本颜色将为绿色。用户也可将这两个重复的样式写在同一个选择器中，代码如下所示。

2. CSS的颜色规范

网页标签的样式包含多种类型，其中，最常见的就是颜色。CSS允许用户使用多种方式描述网页标签的样式，包括十六进制数值、三原色百分比、三原色比例值和颜色的名称等4种方法。

□ 十六进制数值

十六进制数值是最常用的颜色表示方法，其将颜色拆分为红、绿、蓝三原色的色度，然后通过6位十六进制数字表示。其中，前两位表示红色的色度，中间两位表示绿色的色度，后两位表示蓝色的色度，并在十六进制数字前加“#”号以方便识别。

例如，以十六进制数值分别表示红色、绿色、蓝色、黑色和白色等颜色，见下表。

□ 三原色百分比

三原色百分比也是一种CSS色彩表示方法。在三原色百分比的表示方法中，将三原色的色度转换为百分比值，其中，最大值为100%，最小值为0%。例如，表示白色的方法如下。

其中，第一个百分比值表示红色，第二个百分比值表示绿色，第三个百分比值表示蓝色。

□ 三原色比例值

三原色比例值是将16进制的三原色色度转换为3个10进制数字，然后再进行表示的方法。其中，第一个数字表示红色，第二个数字表示绿色，第三个数字表示蓝色。每一个比例数值最大值为255，最小值为0。例如，表示黄色（#FFFF00），如下所示。

□ 颜色的英文名称

除了以上几种根据颜色的色度表示色彩的方式以外，CSS还支持XHTML允许使用的16种颜色英文名称来表示颜色。这16种颜色英文名称见下表。

3. CSS长度单位

在量度网页中的各种对象时，需要使用多种单位，包括绝对单位和相对单位。绝对单位是指网页对象的物理长度单位，而相对单位则是根据显示器分辨率大小、可视区域、对象的父容器大小而定义的单位。CSS的可用长度单位主要包括以下几种。

□ in 英寸，是在欧美国家使用最广泛的英制绝对长度单位。

□ cm 厘米，国际标准单位制中的基本绝对长度单位。

□ mm 毫米，在科技领域最常用的绝对长度单位。

□ pt 磅，在印刷领域广泛使用的绝对长度单位，也称点，约等于1/72英寸。

□ pica 派卡，在印刷领域广泛使用的绝对长度单位，又被缩写为pc，约等于1/6英寸。

□ em CSS相对单位，相当于在当前字体大小下大写字母M的高度，约等于当前字体大小。

□ ex CSS相对单位，相当于在当前字体大小下小写字母X的高度，约等于当前字体大小的1/2。在实际浏览器解析中，1ex等于1/2em。

□ px 计算机通用的相对单位，根据屏幕的px点大小而定义的字体单位。通常在Windows操作系统下，1px等于1/96英寸。而在MAC操作系统下，1px等于1/72英寸。

□ 百分比 百分比也是CSS允许使用的相对单位值。其往往根据父容器的相同属性来进行计算。例如，在一个表格中，表格的宽度为100px，而其单元格宽度为50px，则可将该单元格的宽度设置为50%。

1.2.4 W3C的行为

XHTML仅仅是一种结构化的语言，即使将其与CSS技术结合，也只能制作出静态的、无法进行改变的网页页面。如果需要网页具备交互的行为，还需要为网页引入一种新的概念，即浏览器脚本语言。在W3C的网页标准化体系中，网页标准化行为的语言为ECMAScript脚本语言，以及为ECMAScript提供支持的DOM模型等。

1. 脚本语言

脚本语言是有别于高级编程语言的一种编程语言，其通常为缩短传统的程序开发过程而创建，具有短小精悍、简单易学等特性，可帮助程序员快速完成程序的编写工作。

脚本语言被应用于多个领域，包括各种工业控制、计算机任务批处理、简单应用程序编写等，也被广泛应用于互联网中。根据应用于互联网的脚本语言解释器位置，可以将其分为服务器端脚本语言和浏览器脚本语言两种。

□ 服务器端脚本语言

服务器端脚本语言主要应用于各种动态网页技术，用于编写实现动态网页的网络应用程序。对于网页的浏览者而言，大多数服务器端脚本语言是不可见的，用户只能看到服务器端脚本语言生成的HTML/XHTML代码。

服务器端脚本语言必须依赖服务器端的软件执行。常见的服务器端脚本语言包括应用于ASP技术的VBScript、JScript、PHP、JSP、Perl、CFML等。

□ 浏览器脚本语言

浏览器脚本语言区别于服务器端脚本语言，是直接插入到网页中执行的脚本语言。网页的浏览者可以通过浏览器的查看源代码功能，查看所有浏览器脚本语言的代码。

浏览器脚本语言不需要任何服务器端软件支持，任何一种当前流行的浏览器都可以直接解析浏览器脚本语言。目前应用最广泛的浏览器脚本语言包括JavaScript、JScript以及VBScript等。其中，JavaScript和JScript分别为NetScape公司和微软公司开发的ECMAScript标准的实例化子集，语法和用法非常类似，因此往往统一被称为JavaScript脚本。

2. 标准化的ECMAScript

ECMAScript是W3C根据Netscape公司的JavaScript脚本语言制定的、关于网页行为的脚本语言标准。根据该标准制订出了多种脚本语言，包括应用于微软Internet Explorer浏览器的Jscript和用Flash脚本编写的ActionScript等。

ECMAScript具有基于面向对象的方式开发、语句简单、快速响应交互、安全性好和跨平台等优点。目前绝大多数的网站都应用了ECMAScript技术。

3. 标准化的文档对象模型

文档对象模型（Document Object Model，DOM）是根据W3C DOM规范而定义的一系列文档对象接口。文档对象模型将整个网页文档视为一个主体，文档中包含的每一个标签或内容都被其视为对象，并提供了一系列调用这些对象的方法。

通过文档对象模型，各种浏览器脚本语言可以方便地调用网页中的标签，并实现网页的快速交互。