网络应用基础 第 7课 1
第 6课 网站 建设 和 网 页制作
? 本课内容
? 普通网站的基本构成
? Web 中的静态和 动态网页
? Web 服务器环境的安装
? Web网页的发布和访问
? HTML初步
? 网页设计与编程
网络应用基础 第 7课 2
6.1 普通网站的基本构成
? Web服务器软件
? 网页与文件系统
? 中间件（ HTML与数据库的纽带）
? 数据库系统
B r o w s e r
D a t a b a s e
F u n c t i o n
D a t a b a s e
S e r v e r
P r o c e s s
N O S
W e b S e r v e r
M i d d l e w a r e
D a t a b a s e
普 通 网 站 的 基 本 构 成
I n t e r n e t
H T M L
f i l e s
B r o w s e r
M y S Q L
F u n c t i o n
M y S Q L
P r o c e s s
W i n d o w s
X i t a m i
P H P
M y S Q L
D a t a b a s e
基 于 W i n d o w s 的 P H P 与 数 据 库 访 问 模 式 之 一 ( C G I 方 式 )
I n t e r n e t
网络应用基础 第 7课 5
6.2 Web 中的静态和动态网页
? 早期的网页完全使用 HTML编制，此类网页不会
随着时间、场合等其他因素而变化，被称为, 静
态网页, 。
? 随着 Web技术的发展，单一的 HTML已经不能满足
网页制作的要求。例如，如果用户要求服务器发
布其机器内部的时间信息，仅使用 HTML无法完成
这种要求。
? 需要使用程序语言来把, 静态, 的 HTML网页，变
成, 动态, 的 HTML网页。
网络应用基础 第 7课 6
6.2 Web 中的静态和动态网页
? 动态网页的工作模式有两种，一种是 将程序 代码
镶嵌在 HTML网页中,下载到用户浏览器 中，由
用户浏览器进程对下载的代码进行解读和执行后，
将执行结果显示在浏览器屏幕上。
? 这类动态网页标准的发展是由厂商自主进行的，
因此，其 工作效果往往与浏览器产品有关 。
程序语言 IE6可执行 Netscape6可执行
Java 否 可
Java Script 否 可
VB Script 可 否
ActiveX对象 可 否
浏览器的类型与可执行的动态网页程序的关系
网络应用基础 第 7课 8
6.2 Web 中的静态和动态网页
? 动态网页的另一种工作模式是由服务器执行镶
嵌在 HTML网页中的程序，并将解释的结果发
布到网络上，由用户浏览器并将结果在屏幕上
展示。目前，比较流行的服务器端动态网页程
序设计语言有 JSP,ASP,PHP等。
? 特点,
1、与浏览器无关
2、高可靠性，减轻客户端的负担
3、较为简单方便学习
网络应用基础 第 7课 9
B r o w s e r 执
行 程 序
B r o w s e r 解
读 网 页
S e r v e r
执 行 程 序
静 态 网 页 工 作 模 式 动 态 网 页 工 作 模 式 （ 1 ）
动 态 网 页 工 作 模 式 （ 2 ）
W e b S e r v e r
下 载 网 页
W e b S e r v e r
下 载 程 序
W e b S e r v e r
下 载 结 果
静 态 网 页 和 动 态 网 页 工 作 形 态 示 意
( a )
( b )
( c )
网络应用基础 第 7课 10
6.3 Web 服务器环境的安装
? Web服务器的软件
? 由于 Web服务已经成为十分重要的网络应用，几乎
所有的 NOS都将 Web服务器作为一项服务组件提供
? 案例之一, Windows NT中的 IIS
? 案例之二,Redhat Linux中的 Apache
网络应用基础 第 7课 11
6.3 Web 服务器环境的安装
? Web服务器的软件之二
? 因特网上有专门的 Web服务器供应商和自由软件，最
为著名的当然是 Apache
? 本课程使用 基于 Windows的 Xitami Web server(以下
称 Xitami)来自伊穆提公司（ iMatix Corporation）。
? Xitami小巧玲珑（安装软件本身为 700k）,安装设置
都极为简单。
网络应用基础 第 7课 12
6.3 Web 服务器环境的安装
? ftp://202.117.35.170/Teacher/Network
? Xitami的安装极为简单，对熟悉在 Windows下安装软件
的用户来说，不需要太多的准备。
? 惟一需要在安装过程中留意的是由于 Xitami中有一套简
单的安全控制机制（便于用户通过网络控制和配置服务
器），要求用户在安装时设置管理员用户名和口令，这时
用户必须考虑一套对应的用户名和口令，并妥善记忆或记
录以备不时之用。
? Xitami的安装完毕，可立即运行。
网络应用基础 第 7课 13
Xitami 的属性设置
Xitami 的运行标识
网络应用基础 第 7课 14
6.3 Web 服务器环境的安装
? 对 Xitami进行测试的方法有两种：
? 第一种方法：启动浏览器 （ IE或 Communicator
皆可 ）, 在地址栏中输入一个测试用的 IP：
? HTTP://127.0.0.1 或
HTTP://LOCALHOST
? 在 IP v4的编址机制中,127.0.0.1是一个保留地
址，可用于对本地主机上的服务进程进行环路测
试。
网络应用基础 第 7课 15
6.3 Web 服务器环境的安装
? 第二种方法，使用本地主机的 IP地址进行测试。由于
127.0.0.1的测试只能在本地主机上进行，如果希望从网
络上其他主机上进行测试，则需要知晓服务器的 IP地址，
在 Windows环境下常用的 IP测试软件有 GUI界面的
Winipcfg.exe和字符界面的 Ipconfig.exe。
? 当然也可以使用主机域名进行，但鉴于在实验环境下难
以建立 DNS服务，建议先采用 IP地址进行实验
网络应用基础 第 7课 16
6.4 Web网页的发布和访问
? 每个 Web服务器都有各自的所谓发布目录
? 在进行网页发布时，可以将网页（及文件目录 ）传送
或拷贝到该目录下
? Xitami的默认发布目录为,
c:\xitami\webpages
? 当把测试网页 hello.htm放置到上述目录时,在浏览器中键入,
? http://127.0.0.1/hello.htm即可访问
网络应用基础 第 7课 17
6.5 HTML初步
? HTML的优点,
? HTML文件比较小，便于在网络上传输；
? HTML文档独立于计算机操作平台；
? 原则上，建立 HTML文档不需要任何特殊的软件，只
需一般的文本编辑器即可；
? HTML标记语言，非常便于学习。
网络应用基础 第 7课 18
6.5 HTML初步
? HTML 支 持 通 过 CGI（ Common Gateway
Interface即通用网关接口 ） 方式与用户和外部程
序进行交互 。
? CGI是一种在网络服务器上运行的程序, 用来处
理用户从 Web表单上输入的请求, 查询数据库
上的信息, 向用户提交动态的结果 。
? 理论上, CGI程序可以用任何一种语言编写, 但
大多数程序员用 C/C++,Perl和 PHP语言编写
CGI程序 。
B r o w s e r
M y S Q L
F u n c t i o n
M y S Q L
P r o c e s s
W i n d o w s
X i t a m i
P H P
M y S Q L
D a t a b a s e
基 于 W i n d o w s 的 P H P 与 数 据 库 访 问 模 式 之 一 ( C G I 方 式 )
I n t e r n e t
网络应用基础 第 7课 20
6.5 HTML初步
? HTML还支持 Java编程, 程序员只要将编好的
Java程序按一定的要求嵌入到 HTML文档中, 就
可以完成许多灵活的工作, 如 Home Page中的
动画演示等 。
? HTML还支持 Javascript编程, 程序员可以将
Javascript语句嵌入到 HTML文档中, 完成更多
的交互操作 。
网络应用基础 第 7课 21
6.5 HTML初步
? HTML的局限性
? 直接用文本编辑时，不是所见即所得；
? 不同浏览器对同一个 HTML文档可能得到不同
的显示效果；
? 已定义的标记往往不能满足多方面的需要 ;
? 主要面向人机交互使用，在计算机之间交换数
据不够便利
? HTML的后继者为 XML（ extensible markup
language 可扩展标记语言）
网络应用基础 第 7课 22
HTML句法结构
网络应用基础 第 7课 23
HTML句法结构
? Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
? 另外还有 HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
网络应用基础 第 7课 24
HTML句法结构
? 一般 HTML文档 是普通的 ASCII文本文件，它包含两类内容：
? 普通的文本
<p><font size=-1>2003 Google - 搜索 3,083,324,652 张网页
</font></p>
? 表示页面元素、结构、格式和其它超文本链接的标记
标记 (Tag)是用一对尖括号,<>”括起来的文本串，例如第一行的
<html>。标记通常具有如下结构：
<tagname attribute1=value1 attribute2=value2…>
? 在标记定义中，,tagname”是 标记名,定义标记的类型；而
,attributes”为 属性,一般标记即可以不定义属性，也可以定
义若干个属性，属性给出了这个 元素的附加信息 。
网络应用基础 第 7课 25
HTML句法结构
? 在 Google主页文档第二行的 <head>标记中，
head是标记名，没有相关属性。
? 在文档主体 <body>定义中，定义了若干属性，
例如：,bgcolor=#ffffff text=#000000
link=#0000cc vlink=551a8b alink=#ff0000”。
网络应用基础 第 7课 26
HTML句法结构
? 需要注意，虽然标记和属性名称与字母大小写
无关，但是属性值却往往对大小写敏感。
? 例如，可以在超链中定义相关的文件名，尽管
在 Windows系统中,href=a1和 href=A1可以指
向同一文件，但在 UNIX系统中，却是指向不
同的文件。
? 重要提示：在网页设计须统一命名方案
网络应用基础 第 7课 27
HTML句法结构
? 标记和文本结合起来形成 元素 (Element)。 每个元
素代表文档中的一个对象，比如文件头、段落
或图片。一个元素可具有一个或一对标记，通
常具有一些相关的属性。
? 元素有两种类型：容器（ container）元素和
单个元素（空元素）。
网络应用基础 第 7课 28
HTML句法结构
? 容器元素 包含文本内容，代表一个文本段、它由文本
主体（或其他元素）组成，文本主体在开头和结尾处
用一对标记来确定边界（结尾的标记用标记名前加
,/”来表示，并不带任何属性）。
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
网络应用基础 第 7课 29
HTML文档结构和常用元素
? <HEAD>容器元素中包含的最为常用的元素有：
? <TITLE>text</TITLE>：这个元素是文档的抬头，
类似书籍的页眉。在浏览器中，标题通常与文本页
分开显示（例如，在窗口的标题栏中）。
抬头 （ TITLE）在用户保存网页时一般都作为文
件名，所以命名应该注意。
网络应用基础 第 7课 30
HTML文档结构和常用元素
? <BODY>容器元素中包含以下几个常用元素：
? <H#>text</H#>：标题把括起来的文本作为标题。从标记 <H1>、
<H2>直到 <H6>，可以有六个层次的标题（较小的数字标记较重要
的标题）。标题通常用较大的字型编排，并且在该标题的上下各有
一个空行。
? <P>：段落标识
? <IMG SRC=“URL”>：图像标记把图像插入到文档中，图像可以在
SRC属性中给出的 URL处找到。
? <img src=…>标记就是一个可以在文档中插入图像的单个元素
? 而 单个元素 是由不影响任何文本的单个标记组成的，它会在文
档中插入一些对象。
网络应用基础 第 7课 31
HTML文档结构和常用元素
? <IMG src="URL" align=TOP/MIDDLE/BOTTOM >
? 把图像插入到文档中，图像可以在 src属性指定的
URL处找到。最常见的图像格式是 GIF。
? 可选的 align属性指出文本的当前行与图像在垂直方
向上怎样对齐（通常是 BOTTOM，但这随浏览器的
不同而不同）。
网络应用基础 第 7课 32
? <UL><LI>text<LI>text</UL>：该结构提供了一个无序的条目
列表；每个条目以 <LI>标记开始。通常在显示出的各条目项前
置一个实心的圆点。
? <A HREF=URL>text</A>：超文本标记，也称为超链接。文本
用某种特殊方式来显示（用颜色、下划线或其它类似方法）；
当点击屏幕上的超文本链接时,Web服务器将检索,HREF”
属性中的,URL”给出的文档，并将结果返回给用户浏览器。
? <HR>：放置一个横穿浏览器窗口的水平线，通常水平线的上
下各有一个空行。
? <BR>：在文本中强制换行，以便后继文本都放在下一行。
? <HR> <BR> <P>可以没有相应的结束标志
HTML文档结构和常用元素
网络应用基础 第 7课 33
HTML标准单位
? 在编辑 HTML文件时，会涉及到对各种对象属性的赋
值。例如，定义标题的大小、定义文本的格式、定义
图像的位置、定义水平线和表格的长宽、定义文字和
背景的颜色、定义链接的指向位置等。通常用各种数
据来为这些属性赋值。
? 一些数据，不仅在网页设计时经常要用到，而且它们
的表示方法、代表的含义都有一套比较严格的规则。
网络应用基础 第 7课 34
HTML标准单位
? 长度单位
? 可以用来定义水平线、表格边框、图像等对象的长、
宽、高等一系列属性，同时也能用来定义这些对象
在网页上的位置等属性。
? 长度的表示有两种方式：绝对长度和相对长度。
? 它们的单位分别为像素（ pixel）和百分比（％），
像素代表屏幕上的各个显像点，而相对长度则描述
了对象在浏览器窗口的所占的比例。
网络应用基础 第 7课 35
HTML标准单位
? 一般在网页设计中较少使用绝对长度，因为浏
览器窗口可随时调整大小，如果水平线设置为
绝对长度很容易造成不协调，而使用相对长度
来描述则对象会随浏览器窗口大小变化而变化。
<HR WIDTH="400"> <!--绝对长度 -->
<HR WIDTH="50%"> <!--相对长度 -->
网络应用基础 第 7课 36
HTML标准单位
? 颜色单位也是描述网页表现形式中应用很频繁
的一种数据类型。在设计网页的过程中，需要
能定义字体、页面背景、表格背景甚至超链接
的颜色，通过利用颜色数据来定义这些对象的
颜色属性。
网络应用基础 第 7课 37
HTML标准单位
? 颜色单位有三种表达的方式：
? 十六进制的颜色代码
<font color=#FF0000>Red Characters</font>
? 十进制颜色码
<font color=rgb(0,0,255) > Blue </font>
? 颜色名码
<font color="green">Green Characters </font>
网络应用基础 第 7课 38
HTML标准单位
? 统一资源定位器 (URL)[1]路径是一种因特网
资源地址的表示法。该数据里中可以包括链
接所需协议、链接主机的域名或 IP地址、链
接主机的通讯端口（ port）号、主机文件的
发布路径和文件名称等。
[1] 由 W3C对 HTML 4.0的定义中,URL的描述为,Universal
Resource Identifier（ URI）”。
网络应用基础 第 7课 39
HTML标准单位
? 在 HTML中,URL路径又分为两种形式：绝
对路径和相对路径。
? 绝对路径是将主机地址和主机上资源发布目录的
路径和资源名称进行完整的描述。如,
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
网络应用基础 第 7课 40
HTML标准单位
? 相对路径则是相对于当前的网页所在目录或站点
根目录的路径。如,
<IMG SRC="Snowwhite.jpg">
<!--图像文件 "Snowwhite.jpg"与当前显示的网页在同一目录下；
-->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件 "Leaves.jpg "在与当前显示网页所在目录同层次
的另一子目录 image下； -->
网络应用基础 第 7课 41
HTML基本元素的使用
? 表单（ form）
HTML的表单特性是给予万维网真正力量、完成
生动的交互式应用的因素之一。
HTML表单仅仅是这种特性的一半。一旦用户填
完表单，就把表格提交给一个特殊的程序或脚本，
由这个程序或脚本取出信息，并用这个表格做一些
有用的事（如把用户数据传递给数据库）。
可以把表单看成因特网上通用的一种视窗
（ window）对话框，用于接受用户数据。
网络应用基础 第 7课 42
网络应用基础 第 7课 43
表单 (续 )
? 表单元素
<FORM method ="[GET|POST] action ="URL">form
body</FORM>
<FORM>元素括起整个表单，并给出一些基本
定义。表单仅占用 HTML文档的部分空间；实际上，
一个 HTML文档可以包含几个独立的、完成不同功
能的表单。 method指定了信息传递给 HTTP服务器
的方法； action给出与处理提交信息的脚本（程序）
相关的 URL（ 如,scriptname.asp”，,scriptname.php”）。
网络应用基础 第 7课 44
表单 (续 )
? 表单输入元素
<INPUT name="text" type="string" size=##
value="text" CHECKED>
网络应用基础 第 7课 45
表单输入元素 (续 )
? type属性给出所使用 <INPUT>标记的样式，,string”
可以是：
? CHECKBOX（复选框）。
? RADIO（单选按钮）
? TEXT（单行的文本输入栏）。
? IMAGE（图像放在表单里）
? SUBMIT（提交按钮）
? RESET(清除按钮 )
? HIDDEN（在表单中保留不供显示的内容）
网络应用基础 第 7课 46
表单输入元素 (续 )
? 另外：
? SIZE属性用于设置文本字段的窗口大小（以字符数
为计量单位）。
? CHECKED属性与 CHECKBOX和 RADIO类型一起
使用，用于表示按钮在默认状态时是否被选中。
网络应用基础 第 7课 47
表单 (续 )
? 选项选择元素（类似 Windows中的组合框）
<SELECT name="text" multiple>
<OPTION value="text" selected>content1
<OPTION value="text" >content2
</SELECT>
? 在选项选择元素中，所有可选项目由 <OPTION>元素逐条
列出；通常用下拉式菜单显示。
? 跟在每个 <OPTION>标记后面的 text在下拉框中显示；如
果没有给出 value属性（可选属性）；当用户选择到某选
项时则随表单呈上相应的 text文本。 multiple属性允许选择
多于一个的选项； selected属性指定默认的选择。
网络应用基础 第 7课 48
选项选择元素 (续 )
选项选择举例：
<SELECT name=“code" multiple>
<OPTION value=“010" selected>Beijing
<OPTION value=“029" >Xi’an
</SELECT>
网络应用基础 第 7课 49
表单输入元素 (续 )
? 多行文本输入
<TEXTAREA name="text" rows=##
cols=##>text</TEXTAREA>
类似于 <INPUT TYPE="text">标记，但
允许多行文本输入。 name属性与 <INPUT>
的类似，用行和列属性的数值定义文本输入
区域的大小。元素中 text的值将作为默认内
容显示在文本区域中。
网络应用基础 第 7课 50
HTML基本元素的使用
? 实体
? HTML文档中出现的很多字符不可能通过输入直接放入
HTML文档中，这些字符包括对 HTML有特殊意义的字符，
如，,<”和,>”字符，以及许多键盘上找不到的国际字
符和印刷字符。
? 可以用实体（ Entities）把这些字符放在文档中，实体是
若干个文本片段，它们一起表示单个字符。其一般语法包
括一个,&”号、一个表示字符的名字及一个分号。
网络应用基础 第 7课 51
实体（续）
? 保留字符是 HTML中用于其它目的的普通字符，
如果按原样输入则会引起混乱。
实体 显示形式 备注
< 小于号（ <）
>； 大于号（ >）
& 与号（ &）
"e; 引号（ "） （通常不用）
不换行空白 见下页
网络应用基础 第 7课 52
保留字符 （续）
? 在浏览器中浏览 HTML文档时，浏览器根据单词之间
的留白来自动换行，并且 HTML不支持两个及两个以
上的空格。
? 因此 HTML语言提供了一个不换行空格的标记“＆
nbsp；”，这样如果需要某几个单词之间不出现换行
的话，就可以在这些单词之间使用这个换行标记“＆
nbsp；”来替代空格，并且也可以利用这个标记来建
立两个或两个以上的空格效果。
网络应用基础 第 7课 53
实体（续）
? 国际字符
国际字符指多数除英语外的欧洲语言中使用的字
符，其名字参照 ISO拉丁字符集。
实体 显示形式 备注
Á 带重音的大写 A （ á）
ô 带升降调的小写 o （ ?）
Æ 连字大写 AE （ ? ）
ç 带变音符的小写 c （ ?）
网络应用基础 第 7课 54
HEAD容器 (续 )
? Script元素
<SCRIPT>标记是用来在页面中插入由浏览器执行的脚本程序
（ JavaScript或 VBScript）,<SCRIPT>为容器元素。如：
<script language="JavaScript">
<!--
…
source code
-->
</script>
?,LANGUAGE”属性用来指明脚本语言的种类。因为浏览器往
往可以使用多种脚本语言，所以必须指明语言的种类。
? 注解标记（ <!--和 -->）是为了能与老版本以及无法解析脚本程
序的浏览器兼容。
网络应用基础 第 7课 55
HEAD容器 (续 )
? LINK元素
<LINK name="text" rel="text" href="URL">
在当前文档和另一文档之间建立链接关系。 name属性给
链接起一个名字，比如,Mail to Author”（发给作者），
rel属性描述了链接的类型，比如,made”（表示作者），
,parent”（表示文档是大文档的一部分），,next”（表
示是多文件文档的后续部分），及,pre”（表示前序部
分）。 href属性指向相关的文档。
网络应用基础 第 7课 56
HTML的其他元素
? META元素
<META NAME="text" CONTENT="text">
META元素提供网页作者以各种方式来描述与文
档本身而不是文档内容有关的信息。如 META元素
通常用来为搜索引擎定义页面描述以及搜索关键字；
或者是定义用户浏览器上的 Cookie，还可以设置页
面使其可以根据定义的时间间隔刷新页面。值得注
意的是 META标记是一个单个元素。
网络应用基础 第 7课 57
HEAD容器 (续 )
<meta name="keywords" content="HTML,DHTML,
CSS,XML,XHTML,JavaScript,VBScript">
<meta name="description" content="基于开放平台的
动态网页程序设计 ">
以上语句为搜索引擎列出了关键字列表，这
些关键字可以将页面正确地放置在 Excite，
Alta vista,Lycos和 InfoSeek等著名搜索引
擎的列表上，以便进行快速搜索。
网络应用基础 第 7课 58
HEAD容器 (续 )
<META http-equiv="Expires" content="Tue,20 Aug
2001 14:25:27 GMT">
以上语句会产生一个,Expires,Tue,20 Aug
2001 14:25:27 GMT”的 HTTP的头部（ header），
使得缓存链（ Caches）决定何时取回相关文件的
新版本。大部分浏览器为了节约下载时间，会在本
地硬盘上保存已访网页的临时版本。在用户下次打
开同一页面时，浏览器将直接调用硬盘上的文件，
而不是网上的。
网络应用基础 第 7课 59
HEAD容器 (续 )
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="GB2312">
用户可以通过 META元素为浏览器指定显示当前
网页须用的语言编码，而无需读者自选。上面语句
的黑体部分指定了当前的网页语言编码是简体中文。
如果需要将网页的编码方式指定为繁体中文，可以
使用下面语句：
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="BIG5">
网络应用基础 第 7课 60
本课小结
? 普通网站的基本构成 (Web服务器、中间件、数据库 )
? Web 中的静态和 动态网页 (三种基本形态 )
? Web 服务器环境的安装（ Web的安装与配置 ）
? Web网页的发布和访问（ 网页的发布与测试 ）
? HTML初步（ HTML文件的结构和基本元素 ）
第 6课 网站 建设 和 网 页制作
? 本课内容
? 普通网站的基本构成
? Web 中的静态和 动态网页
? Web 服务器环境的安装
? Web网页的发布和访问
? HTML初步
? 网页设计与编程
网络应用基础 第 7课 2
6.1 普通网站的基本构成
? Web服务器软件
? 网页与文件系统
? 中间件（ HTML与数据库的纽带）
? 数据库系统
B r o w s e r
D a t a b a s e
F u n c t i o n
D a t a b a s e
S e r v e r
P r o c e s s
N O S
W e b S e r v e r
M i d d l e w a r e
D a t a b a s e
普 通 网 站 的 基 本 构 成
I n t e r n e t
H T M L
f i l e s
B r o w s e r
M y S Q L
F u n c t i o n
M y S Q L
P r o c e s s
W i n d o w s
X i t a m i
P H P
M y S Q L
D a t a b a s e
基 于 W i n d o w s 的 P H P 与 数 据 库 访 问 模 式 之 一 ( C G I 方 式 )
I n t e r n e t
网络应用基础 第 7课 5
6.2 Web 中的静态和动态网页
? 早期的网页完全使用 HTML编制，此类网页不会
随着时间、场合等其他因素而变化，被称为, 静
态网页, 。
? 随着 Web技术的发展，单一的 HTML已经不能满足
网页制作的要求。例如，如果用户要求服务器发
布其机器内部的时间信息，仅使用 HTML无法完成
这种要求。
? 需要使用程序语言来把, 静态, 的 HTML网页，变
成, 动态, 的 HTML网页。
网络应用基础 第 7课 6
6.2 Web 中的静态和动态网页
? 动态网页的工作模式有两种，一种是 将程序 代码
镶嵌在 HTML网页中,下载到用户浏览器 中，由
用户浏览器进程对下载的代码进行解读和执行后，
将执行结果显示在浏览器屏幕上。
? 这类动态网页标准的发展是由厂商自主进行的，
因此，其 工作效果往往与浏览器产品有关 。
程序语言 IE6可执行 Netscape6可执行
Java 否 可
Java Script 否 可
VB Script 可 否
ActiveX对象 可 否
浏览器的类型与可执行的动态网页程序的关系
网络应用基础 第 7课 8
6.2 Web 中的静态和动态网页
? 动态网页的另一种工作模式是由服务器执行镶
嵌在 HTML网页中的程序，并将解释的结果发
布到网络上，由用户浏览器并将结果在屏幕上
展示。目前，比较流行的服务器端动态网页程
序设计语言有 JSP,ASP,PHP等。
? 特点,
1、与浏览器无关
2、高可靠性，减轻客户端的负担
3、较为简单方便学习
网络应用基础 第 7课 9
B r o w s e r 执
行 程 序
B r o w s e r 解
读 网 页
S e r v e r
执 行 程 序
静 态 网 页 工 作 模 式 动 态 网 页 工 作 模 式 （ 1 ）
动 态 网 页 工 作 模 式 （ 2 ）
W e b S e r v e r
下 载 网 页
W e b S e r v e r
下 载 程 序
W e b S e r v e r
下 载 结 果
静 态 网 页 和 动 态 网 页 工 作 形 态 示 意
( a )
( b )
( c )
网络应用基础 第 7课 10
6.3 Web 服务器环境的安装
? Web服务器的软件
? 由于 Web服务已经成为十分重要的网络应用，几乎
所有的 NOS都将 Web服务器作为一项服务组件提供
? 案例之一, Windows NT中的 IIS
? 案例之二,Redhat Linux中的 Apache
网络应用基础 第 7课 11
6.3 Web 服务器环境的安装
? Web服务器的软件之二
? 因特网上有专门的 Web服务器供应商和自由软件，最
为著名的当然是 Apache
? 本课程使用 基于 Windows的 Xitami Web server(以下
称 Xitami)来自伊穆提公司（ iMatix Corporation）。
? Xitami小巧玲珑（安装软件本身为 700k）,安装设置
都极为简单。
网络应用基础 第 7课 12
6.3 Web 服务器环境的安装
? ftp://202.117.35.170/Teacher/Network
? Xitami的安装极为简单，对熟悉在 Windows下安装软件
的用户来说，不需要太多的准备。
? 惟一需要在安装过程中留意的是由于 Xitami中有一套简
单的安全控制机制（便于用户通过网络控制和配置服务
器），要求用户在安装时设置管理员用户名和口令，这时
用户必须考虑一套对应的用户名和口令，并妥善记忆或记
录以备不时之用。
? Xitami的安装完毕，可立即运行。
网络应用基础 第 7课 13
Xitami 的属性设置
Xitami 的运行标识
网络应用基础 第 7课 14
6.3 Web 服务器环境的安装
? 对 Xitami进行测试的方法有两种：
? 第一种方法：启动浏览器 （ IE或 Communicator
皆可 ）, 在地址栏中输入一个测试用的 IP：
? HTTP://127.0.0.1 或
HTTP://LOCALHOST
? 在 IP v4的编址机制中,127.0.0.1是一个保留地
址，可用于对本地主机上的服务进程进行环路测
试。
网络应用基础 第 7课 15
6.3 Web 服务器环境的安装
? 第二种方法，使用本地主机的 IP地址进行测试。由于
127.0.0.1的测试只能在本地主机上进行，如果希望从网
络上其他主机上进行测试，则需要知晓服务器的 IP地址，
在 Windows环境下常用的 IP测试软件有 GUI界面的
Winipcfg.exe和字符界面的 Ipconfig.exe。
? 当然也可以使用主机域名进行，但鉴于在实验环境下难
以建立 DNS服务，建议先采用 IP地址进行实验
网络应用基础 第 7课 16
6.4 Web网页的发布和访问
? 每个 Web服务器都有各自的所谓发布目录
? 在进行网页发布时，可以将网页（及文件目录 ）传送
或拷贝到该目录下
? Xitami的默认发布目录为,
c:\xitami\webpages
? 当把测试网页 hello.htm放置到上述目录时,在浏览器中键入,
? http://127.0.0.1/hello.htm即可访问
网络应用基础 第 7课 17
6.5 HTML初步
? HTML的优点,
? HTML文件比较小，便于在网络上传输；
? HTML文档独立于计算机操作平台；
? 原则上，建立 HTML文档不需要任何特殊的软件，只
需一般的文本编辑器即可；
? HTML标记语言，非常便于学习。
网络应用基础 第 7课 18
6.5 HTML初步
? HTML 支 持 通 过 CGI（ Common Gateway
Interface即通用网关接口 ） 方式与用户和外部程
序进行交互 。
? CGI是一种在网络服务器上运行的程序, 用来处
理用户从 Web表单上输入的请求, 查询数据库
上的信息, 向用户提交动态的结果 。
? 理论上, CGI程序可以用任何一种语言编写, 但
大多数程序员用 C/C++,Perl和 PHP语言编写
CGI程序 。
B r o w s e r
M y S Q L
F u n c t i o n
M y S Q L
P r o c e s s
W i n d o w s
X i t a m i
P H P
M y S Q L
D a t a b a s e
基 于 W i n d o w s 的 P H P 与 数 据 库 访 问 模 式 之 一 ( C G I 方 式 )
I n t e r n e t
网络应用基础 第 7课 20
6.5 HTML初步
? HTML还支持 Java编程, 程序员只要将编好的
Java程序按一定的要求嵌入到 HTML文档中, 就
可以完成许多灵活的工作, 如 Home Page中的
动画演示等 。
? HTML还支持 Javascript编程, 程序员可以将
Javascript语句嵌入到 HTML文档中, 完成更多
的交互操作 。
网络应用基础 第 7课 21
6.5 HTML初步
? HTML的局限性
? 直接用文本编辑时，不是所见即所得；
? 不同浏览器对同一个 HTML文档可能得到不同
的显示效果；
? 已定义的标记往往不能满足多方面的需要 ;
? 主要面向人机交互使用，在计算机之间交换数
据不够便利
? HTML的后继者为 XML（ extensible markup
language 可扩展标记语言）
网络应用基础 第 7课 22
HTML句法结构
网络应用基础 第 7课 23
HTML句法结构
? Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
? 另外还有 HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
网络应用基础 第 7课 24
HTML句法结构
? 一般 HTML文档 是普通的 ASCII文本文件，它包含两类内容：
? 普通的文本
<p><font size=-1>2003 Google - 搜索 3,083,324,652 张网页
</font></p>
? 表示页面元素、结构、格式和其它超文本链接的标记
标记 (Tag)是用一对尖括号,<>”括起来的文本串，例如第一行的
<html>。标记通常具有如下结构：
<tagname attribute1=value1 attribute2=value2…>
? 在标记定义中，,tagname”是 标记名,定义标记的类型；而
,attributes”为 属性,一般标记即可以不定义属性，也可以定
义若干个属性，属性给出了这个 元素的附加信息 。
网络应用基础 第 7课 25
HTML句法结构
? 在 Google主页文档第二行的 <head>标记中，
head是标记名，没有相关属性。
? 在文档主体 <body>定义中，定义了若干属性，
例如：,bgcolor=#ffffff text=#000000
link=#0000cc vlink=551a8b alink=#ff0000”。
网络应用基础 第 7课 26
HTML句法结构
? 需要注意，虽然标记和属性名称与字母大小写
无关，但是属性值却往往对大小写敏感。
? 例如，可以在超链中定义相关的文件名，尽管
在 Windows系统中,href=a1和 href=A1可以指
向同一文件，但在 UNIX系统中，却是指向不
同的文件。
? 重要提示：在网页设计须统一命名方案
网络应用基础 第 7课 27
HTML句法结构
? 标记和文本结合起来形成 元素 (Element)。 每个元
素代表文档中的一个对象，比如文件头、段落
或图片。一个元素可具有一个或一对标记，通
常具有一些相关的属性。
? 元素有两种类型：容器（ container）元素和
单个元素（空元素）。
网络应用基础 第 7课 28
HTML句法结构
? 容器元素 包含文本内容，代表一个文本段、它由文本
主体（或其他元素）组成，文本主体在开头和结尾处
用一对标记来确定边界（结尾的标记用标记名前加
,/”来表示，并不带任何属性）。
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
网络应用基础 第 7课 29
HTML文档结构和常用元素
? <HEAD>容器元素中包含的最为常用的元素有：
? <TITLE>text</TITLE>：这个元素是文档的抬头，
类似书籍的页眉。在浏览器中，标题通常与文本页
分开显示（例如，在窗口的标题栏中）。
抬头 （ TITLE）在用户保存网页时一般都作为文
件名，所以命名应该注意。
网络应用基础 第 7课 30
HTML文档结构和常用元素
? <BODY>容器元素中包含以下几个常用元素：
? <H#>text</H#>：标题把括起来的文本作为标题。从标记 <H1>、
<H2>直到 <H6>，可以有六个层次的标题（较小的数字标记较重要
的标题）。标题通常用较大的字型编排，并且在该标题的上下各有
一个空行。
? <P>：段落标识
? <IMG SRC=“URL”>：图像标记把图像插入到文档中，图像可以在
SRC属性中给出的 URL处找到。
? <img src=…>标记就是一个可以在文档中插入图像的单个元素
? 而 单个元素 是由不影响任何文本的单个标记组成的，它会在文
档中插入一些对象。
网络应用基础 第 7课 31
HTML文档结构和常用元素
? <IMG src="URL" align=TOP/MIDDLE/BOTTOM >
? 把图像插入到文档中，图像可以在 src属性指定的
URL处找到。最常见的图像格式是 GIF。
? 可选的 align属性指出文本的当前行与图像在垂直方
向上怎样对齐（通常是 BOTTOM，但这随浏览器的
不同而不同）。
网络应用基础 第 7课 32
? <UL><LI>text<LI>text</UL>：该结构提供了一个无序的条目
列表；每个条目以 <LI>标记开始。通常在显示出的各条目项前
置一个实心的圆点。
? <A HREF=URL>text</A>：超文本标记，也称为超链接。文本
用某种特殊方式来显示（用颜色、下划线或其它类似方法）；
当点击屏幕上的超文本链接时,Web服务器将检索,HREF”
属性中的,URL”给出的文档，并将结果返回给用户浏览器。
? <HR>：放置一个横穿浏览器窗口的水平线，通常水平线的上
下各有一个空行。
? <BR>：在文本中强制换行，以便后继文本都放在下一行。
? <HR> <BR> <P>可以没有相应的结束标志
HTML文档结构和常用元素
网络应用基础 第 7课 33
HTML标准单位
? 在编辑 HTML文件时，会涉及到对各种对象属性的赋
值。例如，定义标题的大小、定义文本的格式、定义
图像的位置、定义水平线和表格的长宽、定义文字和
背景的颜色、定义链接的指向位置等。通常用各种数
据来为这些属性赋值。
? 一些数据，不仅在网页设计时经常要用到，而且它们
的表示方法、代表的含义都有一套比较严格的规则。
网络应用基础 第 7课 34
HTML标准单位
? 长度单位
? 可以用来定义水平线、表格边框、图像等对象的长、
宽、高等一系列属性，同时也能用来定义这些对象
在网页上的位置等属性。
? 长度的表示有两种方式：绝对长度和相对长度。
? 它们的单位分别为像素（ pixel）和百分比（％），
像素代表屏幕上的各个显像点，而相对长度则描述
了对象在浏览器窗口的所占的比例。
网络应用基础 第 7课 35
HTML标准单位
? 一般在网页设计中较少使用绝对长度，因为浏
览器窗口可随时调整大小，如果水平线设置为
绝对长度很容易造成不协调，而使用相对长度
来描述则对象会随浏览器窗口大小变化而变化。
<HR WIDTH="400"> <!--绝对长度 -->
<HR WIDTH="50%"> <!--相对长度 -->
网络应用基础 第 7课 36
HTML标准单位
? 颜色单位也是描述网页表现形式中应用很频繁
的一种数据类型。在设计网页的过程中，需要
能定义字体、页面背景、表格背景甚至超链接
的颜色，通过利用颜色数据来定义这些对象的
颜色属性。
网络应用基础 第 7课 37
HTML标准单位
? 颜色单位有三种表达的方式：
? 十六进制的颜色代码
<font color=#FF0000>Red Characters</font>
? 十进制颜色码
<font color=rgb(0,0,255) > Blue </font>
? 颜色名码
<font color="green">Green Characters </font>
网络应用基础 第 7课 38
HTML标准单位
? 统一资源定位器 (URL)[1]路径是一种因特网
资源地址的表示法。该数据里中可以包括链
接所需协议、链接主机的域名或 IP地址、链
接主机的通讯端口（ port）号、主机文件的
发布路径和文件名称等。
[1] 由 W3C对 HTML 4.0的定义中,URL的描述为,Universal
Resource Identifier（ URI）”。
网络应用基础 第 7课 39
HTML标准单位
? 在 HTML中,URL路径又分为两种形式：绝
对路径和相对路径。
? 绝对路径是将主机地址和主机上资源发布目录的
路径和资源名称进行完整的描述。如,
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
网络应用基础 第 7课 40
HTML标准单位
? 相对路径则是相对于当前的网页所在目录或站点
根目录的路径。如,
<IMG SRC="Snowwhite.jpg">
<!--图像文件 "Snowwhite.jpg"与当前显示的网页在同一目录下；
-->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件 "Leaves.jpg "在与当前显示网页所在目录同层次
的另一子目录 image下； -->
网络应用基础 第 7课 41
HTML基本元素的使用
? 表单（ form）
HTML的表单特性是给予万维网真正力量、完成
生动的交互式应用的因素之一。
HTML表单仅仅是这种特性的一半。一旦用户填
完表单，就把表格提交给一个特殊的程序或脚本，
由这个程序或脚本取出信息，并用这个表格做一些
有用的事（如把用户数据传递给数据库）。
可以把表单看成因特网上通用的一种视窗
（ window）对话框，用于接受用户数据。
网络应用基础 第 7课 42
网络应用基础 第 7课 43
表单 (续 )
? 表单元素
<FORM method ="[GET|POST] action ="URL">form
body</FORM>
<FORM>元素括起整个表单，并给出一些基本
定义。表单仅占用 HTML文档的部分空间；实际上，
一个 HTML文档可以包含几个独立的、完成不同功
能的表单。 method指定了信息传递给 HTTP服务器
的方法； action给出与处理提交信息的脚本（程序）
相关的 URL（ 如,scriptname.asp”，,scriptname.php”）。
网络应用基础 第 7课 44
表单 (续 )
? 表单输入元素
<INPUT name="text" type="string" size=##
value="text" CHECKED>
网络应用基础 第 7课 45
表单输入元素 (续 )
? type属性给出所使用 <INPUT>标记的样式，,string”
可以是：
? CHECKBOX（复选框）。
? RADIO（单选按钮）
? TEXT（单行的文本输入栏）。
? IMAGE（图像放在表单里）
? SUBMIT（提交按钮）
? RESET(清除按钮 )
? HIDDEN（在表单中保留不供显示的内容）
网络应用基础 第 7课 46
表单输入元素 (续 )
? 另外：
? SIZE属性用于设置文本字段的窗口大小（以字符数
为计量单位）。
? CHECKED属性与 CHECKBOX和 RADIO类型一起
使用，用于表示按钮在默认状态时是否被选中。
网络应用基础 第 7课 47
表单 (续 )
? 选项选择元素（类似 Windows中的组合框）
<SELECT name="text" multiple>
<OPTION value="text" selected>content1
<OPTION value="text" >content2
</SELECT>
? 在选项选择元素中，所有可选项目由 <OPTION>元素逐条
列出；通常用下拉式菜单显示。
? 跟在每个 <OPTION>标记后面的 text在下拉框中显示；如
果没有给出 value属性（可选属性）；当用户选择到某选
项时则随表单呈上相应的 text文本。 multiple属性允许选择
多于一个的选项； selected属性指定默认的选择。
网络应用基础 第 7课 48
选项选择元素 (续 )
选项选择举例：
<SELECT name=“code" multiple>
<OPTION value=“010" selected>Beijing
<OPTION value=“029" >Xi’an
</SELECT>
网络应用基础 第 7课 49
表单输入元素 (续 )
? 多行文本输入
<TEXTAREA name="text" rows=##
cols=##>text</TEXTAREA>
类似于 <INPUT TYPE="text">标记，但
允许多行文本输入。 name属性与 <INPUT>
的类似，用行和列属性的数值定义文本输入
区域的大小。元素中 text的值将作为默认内
容显示在文本区域中。
网络应用基础 第 7课 50
HTML基本元素的使用
? 实体
? HTML文档中出现的很多字符不可能通过输入直接放入
HTML文档中，这些字符包括对 HTML有特殊意义的字符，
如，,<”和,>”字符，以及许多键盘上找不到的国际字
符和印刷字符。
? 可以用实体（ Entities）把这些字符放在文档中，实体是
若干个文本片段，它们一起表示单个字符。其一般语法包
括一个,&”号、一个表示字符的名字及一个分号。
网络应用基础 第 7课 51
实体（续）
? 保留字符是 HTML中用于其它目的的普通字符，
如果按原样输入则会引起混乱。
实体 显示形式 备注
< 小于号（ <）
>； 大于号（ >）
& 与号（ &）
"e; 引号（ "） （通常不用）
不换行空白 见下页
网络应用基础 第 7课 52
保留字符 （续）
? 在浏览器中浏览 HTML文档时，浏览器根据单词之间
的留白来自动换行，并且 HTML不支持两个及两个以
上的空格。
? 因此 HTML语言提供了一个不换行空格的标记“＆
nbsp；”，这样如果需要某几个单词之间不出现换行
的话，就可以在这些单词之间使用这个换行标记“＆
nbsp；”来替代空格，并且也可以利用这个标记来建
立两个或两个以上的空格效果。
网络应用基础 第 7课 53
实体（续）
? 国际字符
国际字符指多数除英语外的欧洲语言中使用的字
符，其名字参照 ISO拉丁字符集。
实体 显示形式 备注
Á 带重音的大写 A （ á）
ô 带升降调的小写 o （ ?）
Æ 连字大写 AE （ ? ）
ç 带变音符的小写 c （ ?）
网络应用基础 第 7课 54
HEAD容器 (续 )
? Script元素
<SCRIPT>标记是用来在页面中插入由浏览器执行的脚本程序
（ JavaScript或 VBScript）,<SCRIPT>为容器元素。如：
<script language="JavaScript">
<!--
…
source code
-->
</script>
?,LANGUAGE”属性用来指明脚本语言的种类。因为浏览器往
往可以使用多种脚本语言，所以必须指明语言的种类。
? 注解标记（ <!--和 -->）是为了能与老版本以及无法解析脚本程
序的浏览器兼容。
网络应用基础 第 7课 55
HEAD容器 (续 )
? LINK元素
<LINK name="text" rel="text" href="URL">
在当前文档和另一文档之间建立链接关系。 name属性给
链接起一个名字，比如,Mail to Author”（发给作者），
rel属性描述了链接的类型，比如,made”（表示作者），
,parent”（表示文档是大文档的一部分），,next”（表
示是多文件文档的后续部分），及,pre”（表示前序部
分）。 href属性指向相关的文档。
网络应用基础 第 7课 56
HTML的其他元素
? META元素
<META NAME="text" CONTENT="text">
META元素提供网页作者以各种方式来描述与文
档本身而不是文档内容有关的信息。如 META元素
通常用来为搜索引擎定义页面描述以及搜索关键字；
或者是定义用户浏览器上的 Cookie，还可以设置页
面使其可以根据定义的时间间隔刷新页面。值得注
意的是 META标记是一个单个元素。
网络应用基础 第 7课 57
HEAD容器 (续 )
<meta name="keywords" content="HTML,DHTML,
CSS,XML,XHTML,JavaScript,VBScript">
<meta name="description" content="基于开放平台的
动态网页程序设计 ">
以上语句为搜索引擎列出了关键字列表，这
些关键字可以将页面正确地放置在 Excite，
Alta vista,Lycos和 InfoSeek等著名搜索引
擎的列表上，以便进行快速搜索。
网络应用基础 第 7课 58
HEAD容器 (续 )
<META http-equiv="Expires" content="Tue,20 Aug
2001 14:25:27 GMT">
以上语句会产生一个,Expires,Tue,20 Aug
2001 14:25:27 GMT”的 HTTP的头部（ header），
使得缓存链（ Caches）决定何时取回相关文件的
新版本。大部分浏览器为了节约下载时间，会在本
地硬盘上保存已访网页的临时版本。在用户下次打
开同一页面时，浏览器将直接调用硬盘上的文件，
而不是网上的。
网络应用基础 第 7课 59
HEAD容器 (续 )
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="GB2312">
用户可以通过 META元素为浏览器指定显示当前
网页须用的语言编码，而无需读者自选。上面语句
的黑体部分指定了当前的网页语言编码是简体中文。
如果需要将网页的编码方式指定为繁体中文，可以
使用下面语句：
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset="BIG5">
网络应用基础 第 7课 60
本课小结
? 普通网站的基本构成 (Web服务器、中间件、数据库 )
? Web 中的静态和 动态网页 (三种基本形态 )
? Web 服务器环境的安装（ Web的安装与配置 ）
? Web网页的发布和访问（ 网页的发布与测试 ）
? HTML初步（ HTML文件的结构和基本元素 ）
