郝兴伟
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第三章 HTML和 XML基础
背景
标记语言是 Web应用的基础，标记语言是由内
容和标记组成的，标记指定了内容在浏览器中
的显示形式。在 Web应用中，所有的 Web页面都
是以标记语言书写的具有特定格式的文档。因
此，无论是 Web应用还是开发，都应该对标记
语言有一个基本的认识。
3.1 万维网联盟 （ W3C） 和 SGML
3.2 超文本标记语言 HTML
标记语法和文档结构,
标记及标记属性
列表, 表格 （ table）, 表单 （ form）, 帧 （ frame）
使用层叠样式表 CSS技术
3.3 扩展标记语言 XML
XML简介, 使用文档类型定义 DTD
使用架构 Schema,名称空间
使用 CSS格式化数据, 可扩展样式语言 XSL
创建数据岛, 文档对象模型 DOM,XLink和 XPointer规
范
3.4 XML开发编辑工具
3.5 要使用 XML吗？
Agenda
3.1 万维网联盟（ W3C）
万维网联盟（ World Wide Web Consortium,W3C） 是
一个国际标准化组织，成立于 1994年，其主要目标是
为 World Wide Web的发展开发通用的协议和标准。
HTTP和 HTML协议就是 W3C针对 WWW制定的两个
非常重要的协议 。
W3C网址是,http://www.w3c.org。
标准通用标记语言 SGML
标准通用标记语言 SGML（ Standard Generalize Markup Language,SGML）
是一个用来定义在电子表格中如何对 文件的结构和内容 进行描述的国
际标准（ ISO-8879）。
历史背景,
1969年，当时美国 IBM公司的研究人员开始设计一种名为 GML
（ Generalized Markup Language） 的语言，在印刷、统计等需要大规模数据
处理的行业和部门的支持下，这项研究工作持续了十几年，于 1980年推出
了 SGML（ Standard Generalized Markup Language） 语言，并于 1986年获得
国际标准化组织（ ISO） 的批准。其后,SGML的发展较为平稳，并不为其
领域之外的人们所广泛了解。直至 1991年，当 HTML（ Hypertext Markup
Language） 问世之后，人们才开始认识 SGML。
3.2超文本标记语言 HTML
HTML（ Hyper Text Markup Language,超文本标记语言）是一
种用来制作超文本文档的简单标记语言，是由 SGML发展而来
的，可以说是 SGML的一个子集。简单地说,HTML文件包含
了 文档数据 和 显示格式 两部分，其中文档数据是显示在 WWW
浏览器中的数据内容，显示格式则规定了这些内容在浏览器中
以何种格式、样子呈现给用户。
HTML的版本问题
版本,
HTML2.0—1995,
HTML3.0 Netscape和微软的 HTML版本 相差很大，标记不同
HTML3.2—在 HTML3.0上进行统一
HTML 4.01 Specification（ W3C Recommendation 24
December 1999） This document is a revised version of
the 4.0 Recommendation first released on 18 December
1997 and then revised 24 April 1998
3.2超文本标记语言 HTML-主要内容
主要内容包括,
HTML标记语法和文档结构,
文件头及相关标记,
文件体及相关标记属性,
文档内容标记
列表, 表格 （ table）, 表单 （ form）, 帧 （ frame）
使用层叠样式表 CSS技术
HTML标记语法和文档结构 -一般概念
HTML文档,是纯 ASCII码的文本文件，由, 显示内容, 和, 控
制语句, 两部分组成。 控制语句描述了显示内容以何种形式
在浏览器中显示，并负责客户与服务器之间的信息交换。控制
语句以, 标记（ Tag）,形式出现，以区分于显示内容。
标记,由封装在小于号（ <）和大于号（ >）构成的一对尖括号
之中，标记一般分首标记和尾标记，它们成对出现。 首标记 用
于开启某种形式的显示,尾标记 含, /” 以同首标记区分，用
于关闭首标记开启的功能。
例如,<u>text with underline</u>,首标记 <u>开启下划线
功能，尾标记 </u>关闭下划线功能。
有的控制语句仅需一个标记，没有尾标记。如,<br>表示换行。
标记类型与标记属性
?,单标记,,是指只需单独使用就能完整地表达意思的一类标
记, 这类标记的语法是,
<标记 >
常用的单标记有 <br>,表示换行,<hr>代表一个水平线等。
?“双标记,, 由, 首标记, 和, 尾标记, 两部分构成, 必须成
对使用, 其中首标记告诉 Web浏览器从此处开始执行该标记所
表示的功能, 而尾标记告诉 Web浏览器在这里结束该功能 。 首
标记前加一个斜杠 （ /） 即成为尾标记 。 这类标记的语法是,
<标记 >文档内容 </标记 >
例如,<h1>欢迎光临 </h1>
?属性, 其语法是,
<标记 属性 1="属性值 " 属性 2="属性值 " 属性 3="属性值 "… >
标记属性 举例
? 例如,
可写作,<hr size=“3” align=“center” width=“50%”>。
其中 size属性定义线的粗细, 缺省为 1；
align属性表示对齐方式, 可取 left（ 左对齐, 缺省值 ）,
center（ 居中 ） 和 right（ 右对齐 ） ；
width属性定义线的长度, 可取相对值 （ 整个窗口的百分
比 ）, 也可取绝对值 （ 屏幕像素点的个数, 如 width=“400”）,
缺省值是, 100%” 。
HTML标记语法和文档结构 -文档结构
<html>
<head>
头部信息
</head>
<body>
文档主体
（ 语句部分 ）
</body>
</html>
3.2.2 文件头及相关标记
<head>… </head>标记对之间的部分称为文件头。文件头的内
容主要用于定义 HTML文档在 WWW网中的情况，其内容不
在浏览器中显示
1,<title></title>标记
2,<meta>标记
3,<base>标记
4,<link>标记
5,<isindex>标记
6 注释标记
3.2.2 文件头及相关标记 - <title></title>标记
标识网页主题, 其中的内容将在浏览器的标题栏中显示, 不出
现在页面内 。
例如,
<head>
<title>欢迎光临 GSL网站 </title>
</head>
<meta>标记
它是 HTML文档文件头 <head>… </head>标记内的一个辅助性
标记, 往往不引起用户的注意, 但是它对于网页是否能够
被搜索引擎检索, 提高网页在搜索列表的排序起着关键的
作用, 是一个非常有价值的标记 。
<meta>标记为单标记, 没有尾标记 。 <meta>标记共有两个属
性, 分别是 http-equiv属性和 name属性,
<meta>标记 -name属性
（ 1） name属性
name属性主要用于描述网页, 与之对应的属性值为 content，
content中的内容主要是便于搜索引擎查找信息和分类信息
用的 。 meat标记的 name属性语法格式是,
<meta name=“参数, content=“具体的参数值, >
其中 name属性主要有以下几种参数值,
? keywords（ 关键字 ）, keywords用来告诉搜索引擎该网页
的关键字是什么 。
<meta name="keywords"
content="science,education,culture,,entertaiment ">
<meta>标记 -name属性 (续 1)
? description（ 网站内容描述 ）, description用来告诉搜索引
擎网站的主要内容 。
< meta name="description" content="This page is about
science,education etc.">
? robots（ 机器人向导 ）, robots用来告诉搜索机器人需要索
引的页面有哪些 。 content的参数有 all,none,index、
noindex,follow,nofollow。 默认是 all。
<meta name="robots" content="none">
? author（ 作者 ）, 标注网页的作者 。
<meta name="author" content="brion@mail.abc.com">
<meta>标记 -http-equiv属性
（ 2） http-equiv属性
http-equiv,相当于 HTTP的文件头作用, 它可以向浏览器传回
一些有用的信息, 以帮助正确显示网页内容,
例如按照用户定义的样式表单显示网页内容, 必须使用
<meta http-equiv=“Content-type” content=“text/css”>
与之对应的属性值为 content,content中的内容其实就是各个
参数的变量值 。 meat标记的 http-equiv属性语法格式是,
<meta http-equiv="参数 " content="参数变量值 ">
<meta>标记 -http-equiv属性 (续 )
http-equiv属性主要有以下几种参数,
? content-type（ 显示字符集的设定 ）, 设定页面使用的字符集 。
例如,
< meta http-equiv="content-type" content="text/html;
charset=gb2312">
? expires（ 期限 ）, 用于设定网页的到期时间 。 一旦网页过期,
必须到服务器上重新下栽 。
例如,
< meta http-equiv="expires" content="Fri,12 Jan 2001
18:18:18 GMT">
<meta>标记 -http-equiv属性 (续 1)
? pragma（ Cache模式 ）, 禁止浏览器从本地计算机的缓存中
访问页面内容 。
例如,
<meta http-equiv="pragma" content="no-cache">
该种设定访问者将无法使用脱机浏览功能 。
? refresh（ 刷新 ）, 自动刷新并指向新页面 。
例如,
<meta http-equiv="refresh" content="60; url=new.htm">
则浏览器将在 60秒后, 自动转到 new.htm。 可以利用这个功能,
制作一个封面, 在若干时间后, 自动带读者来到你的目录页 。
如果 URL项没有, 浏览器则刷新本页 。 这就实现了 WWW聊天
室定期刷新的特性
<meta>标记 -http-equiv属性 (续 2)
? set-cookie（ cookie设定 ）, 如果网页过期, 那么存盘的
cookie将被删除 。
例如,
<meta http-equiv="set-cookie"
content="cookievalue=xxx;expires=Friday,12-Jan-2004
20:30:00 GMT； path=/">
? window-target（ 显示窗口的设定 ）, 强制页面在当前窗口以
独立页面显示 。
例如,
<meta http-equiv="window-target" content="_top">
可以用来防止别人在框架里调用自己的页面。
3.2.2 文件头及相关标记 - <base>标记
<base>标记定义了文档的基础 URL地址，在文档中所有的
相对地址形式的 URL都是相对于这里定义的 URL而言的。一
篇文档中的 <base>标记不能多于一个，必须放于头部，并
且应该在任何包含 URL地址的语句之前。
<base>标记属性 -href 属性
（ 1） href 属性
href属性指定了文档的基础 URL地址, 该属性在 <base>标记
中是必须存在的 。
例 如, 如 果 希 望 将 文 档 的 基 础 URL 定义为
,http://www.abc.com”,则可以使用如下语句,
<base href = "http://www.abc.com">
当定义了基础 URL地址之后，文档中所有引用的 URL地址都
从该基础 URL地址开始，例如，对于上面的语句，如果文档
中一个超级链接指向 gsl/welcome.htm,则它实际上指向
的是如下 URL地址：
http://www.abc.com/gsl/welcome.htm
<base>标记属性 - target
（ 2） target
target属性同框架一起使用, 它定义了当文档中的链接被点
击后, 在哪一个框架中展开页面 。 如果文档中超级链接没有
明确指定展开页面的目标框架集, 则就使用这里定义的地址
代替 。 常用的 target的属性值有,
? _blank,表明在新窗口中打开链接指向的页面 。
? _self,在当前文档的框架中打开页面 。
? _parent,在当前文档的父窗口中打开页面 。
? _top,在链接所在的完整窗口中展开页面 。
3.2.2 文件头及相关标记 - <link>标记
<link>标记定义了文档之间的链接关系 。 但在网页中不会有链接
按钮出现,在 HTML的头部可以包含任意数量的 <link>标记, 一般
形式是,
<link href="url,rel=“relationship”>
常用属性,
（ 1） href, href属性值指向链接资源所在的 URL,其中 url是链
接的地址 。
（ 2） rel, rel属性定义了文档和所链接资源的链接关系, 可能
的值包括 alternate,stylesheet,start,next,prev,contents，
index,glossary,copyright,chapter,section,subsection，
appendix,help,和 bookmark等 。 如果希望指定不止一个链接
关系, 可以在这些值之间用空格隔开 。
常用于引用用户自定义样式表单 css文件
3.2.2 文件头及相关标记 - <isindex>标记
可让某些 Web Server 寻找网页内的关键字, 若 Web Server提
供这样的寻找功能, 客户端浏览器也支持寻找功能, 在载入网
页时会看到一个简单的寻找 。
<isindex>的一般形式是,
< isindex prompt=str>
例如,< isindex prompt="输入搜索内容 ">
在 Web页面的开始则出现, 输入搜索内容,, 后面有一个文本
框, 用于输入搜索的内容 。
<isindex>标记并不是只能用于 html文档头部, 它还可以用于表
单 （ form） 内 。
3.2.2 文件头及相关标记 -注释标记
注释标记
一般的形式是
<!--注释性文字 -->
用于在 HTML文当中书写说明性文字, 内容在浏览器中不显示 。
3.2.3 文件体及相关标记属性
在 <body>… </body>标记对之间的部分称为 html文档的文件体 。
文件体中描述的是浏览器中显示的内容 。 文件体由一系列的
控制语句构成, 在 < body>… </body>标记对之间可包含
<p>… </p>,<br>,<hr>等标记, 它们所定义的文本, 图像
等将会在浏览器中显示 。
<body>标记是一个非常重要的标记, 含有大量的属性, 许多重
要的网页功能都是通过 <body>标记的属性实现的, 我们可以
把这些属性分成如下几类,
1,一般属性
2,事件属性
3.2.3 文件体及相关标记属性 -一般属性
3.2.3 文件体及相关标记属性 -一般属性 (续 )
例如,
<body text="Blue">表示 <body></body>标记对中的
文本使用蓝色显示在浏览器中。另外，各个属性可以结合使
用，如：可以写成 <body bgcolor="red"
text="#0000ff">。
3.2.3 文件体及相关标记属性 -事件属性
当一个 Web文档被加载显示或者退出（关闭）的时候，会发
生相应的事件，这些事件在 <body>标记中通过属性来表达。
除了上述传统的事件外，随着浏览器版本的升级，现在还增加
了许多新的事件，以增加人机交互能力，这些事件是,
onMouseMove 鼠标移动,onDblClick 鼠标双击,
onMouseDown 鼠标被按下 等
3.2.4 文档内容标记
HTML文档体是由一系列的标记语句组成的,分成,
1．标题、段落标记
2．文本格式标记
3．图像标记 <img>
4．超链接标记 <a>… </a>
5．影像地图标记 <map> </map>,<area></area>
6,层次块标记 <div>… </div>
7,多媒体标记
8,<applet> </applet>和 <object>… </object>标记
9,其它标记
3.2.4 文档内容标记 -标题、段落标记
（ 1） 标题标记 <h1></h1>… <h6></h6>,一级到六标
题标记, 对应的字体逐渐渐小 。
（ 2） 段落标记 <p>… </p>,标记一个段落, 输出位置转到
下一行开始, 并增加一个空行 。
（ 3） 回车换行标记 <br>,将输出位置转到下一行的开始 。
（ 4） 水平线标记 <hr>, 插入一条水平线 。
（ 5）预排版文本标记 <pre>… </pre>,预排格式文本
（ Preformatted Text） 标记可以产生固定宽度的字体。
（ 6）块引用标记 <blockquote>… </blockquote>,主要
用于在文档中标记一段引用文字（如经典论述，名人的演讲
等），它所包容的文字相对于标记外的文字往左缩进两个字
符的距离。
3.2.4 文档内容标记 --文本格式标记
用来定义文本输出的字体和格式, 如斜体, 黑体字, 下划线
等 。 常用的标记包括,
（ 1） 字体标记 <font>… </font>,属性分别是,face属性给出
字体, 例如 face="宋体 "。 size属性给出字的大小, HTML默认
的字体 size是 3,如 size="5",size="+2"表示在默认字体大小基
础上加 2。 color属性给出字体的颜色 。
（ 2） <b>…</b>, <i>…</i>, <u>…</u>, <strike>…</strike>
标记
<b>… </b>标记为粗体显示 。 <i>… </i>标记为斜体显示标记 。
<u>… </u>为下划线标记 。 <strike>… </strike>删除线显示标记 。
3.2.4 文档内容标记 --文本格式标记 （举例）
举例,
<b><font face="宋体 " size="3" color="#0000FF"><i><u>字体标
记一 </u></i></font></b>
显示效果为,
字体标记一
3.2.4 文档内容标记 --文本格式标记 （续）
（ 3） < big>… </big>,< small>… </small>,<sub>… </sub>、
<sup>… </sup>标记
< big>… </big>和 < small>… </small>标记伟指定字体大小的标
记, < big>… </big>标记示字体放大, < small>… </small>标记
使字体减小 。
<sub>… </sub>和 <sup>… </sup>分别为上下标显示标记 。
例如,
<font face="宋体 ">字体标记二,<big>大字体 </big><small>小
字体 </small></font>
显示效果为,
字体标记二：大字体小字体
3.2.4 文档内容标记 --文本格式标记 （续 2）
（ 4） <strong></strong>,<em></em>,<tt></tt>、
<cite></cite>标记
<strong>… </strong>标记和 <b>… </b>标记类似, 都是字体加
粗标记 。 <em>… </em>标记和 <i>… </i>标记类似, 是斜体强
调标记 。 <tt>… </tt>为打字字体 Courier字体, 字母等宽标记 。
<cite>… </cite>为传记引述斜体效果标记 。
3.2.4 文档内容标记 --图像标记 <img>
<img>标记用以插入图像及设定图像属性, 丰富多彩的图像
可以提高网页的吸引力 。 <img>标记的属性有多达 21个, 下
面是几个主要的属性 。
? align,是指定图像的位置是靠左, 靠右, 居中, 靠上或者
是靠底 。 默认情况下是靠上, 即 align＝ top。 在图文混排时,
这个参数很有用 。
? id属性, 指定的 id号 。
? class属性, 指定图像所属的类型 。
? name,用于设定图像的名称 。
? src,规定插入的图像的 url地址, 也就是含路径的图像文件
名 。
? title,设定图像的标题 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 1）
? alt,表示图像的替代文字, 主要用于在浏览器还没有装入
图像 （ 或关闭图像显示 ） 的时候, 先显示有关此图像的信息 。
? border,设定图片的边框 。
? height和 width,分别用于指定图像的高度和宽度, 可以与图
片原来的宽度和高度不同 。
? hspace和 vspace,分别用于设定图像的左右边框大小和上下
边框大小, 在图文混排时会用到 。
? ismp和 usemap,在应用图像地图 （ map） 时使用 。 ismap表
示图像地图的数据存放在服务器中, 当鼠标在图像上的某个
区域上时, 可以将此区域的坐标传送给服务器处理 。 usemap
则用于设定图像地图的名称 。
? dynsrc,指定要下载的影像片断的 url地址 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 2）
? controls,设定影像播放的控制接钮 。
? start,设定何时开始播放影像片断, 有 三种选择：
start=fileopen表示页面载入后即开始播放, 默认的就是这种状
态； start=mouseover表示当鼠标移到影像上即开始播放；
start=fileopen,mouseover表示当有上面两种情况之一发生时就
开始播放
? loop,指定影像片断的播放次数, 当 loop=-1时, 影像片断
将循环播放直至页面更新 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 3）
除了上述一般属性外, <img>标记还有几个事件属性, 分别
是,
? onload,图像被载入时触发 。
? onabort,图像取消载入时触发 。
? onerror,图像载入出错时触发 。
并不是真正地把图像加入到 HTML文档中, 而是将标记的 src
属性赋值为图形文件所在的路径及文件名 （ 图像的格式可以
为 gif或 jpg） 。
3.2.4 文档内容标记 --例 3-2 图像标记
[例 3-2] 图像标记的灵活运用示例 （ p63）
下面代码显示一幅泰山图片, 当鼠标移到图片的时候, 显示
一个简单的介绍, 鼠标移走后重新显示图片 。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Taishan Introduction</title>
</head>
<body>
<img src="image/t01.jpg" width="200" height="150" border="1" align="left"
name="tai" alt="taishan" vspace="10" hspace="10"
onmouseover="tai.src='image/t02.gif'"
onmouseout="tai.src='image/t01.jpg'" >
</body>
</html>
3.2.4 文档内容标记 --超链接标记 <a>… </a>
超链接标记 <a>… </a>可以定义超文本链接, 图像链接等 。
（ 1） 超文本链接
超文本链接的一般格式为,
<a href="url">字符串 </a>
href属性的值为统一资源定位器 （ url） 地址, 字符串为显示的
文字, 一般显示为蓝色 。 当鼠标指向这个字符串时, 鼠标变成
手形, 表示当前位置是一个超链接 。 例如,
<a href="http://www.w3c.org">W3C组织 </a>
（ 2） 图像链接
<a>… </a>标记可以用于图像链接, 一般用法是,
<a href="url"><img src="imgeurl"></a>
超链接标记 <a>属性
? target属性, 定义超链接打开的目标窗口 。 一般形式是
target="window-name",还可以取下面常量,_self（ 相同框
架 ）, _blank（ 新建窗口 ）, _top（ 整页 ）, _parent（ 父窗
口 ） 。
? title属性, 属性值为一字符串, 鼠标指向超链接时, 鼠标右下
角显示标题文本 。
? name属性, 定义一个书签 。 标识一个书签的方法为,
<a name="name">书签文本 </a>
我们就把放置标记的地方做了一个叫做, name”的标记 。
有了书签后, href属性除了指向一个网址外, 还可以定位到网
页内一个具体的书签, 用法是 href="url#name",如果是同一个
页内, 可以写成 href="#name",其中 name是书签名, 同一网页
内不能重名 。
超链接标记 <a>举例
[例 3-3] 超链接标记使用示例 。 (p64)
下述代码演示了超文本链接, 在 html文档中插入书签, 图像链
接的应用 。
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
</head>
<body>
<p align="center">美丽的山东 </p>
<p><a href="#济南 "><img border="0" src="image/1.jpg" width="30"
height="30"></a></p>
<p><a name="济南 ">美丽的泉城 </a></p>
<p><a name="青岛 ">美丽的海滨城市 --青岛 </a></p>
<a href="http://www.cnta.com/" title="中国旅游网 " target="_blank">
主要旅游网 </a>
</body>
</html>
3.2.4 文档内容标记 --影像地图标记
一个图象映射 （ map） 由一些区域 （ area） 组成, 每个区域对
应于一个相关联的超级链接, 当点击那个区域时就转到相应的
那个链接 。
（ 1） <map>… </map>标记
有一个开始和结束标志, 中间是一系列的 area标记, 具有一个
name属性, 指出图像地图的名称 。
（ 2） <area>… </area>标记
<area>标记主要用于图像地图 （ map）, 通过该标记可以在图像
地图中设定作用区域 （ 又称, 热点, ）, 当用户鼠标移到某作
用区域点击时, 执行对应的事件处理函数 。
影像地图标记 -属性
<area>标记属性有,
? class属性, 指定热点的类型 。
? id属性, 指定热点的 id号 。
? href属性, 用于设定该热点所链接的 url地址 。
? alt属性, 用于设定热点的替代性文字 。
? shape属性 coods属性, shape和 coords是两个主要的参数,
用于设定热点的形状和大小 。 其基本用法如下,
shape="rect" coords="x1,y1,x2,y2",表示设定热点的形状为矩
形, 左上角顶点坐标为 （ X1,y1）, 右下角顶点坐标为
（ X2,y2） 。
影像地图标记属性（续）
shape="circle" coords="x1,y1,r",表示设定热点的形状为圆形,
圆心坐标为 （ X1,y1）, 半径为 r。
shape="poligon" coords="x1,y1,x2,y2,....."表示设定热点的形
状为多边形, 各顶点坐标依次为 （ X1,y1）, （ X2,y2）,
（ x3,y3） …
<area>标记是在图像地图中划分作用区域的, 其划分的作用区
域必须在图像地图的区域内, 所以在用 <area> 标记划分区域
前必须用 <map>标记来设定图像地图的作用区域, 并为指定的
图像地图设定名称 。
举例,
[例 3-4] 使用图像地图示例
影像地图标记实例
[例 3-4] 使用图像地图示例
根据上面的要求, 我们可以按照下面的步骤完成,
使用 Frontpage2000制作
（ 1） 插入中国地图图片 （ chinamap.jpg）, 并设置好图像的有
关属性参数, 且在 <img>标记中设置参数 usemap="chinamap"
ismap,以表示对图像地图 （ chinamap） 的引用 。
（ 2） 用 <map>标记设定图像地图的作用区域, 并取名为
chinamap。
（ 3） 分别用 <area>标记针对每个省 （ 直辖市 ） 的位置划分出多
边形作用区域, 并设定好其链接参数 href。
3.2.4 文档内容标记 --层次块标记 <div>… </div>
为了更好的实现元素的精确定位, 动态 HTML (Dynamic HTML)
给 HTML 增加了网页中层 (layer) 和位置 (position)的概念 。
对于两种主流的浏览器, 对层的支持是不一样的, IE支持 <div>
标记, Netscape支持 <layer>标记 。
图层的概念广泛应用于 Dreamweaver,photoshop等 。
层次块标记 <div>属性
<div> 标记用于定义一个块, 中间可以包含引起行中断的标记,
如 <table>标记等 。
<div>标记的属性,
? id属性, 用于标记一个 <div>块, 以便引用该块 。
? style属性
例如, 在 IE浏览器中, 可以用下面的方法定义 <div>块,
< div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">文本块示例
</div>
如果是在 Netscape中, 相同的功能应写为,
< layer bgcolor="#ffffcc" left=150 top=200 width=200
height=20>文本块示例 </layer>
层次块标记 <div>浏览器区分
在实际编写 Web应用时候, 可以通过下属代码来区分两种不同
的浏览器 。
if (document.all) {
// 编写 IE支持的代码
,.,
}
else if (document.layers) {
// 编写 Netscape支持的代码
,.,
}
层次块标记 <div> 实例
[例 3-5] 定义 div块并进行平滑移动
在浏览器窗口定义一个 div块, 双击鼠标左键, div块从左向右平
滑移动, 单击鼠标左键, 停止移动 。
解释请参看书本 （ p67）
3.2.4 文档内容标记 --7,多媒体标记
（ 1） <bgsound> 标记, 用以插入背景音乐, 但只适用于 IE浏
览器 。 主要属性包括,
? src属性, 给出 midi音乐文件的 。
? autostart属性, 设置音乐文件播送结束后的处理, 如果为 true，
则自动播放音乐, 为 false 则结束不播放, 默认值为 falese。
? loop属性, 设置是否自动反覆播放, loop=2 表示重复两次,
Infinite 表示重复多次 。
（ 2） <embed>标记
<embed> 是用以插入各种多媒体, 包括声音, 音乐或影像等 。
格式可以是 Midi,Wav,AIFF,AU 等, Netscape 及 新版的
IE都支持该标记 。 主要属性包括,
3.2.4 文档内容标记 --7,多媒体标记 (续 )
? src属性和 autostart属性, 同 <bgsound>标记 。
? hidden属性, 是否完全隐藏控制画面, true 为是, no 为否
(内定 )。
? starttime 属性, 设 定 歌 曲 开 始 播 放 的 时 间 。 如
starttime="00:30" 表示从第 30秒处开始播放 。
? volume属性, 设定音量大小, 数值是 0到 100之间 。 内定则为
使用者系统本身之设定 。
? width属性, 设定控制画面的宽度和高度 。
? align属性, 设定控制画面和旁边文字的对齐方式, 取值可以
是 top,bottom,center,baseline,left,right,texttop、
middle,absmiddle,absbottom。
3.2.4 文档内容标记 --7,多媒体标记 (续 2)
? controls属性, 设定控制画面的外貌 。 取值可以是 console
（ 一般正常的面板, 默认值 ）, smallconsole（ 较小的面板 ）,
playbutton（ 只显示播放按钮 ）, pausecutton（ 只显示暂停按
钮 ）, stopbutton（ 只显示停止按钮 ） 或 volumelever（ 只显示
音量调整钮 ） 。
3.2.4 文档内容标记 —
8,<applet> … </applet>标记和 <object>… </object>标记
为了满足网页制作更加复杂的功能, HTML扩展了许多新的标
记, 用以插入脚本程序, Java程序, 内嵌对象, Active控件等,
从而制作出更加新颖, 丰富和交互能力更强的 Web页面 。 这些
扩展的标记主要是 <script>,<bssound>,<embed>,<applet>、
<object>等, 前面几种标记在上面已经做过介绍, 下面我们介
绍 Java小程序标记和对象标记 。
（ 1） Java小程序标记 <applet> … </applet>用于插入 Java程序
段
（ 2） <object>… </object>标记
<object>… </object>标记用于在网页中插入对象, 除了可以插
入 ActiveX控件外, 还可以插入 OLE对象, 如图像, 文档, 动画,
小程序等 。
（ 介绍略 ）
3.2.4 文档内容标记 --9,其它标记
（ 1） <marquee>… </marquee>标记
（ 2） 闪烁文字 <blink>… </blink>标记
[例 3-6] 超链接标记使用示例 。
下述代码演示了 <a>标记, <div>标记以及 <marquee>标记的组
合应用, 当鼠标指向一个超文本链接时, 在鼠标的右下角显示
marquee效果 。
解释参见 p71
3.2.5 列表
列表 （ list） 是 HTML文档中文档内容的一种重要的表现形式,
特别适合于罗列有关信息内容, 具有清晰明了, 易于查阅, 操
作性强的特点 。
列表可以嵌套, 显示时按层次缩进, 清晰明了 。
HTML中的列表分为三种,
3.2.5 列表 -种类
（ 1） 不编号列表 （ unnumbered list）, 标记是 <ul>… </ul>
<ul>列表包含若干个列表项 （ list item）, 列表项标记是
<li>… </li>,<li>标记可以有属性 type,取值可以是 disk,circle,
square。
（ 2） 编号式列表 （ ordered list）, 标记是 <ol>… </ol>,<ol>列
表包含若干个列表项 （ list item） 。 <ol>标记有 start属性, 可以
是数字 1,2等, 用于指定开始编号 。
（ 3） 定义式 （ definition list）, 标记是 <dl>… </dl>。
定义列表通常包含有交替出现的定义术语 （ definition term）
（ 标记为 <dt>） 和定义描述 （ definition definition） (标记为
<dd>)。
3.2.5 列表 -举例
<UL>
<LI type=circle> 艺术的形式
<OL start=1>
<LI> 文学
<LI> 音乐
<LI> 绘画
</OL>
<LI type=disk> 科学与技术的内涵
<DL compact>
<dt> 科学
<dd> 科学是指,.,
<dt> 技术
<dd> 技术是指,.,
</DL>
</UL>
3.2.6 表格（ table）
表格 （ table） 是网页制作中安排布局最好的工
具, 因为表格不但可以很好地安排文本或图像
的显示位置, 而且还可以任意进行背景和前景
颜色的设置 。
1,<table>… </table>标记
2,<tr></tr>,<th></th>,<td></td>
3,<caption></caption> 标记
<table>… </table>标记
< table>… </table> 标记对用来创建一个表格, 每个
<table>… </table>标记对之间包含若干 <tr>… </tr>,一个 <tr>对
应表格的一行 。 每一个 < tr>… </tr> 标记对又包括若干个
<td>… </td>标记对, 它对应一行中的一格单元格 。
举例,FrontPage2000,插入表格
3.2.6 表格（ table） - 属性
3.2.6 表格（ table） -<tr></tr>,<td></td>
一个表格由若干行 （ Row） 构成, 每一行又由若干个单元格
（ Cell） 组成, 另外一个表格还可能具有一个标题 （ Head） 。
根据上述表格的结构，在 <table>… </table>标记对之间，
用 <tr>… </tr>标记对来创建表格中的每一行（ Row）,表
有多少行就有多少个 <tr></tr>标记对； <td>则填充由
<tr>和 <th>组成的表格,<td></td>标记对用来创建表
格中一行中的一个单元格,<td></td>标记对之间输入单
元格中要显示的内容。
FrontPage2000,插入表格演示
3.2.6 表格（ table） -<tr></tr>,<td></td>属性
<tr>还有 align和 valign属性, 分别表示水平对齐和垂
直对齐方式 。 <td>具有 width,colspan,rowspan和
nowrap属性 。 width是单元格的宽度, 单位用绝对像
素值或总宽度的百分比； colspan设置一个单元格跨
占的列数 （ 缺省值为 1）, rowspan设置一个单元格
跨占的行数 （ 缺省值为 1） ； nowrap禁止单元格内
的内容自动换行 。
3.2.6 表格（ table） -<caption></caption> 标记
标记表格标题, 具有 align和 valign属性 参数, 设置水
平和垂直对齐方式 。
[例 3-7] 使用表格示例
3.2.7 表单（ form）
表单 （ form） 在 Web网页中用来给访问者填写信息,
从而能获得用户信息, 使网页具有交互能力 。 表单
和 Windows的对话框类似, 是由若干控件组成的,
用于实现和用户的交互 。 当用户填写完信息后做提
交 （ submit） 操作, 表单的内容将从客户端的浏览
器传送到服务器上, 由 Web服务器上的服务器脚本
程序处理 。
表单及输入类型
（ 1） 表单标记 <form>… </form>
<form>… </form>标记对用来创建一个表单, 即定义表单的开始和
结束位置, 在标记对之间的一切都属于表单的内容 。
<form>标记的属性有,
? name属性, 给出表单的名称, 常常用于脚本编程, 在一个网页
中, 可以含有多个表单 。
? action属性, action的值是表单处理程序的网络路径和程序名,
如,<form action="http://www.abc.com/feedback.jsp">,当用户
提交表单时, 服务器将执行网址 http:// www.abc.com/上的表单处
理程序 feedback.jsp。
表单及输入类型（续 1）
? method属性, method属性用来定义服务器表单处理程序从表
单中获得信息的方式, 有 get或 post两种传输方式 。
?target属性, target属性用来指定目标窗口或目标帧,显示表单
处理程序的视窗名称 。
表单及输入类型（续 2）
（ 2） 输入控件标记 <input type="">
<input type="" name = >标记用来定义用户输入区, 无尾标注 。 此标记必须
放在 <form>… </form>标记对之间 。 一般形式是,
<input type="" name = "" value="" … >
? type 属性, 给 出 控 件 的 类 型, 常 用 的 类 型 text,TEXTAREA,
Radio,Checkbox,Button。 <SELECT> <OPTION>,Image,Hidden,
Password,,File Submit/Reset,
? name属性, name属性给出输入控件的名字, 该名称可以使用户清楚当前
的要做的选择和输入的内容 。
? value属性, 保存用户的输入和选择, 服务器就是通过调用输入区域的
value属性值来获得该区域的数据 。 另外, 用户可以通过 value属性来指定输
入区域的缺省值 。
text单行文本框控件
单行文本框, 一般形式是,
<input type="text" … >
主要属性有,
? name属性, name为文本框的名称, 便于程序获取用户输入 。
? value属性, value属性存储文本框的初始值 。
? size属性, Size属性表示文本框的显示长度 。
? maxlength属性, maxlength是文本框中输入的有效数据长度 。
例如,html代码如下
<form name="myForm" method="POST" action="/progs/feedback.jsp">
用户账户,<input type="text" name="AccountStr" size="10" value="guest"
maxlength="8"> </form>
text单行文本框控件 -显示
在 Dreamweaver中设计视图的显示结果
去掉 form标记则不显示红色的部分
3.2.7 表单（ form） -password
输入密码文本框, Password 的属性和 Text是完全相同, 两者不同是, 当用户
输入密码时, 区域内将会显示 "*"号 。
一般形式是,
<input type=" password " … >
例如, html代码如下,
<form name="myForm" method="POST" action="/progs/feedback.jsp">
密 码, < input type="password" name="myPassword" size="10"
maxlength="8">
</form>
显示效果为,
password –显示
显示效果为,
<textarea> 输入
多行文本框, 又称滚动文本框 。 和其它的输入类型不同, 它不是通过 <input
type=" " … >来指定的, 它是一个双标记, 写作,<textarea>… </textarea>,此
标记对用于 <form>… </form>标记对之间 。
<textarea>标记的主要属性有,
? name属性, name为多行文本框的名称, 便于程序获取用户输入 。
? rows属性和 cols属性, 分别用来设置文本框的列数和行数, 列与行以字符数
为单位 。
例如,exa3-a（ p78）
<textarea> 实例
例如,exa3-a（ p78）
<table border="1" cellpadding="2" width="350" >
<tr>
<th width=“30” align=“center”>简 <br><br>介
</th>
<td width="300">
<form name="myForm" method="POST"
action="--WEBBOT-SELF--">
<textarea name="brief" rows="5"
cols="40">简要说明 </textarea>
</form>
</tr>
</table>
3.2.7 表单（ form） - button
按钮控件, 一般形式是,
<input type="button" … >
按钮是最长使用的一种输入控件, 除了具有若干的属性外, 同时还可以接受
各种鼠标事件, 主要属性有,
? name属性, name为文本框的名称, 便于程序获取用户输入 。
? value属性, value为按钮的显示名称 。
例如, 有如下 html代码,
<form name="myForm" method="POST" action="/progs/feedback.jsp">
<input type="Button" value="回前一页 " onclick="history.go( -1 );return true;">
<input type="Button" value="关闭窗口 " onclick="window.close();return true;">
</form>
Button显示
在 Dreawweaver中的显示效果
3.2.7 表单（ form） - radio
单选钮, 往往是若干个 radio为一组 。 每一个 radio 必须且仅有一个 value，
通常有两个或以上 radio具有相同的 name,但不同的 value,从而选择其中
之一 。
? name属性, 单选扭的名称, 一般是若干个 radio一组, 取相同的 name。
? checked属性, 用来设置该单选框缺省时是否被选中, 相同 name的多个
Radio中只能有一个选择, 或都不使用该参数 。
? value属性, 存储单旋钮的取值, 多个具有相同 name的单旋钮应该具有
不同的 value。
例如,html代码如下,exa3-b（ p79）
Radio显示效果
Radio显示效果
3.2.7 表单（ form） - checkbox
复选框, 一般形式是,
<input type=" checkbox " … >
复选框是对某种输入做出, 是, 或, 否, 的选择, 除了具有若干属性外,
同时还可以接受鼠标事件 。 和 radio不同, 每一个 checkbox都是独立的 。
chebox的主要属性有,
? name属性, name为复选框的名称, 便于程序获取用户输入 。
? value属性, 每一个 Checkbox 必须有一个 value,当复选框选中 value值
便会传到表单的 action属性指定的程序中 。
? checked属性, 用来设置该复选框缺省时是否被选中 。
例如, html代码如下：例如,html代码如下,exa3-c
Checkbox显示效果
Checkbox显示效果
3.2.7 表单（ form-<select> … </select>和 <option>
<select>… </select>标记对和 <option>… </option>标记对用来创建一个下拉
列表框或可以复选的列表框 。 他不需要在 <input type=" ">中指定输入类型 。
（ 1） <select>… </select>标记对的一般形式是,
<select name=" ">
<option value=" ">… </option>
<option value=" ">… </option>
… …
</select>
<select> 属性
<select>标记的属性有,
? name属性, name为下拉式列表控件名称, 便于程序获取用户输入 。
? size属性, 下拉式列表的高度, 缺省时值为 1,若没有设置 （ 加入 ） multiple
属性, 显示的将是一个弹出式的列表框 。 若使用此参数则不会有 PopUp效果 。
如果小于可选的项目数量, 则出现垂直滚动条 。
? multiple属性, 指定是否可以多选 。 multiple属性不用赋值, 直接加入标记中
即可使用, 加入了此属性后列表框就成了可多选的了 。
<option>… </option>标记
（ 2） <option>… </option>标记
<option>标记用来指定列表框中的一个选项, 它放在 <select>… </select>标记
对之间 。 主要参数有,
? value属性, 用来给 <option>指定的那一个选项赋值, 这个值是要传送到服务
器上的, 服务器通过调用 <select>区域的 name的 value属性来获得该区域选中
的数据项的 。
? selected属性, selected用来指定默认的选项, 一个下拉是复选框可以有一项
或零可内定被选 。
例如,html代码如下,
<select> … </select>和 <option>显示效果
<form name="myForm" method="POST" action="/progs/feedback.jsp">
城市,
<select name="city" width="100">
<option value="beijing">北京 </option>
<option value="shanghai">上海 </option>
<option value="guangzhou">广州 </option>
<option value="hk">香港 </option>
<option value="jinan" selected>济南 </option>
<option value="qingdao">青岛 </option>
</select>
</form>
3.2.7 表单 （ form） - image
Image输入类型, 通常用于取代 submit/reset两个默认的按钮, 来制造个性化
的按钮, 因为由这两个按钮并不漂亮, Image输入的一般形式是,
<input type="image" … >
主要的属性有,
? name属性, 所要代表的按键, 可以是 submit,reset或其它 。
? src属性, 设置按钮图片, 如果按键图片文件不与该 html文件在同一目录下,
需要加上正确的相对或绝对途径 。
3.2.7 表单 （ form） - hidden
hidden为定义隐藏表单的元素, 它在网页上并不显示, 只是随表单一起传
给表单的 action属性指定的程序 。
一般形式是,
<input type="hidden" … >
主要的属性有,
? name属性, 所要代表的控件名称, 便于程序获取用户输入 。
? value属性, 默认值 。
例如, 有如下代码,
<input type="hidden" name="myID" value="730118">
当表单提交后, 服务器程序可以获得 myID的值是 730118,从而实现传送数
据的目的 。
3.2.7 表单 （ form） - file
文件上传输入 file是 html新增加的表单控件, 用于实现文件的上传操作 。 在介绍
具体的使用以前, 先介绍有关文件上载的相关知识 。
（ 1） 文件上载知识
在 TCP/IP中最早出现的文件上载机制是 FTP,它是将文件由客户端发送到服务
器的标准机制
为了实现在 http协议上上载文件, RFC1867在表单中增加了新的输入类型, 就
是 <input type="file"… >。
注,RFC（ Request for Comments Document,请求注释 ）, 。 RFC往往是
Internet一些标准的草案 。 通常, 当某家机构或团体开发出了一套标准或提出
对某种标准的设想, 想要征询外界的意见时, 就会在 Internet上发放一份 RFC，
对这一问题感兴趣的人可以阅读该 RFC并提出自己的意见 。 绝大部分网络标准
的制定都是以 RFC的形式开始的 。
3.2.7 表单 （ form） - file（ 续 1）
（ 2） <input type="file"… >输入
file类型的输入将显示一个文本框, 用于文件名的输入, 同时在文本框的后面显
示一个, 浏览 …, 按钮, 允许用户通过浏览的方式选择要上传的文件 。
3.2.7 表单 （ form） - file（ 续 2）
主要的属性有,
? name属性, 所要代表的控件名称 。
? size属性, 所显示文字盒的长度 。
? maxlength属性, 可输入字符的个数 。
? accept属性, 接受的文件类别, 有二十六种选择, 但可不设定 。
="text/html"
3.2.7 表单 （ form） - file（ 续 3）
例如, 有如下代码,
<form name="myForm" method="POST" action="/progs/archievefiles.jsp">
文 件, < input type="file" name="upload" size="15" maxlength="50"
accept="text/html">
</form>
3.2.7 表单 （ form） - submit/reset
最后, 我们介绍两个走重要的按钮, 就是当表单填写完毕后, 需要选择的
submit/Reset按钮, 它结束表单输入, 然后开始处理用户的输入数据 。
（ 1） 表单提交
表单提交按钮就是将表单内容提交给服务器, 一般形式是,
<input type="submit"… >
有如下属性,
? name属性, 这和其它控件的属性不同, 在提交表单中, name可以指定一个
函数, 需要和 form标记中 action属性的程序配合 。 一般情况下, 不需要 name属
性 。
? value属性, 提交按钮的显示名字, 一般为, 确定,,, 提交, 等易于理解的
名字 。
3.2.7 表单 （ form） - submit/reset（ 续）
（ 2） 重填按钮
表单清除就是要将表单中已经的输入和选择全部清除, 重新填写 。
一般形式是,
<input type="reset"… >
属性和表单提交相同,
3.2.7 表单 （ form） - submit/reset（ 例子）
下面是通过 Frontpage在网页中插入表单的默认代码,
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"
S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<input type="submit" value="提交 " name="B1"><input type="reset" value="
全部重写 " name="B2">
</form>
在上述代码中, <form>标记中的 action没有指定表单处理程序, 则采用 Web服
务器端 Frontpage扩展中一个 默认的宏 "--WEBBOT-SELF--",来处理用户的表
单数据 。 这个 action往往需要用户程序来代替, 以便处理用户的输入 。,
3.2.7 表单 （ form） - 例 3-8
[例 3-8] 一个利用 form计算阶乘的例子 。 （ p83）
3,2.8 帧（ frame）
帧 （ Frame） 可以用
来将浏览器窗口划分
为多个区域 （ 子窗
口 ）, 每个子窗口中
装载一个 HTML文件 。
即每个 HTML文件占
据一个帧, 而多个帧
可以同时显示在同一
个浏览器窗口中, 这
样的 Web页面称为框
架网页 。
<frameset>… </frameset>标记
< frameset>… </frameset> 标 记 对 放 在 帧 的 主 文 档 的
<body></body>标记对的外边, 也可以嵌在其它帧文档中,
并且可以嵌套使用 。 此标记对用来定义主文档中有几个帧并
且各个帧是如何排列的 。 它具有 rows和 cols属性, 使用
<frameset>标记时这两个属性至少必须选择一个, 否则浏览
器只显示第一个定义的帧 。
rows用来规定主文档中各个帧的行定位, 而 cols用来规定主
文档中各个帧的列定位 。 这两个属性的取值可以是百分数,
绝对像素值或星号 (,*” ),其中星号代表那些未被说明的空
间, 如果同一个属性中出现多个星号则将剩下的未被说明的
空间平均分配 。 同时, 所有的帧按照 rows和 cols的值从左到
右, 从上到下排列 。
3,2.8 帧（ frame） - 举例
例子,exa3-e(p85)
<html>
<head>
</head>
<frameset rows="64,*,64">
<frame name="top" src="new_page_2.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="new_page_3.htm">
<frame name="main" src="new_page_4.htm">
</frameset>
<frame name="bottom" target="contents" src="new_page_5.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
帧的显示效果
将屏幕分成四
个区域，可以
同时显示四个
不同的 html文
件
<frame>标记
<frame>标记放在 <frameset>… </frameset>之间, 用来定义
一个具体的帧 。
<frame>标记具有 src和 name属性, 这两个属性都是必须赋值
的 。 src是此帧的源 HTML文件名 (包括网络路径, 即相对路径
或网址 ),浏览器将会在此帧中显示 src指定的 HTML文件；
name是此帧的名字, 这个名字是用来供超文本链接标志 <a
href=“” target=“”>中的 target属性用来指定链接的 HTML文
件将显示在哪一个帧中 。
例如,
<a href="newone.htm" target="main">链接的文本 </a>
<noframes>… </noframes>标记
有 的 浏 览 器 不 支 持 框 架 网 页, 此 时 需 要 使 用
<noframes>… </noframes>标记对, 用来在那些不支持帧的浏
览器中书写传统的 <body>… </body>部分 。
3.2.9 使用层叠样式表 CSS技术
所有的 HTML标记 (Tags)都有各自默认的样式 (style),
什么是样式呢？样式定义了内容显示的形式和风格，如字体
文字间距、颜色、背景,Margin等, 类似于 Word中的样式。
也就是说,浏览器会按照一定的基本规则来解释和显示每一个
标记中的内容。
什么是 css? 即层叠样式表（ Cascading Stylesheet,CSS）
可以有效地对页面内容的的布局、字体、颜色、背景和其它
效果实现更加精确的控制。
3.2.9 使用层叠样式表 CSS技术 -1使用内联样式
每个标记都有默认的显示样式。可以使用 style属性修改这些
默认的显示。对于任意 body元素，都具有 style属性
（ basefont,param和 script除外） 。 ttyle可以将任何数量
的 css声明当作自己的值，而每个声明用分号隔开。 定义了
style属性的标记将在浏览器中按照 style属性来显示 。如,
<p style="color,red; font-family:'New Century
Schoolbook',serif">红色 NewCentury Schoolbook字，
如果字体可用的话。 </p>
注意：在 style中 New Century Schoolbook包含在单引号中，
因为双引号被用作包含样式声明。
要使用内联样式，必须在文档的 <head>…</head>部分包
括以下标记,
<meta http-equiv="Content-Type" content="text/css">
3.2.9 使用层叠样式表 CSS技术 --使用内联样式（续）
因为和需要展示的内容混合在一起，内联样式会失去一些
样式表的优点。
例如，当一个样式要应用到所有文档的某种元素（标记），
或者将一个样式用到某个元素的一个场合，而不是全部，
此时应使用 id属性代替 style属性。
ID属性用于定义一个元素的独特的样式。一个 CSS规则如,
#myID1 { font-size,larger }
可以通过 ID属性应用到 HTML中,
<p id=myID1>欢迎使用 ID属性 </p>
2.<style>… </style>标记
<style>标记放置在 html文档的 <head>… </head>内，
用于定义样式。使用 <style>标记可以为网页设置不同的样
式属性，一般形式为,
<style type="text/css">
标记 { 属性名, 属性值 ; 属性名, 属性值 ; }
</style>
在 <style>和 </style>之间的部分是一系列的样式定义，实
际上，就是对 html默认的标记从新定义它们的属性值，做到
个性化。
<style>… </style>标记 （举例）
例如, 要设置整个文档的文字颜色和背景色, 可以定义样式为,
<style type="text/css">
body { color,black; background,white; }
</style>
例如, 要个性化超连接的显示, 可以定义下面的样式 。
<style type="text/css">
a:hover { color:#FF0000;
text-decoration:none;
font-weight:bold}
a {color:#0000FF;text-decoration:none; font-size:14px}
</style>
<style>… </style>标记 （举例续）
这样，对于文档中的超连接（ <a>… </a>）,文字显示为
蓝色，当鼠标指向的时候则显示红色，同时字体也为 14px，
不显示下划线。
例如,exa3-f
3.2.9 使用层叠样式表 CSS技术 --样式（,css） 文件
我们可以将所有的 <style>定义保存为一个独立的文件，扩展
名为,css。 然后，当某个网页需要使用其中的样式时，在文档
的 <head>… </head>中增加 <link>标记，一般形式如下,
<link href="mystyle.css" rel="stylesheet"
type="text/css" >
使用样式与 class属性
对于 html的标准标记，当定义了对应的样式后，文档中的标
记将按照新的定义显示。如果要对某个具体的标记使用样式，
则应该为这个特定的标记命名，并在标记中使用 class 属性。
class属性用于指定元素使用何种样式。
使用样式与 class属性 (续 )
例如：如果想对某个特定的 <h1>标题指定上下间距, 而不是所
有的 <h1>标记, 则应该为这个特定的标题命名, 并在标记中
使用 class 属性, 例如,
样式定义格式如下,
h1.myH1{ color:#ff0000; margin-top,1em; margin-bottom,
2em; }
则有下面两种 <h1>标记的使用,
<h1>Old Headline One</h1>
<h1 class="myH1">New Headline One</h1>
5自定义新样式类
除了 html中的标准标记可以定义样式外，用户还可以定义自
己的新样式类。例如：定义一个,css文件 pub.css,内容如
下,
.border {
border,1px solid #63A6D6;
}
.myword1 {
font-family,"宋体 ";
font-size,14px;
font-weight,normal;
color,#000000;
text-decoration,none;
}
在其它的 html文档中就可以包含该文件，并引用里面的样式
类。
自定义新样式类（续 1）
首先, 在文档的头部, 增加,
<link href="pub.css" rel="stylesheet" type="text/css">
然后, 可以在 html的文档体内使用上面的样式, 如,
<p class="myword1">
..,
</p>
3.3 扩展标记语言 XML
3.3.1 XML简介
3.3.2 创建 XML文档
3.3.3 使用文档类型定义 DTD
3.3.4 使用架构 Schema
3.3.5 名称空间
3.3.6 使用 CSS格式化数据
3.3.7 可扩展样式语言 XSL
3.3.8 创建数据岛
3.3.9 文档对象模型 DOM
3.3.10 XLink和 XPointer规范
3.3.1 XML简介
和 HTML一样，可扩展的标记语言 XML（ eXtensible
Markup Language） 也起源于 SGML,是 SGML的一个子
集。 XML 1.0标准于 1998年 2月 10日公布。它的公布引起了
人们的广泛关注,XML被认为是继 HTML和 Java编程语言之
后的又一个里程碑式的 Internet技术。
? HTML的问题
? XML的产生
3.3.1 XML简介 —— HTML的问题
由于 Web技术的飞速发展，传统的 HTML存在着如下的问题
和不足,
（ 1） HTML的标记（ tag） 集合是固定的，大约 70个左右。
（ 2） DHTML带来的问题，由于标准 HTML已经无法满足用
户的需求，人们在其基础上增加了动态的成分，如脚本程序
等。但是，这些非标准的技术制作的网页在不同的浏览器之
间互不兼容。
（ 3） HTML只是一种表现技术，它并不能揭示 HTML标签所
标记的信息的任何具体含义。
3.3.1 XML简介 —— XML的产生
在 1996年 8月，那些关心 SGML的专家聚集在美国西雅图，
成立了一个名为 GCA（ Graphic Communications
Association,图形通信协会）的组织。在这次会议上，
GCA探讨了 SGML对 Web技术的影响。
为了使 SGML被更多的人理解和接受，就必须对 SGML过于
复杂难于被理解和实现的方面进行简化。专家们迅速着手对
SGML进行精简，去掉其语法定义部分，适当简化 DTD部分，
并增加了部分互联网的特殊成分。为了体现它与 HTML的不
同，工作组将其命名为 XML（ eXtensible Markup
Language）,同时也将自身更名为 XML工作组。 1998年 2
月 10日,XML工作组正式向 W3C提交了 XML的最终推荐标
准，这就是 XML 1.0标准。
3.3.2 创建 XML文档
XML文档是一个纯文本文件，可以用任意的文本编辑器编写，
如 Windows中的, 记事本, （ Notepad） 程序。为了提高
编写效率，市场也有一些专门的可视化 XML创作及编辑工具。
3.3.2 创建 XML文档 —— XML文档的组成
一个 XML问档一般包含三个部分,
（ 1） XML文档声明
位于文档的第 1行, 一般形式为,
<?xml version="versionNumber"
[encoding="encodingValue"]
[standalone="yes/no"]?>
其中, VersionNumber为 XML文档所遵循的 XML规范的版本
号；可选项 encoding标志 XML处理器使用的字符集, 默认值
为 UTF-8（ 适合美国英语的 Unicode压缩版 ） ；可选参数
standalone取值为, yes”或, no”（ 取决于该文档是否依赖于
其他 XML文档 ）, 默认值为, yes”。
例如,<?xml version="1.0" encoding="GB2312"?>
3.3.2 创建 XML文档 —— XML文档的组成（续 1）
（ 2） 文档类型定义
在 XML文档声明和 XML文档之间的部分是文文档类型定义
（ DTD） 部分, 一般形式是 <!DOCTYPE … >如不需要可以省
略
3.3.2 创建 XML文档 —— XML文档的组成（续 2）
（ 3） XML标识的文档内容
XML文档内容主要包括,
① 声明根元素
每一个有效的 XML文档有且仅有一个根元素 。 根元素是在一
个 XML文档中包含所有其它元素的元素, 无论是在语法上还
是在逻辑上, 根元素位于所有数据的顶层 。 根元素的声明和
其他元素的声明方法一样, 一般形式为,
<rootElementName>...</rootElementName>
3.3.2 创建 XML文档 —— XML文档的组成（续 3）
② 声明非根元素
在 XML中, 我们是通过在容器元素中嵌套被包含元素来描述
数据对象的, 一个被包含元素又可以包含自己的元素 。 包含
其他元素的元素称为容器 （ container）, 所有的非根元素都
包含在根元素中, 根元素是最上层的容器元素 。
<containerElement [attributesList]>
[<containedElement[attributesList]>
</containedElement>]
,.,
</containerElement>
举例,
3.3.2 创建 XML文档 —— XML文档的组成（续 4）
例如：用 XML来描述一部汽车数据 。 汽车包括发动机, 发动
机又包括活塞等, 用 XML描述如下,
<automobile>
<engine>
<piston>… </piston>
…
</engine>
</automobile>
3.3.2 创建 XML文档 —— XML文档的组成（续 5）
③ 数据元素属性
一个数据元素可以有若干属性, 属性必须在一个元素的起始
标记中声明, 一般形式为,
<elementName [属性名 1="属性值 "] [属性名 2="属性值
"] … >elementValue</elementName>
其中, 元素名和属性名必须以字母或下划线开始, 并且只可
能包含字母, 数字, 下划线, 连字符和句点 。
例如：为汽车 （ automobile） 定义三个属性：车牌号, 车主
和制造商, 可以将 <automobile>标记写为,<automobile
number="123456" owner="Brion" manufacture="Ford">
3.3.2 创建 XML文档 —— XML文档的组成（续 5）
④ 定义名称空间
在 XML中, 用户可以自己定义标记和命名元素 。 因此, 如果
把多个 XML文件合并为一个, 就很可能出现冲突 。 名称空间
（ Namespaces） 就是为此而设计的 。
对 XML Namespaces严格的定义是：, Namespaces是用
URI加以区别的, 在 XML文件的元素和属性中出现的所有名
称的集合, 。 在没有 Namespaces的 XML 1.0文件里, 元素和
属性中出现的名称被称为, 本地名称 （ Local Names）,。
3.3.2 创建 XML文档 ——XML文档的组成（续 6）
<namespace,elementName xmlns,
namespace="globalUniqueURI">
[<namespace,containedElement [namespace,
attributeName="attributeVaue"]>
</namespace,containedElement>]
</namespace,elementname>
其中, namespace是名称空间的唯一名称, elementName是
应用名称空间的 XML文档元素的名称 。 GlobalUniqueURI是
统一资源标识符 （ Uniform Resource Identifier,URI） 。
AttributeName 和 attributeVaue 是和包含元素
containedElement相关联的一个属性的名称和属性值 。
3.3.2 创建 XML文档 ——XML文档的组成（续 7）
⑤ 包含非标准文本
通过预定义 XML实体可以在 XML文档中加入特殊符号, 如果
需要大量的特殊符号, 可以使用 CDATA段 。 CDATA段可以
使用户在一个 XML文档中引用大量的特殊符号文本块, 而不
需要分别以实体的形式来代表每一个特殊字符 。 一般形式为,
<![CDATA[text]]>
text是包含特殊字符的文本串，该文本不被 XML分析器检查。
XML处理器负责分析或者以一种有意义的方式使用该文本块。
3.3.2 创建 XML文档 ——一个简单的 xml文档
[例 3-9] 一个简单的 xml文档 。
<?xml version="1.0" encoding="gb2312"?>
<note>
<to>Brion</to>
<from>Jane</from>
<heading>Remember</heading>
<body>Don't forget me this weekend</body>
</note>
显示结果,
3.3.2 创建 XML文档 —— XML分析器
XML文档需要在 XML分析器中才能运行, XML分析
器有确认型和非确认型两种 。 确认型 XML文档分析
器检查 XML文档的语法, 将 XML文档同文档类型定
义 DTD和架构作比较 。 如果确认规则, XML分析器
还要判断 XML数据是否和预定义的确认规则相符 。
非确认型 XML分析器也进行 XML文档语法的检查,
但不进行 XML文档和 DTD及架构的比较 。
在微软的 Internet Explorer 5.0浏览器中, 内置了
XML确定性分析器, 即,MSXML。
3.3.3 使用文档类型定义 DTD
它没有像 HTML一样拥有一个通用的标记 （ tag） 集合
在 XML中, 标记 （ 在 xml中, 又称元素 ） 是通过文档
类型定义 （ Document Type Difinition,DTD） 来实
现的 。 DTD定义了 XML文档中可以使用的标记符号,
标记的属性, 标记的排列方式 /顺序, 标记能够包含
的内容等 。
在 XML文档中, DTD出现在第一行的文档类型声明
和文档的根之间 。
DTD可以在 XML文件中直接设定, 也可以保存为一
个完全独立的文件 （,dtd） 。
3.3.3 使用文档类型定义 DTD ——声明内部 DTD
和 XML元素
一个内部 DTD声明必须写在 XML声明和 XML根元素
之间, 一般形式为,
<!DOCTYPE rootElement [dtdRules]>
其中, <!DOCTYPE 表示开始设定 DTD。
rootElement指定此 DTD的根元素的名称, 一个 XML
文件只能有一个根元素 。 注意, 如果 XML文件使用
了 DTD,那么文件中的根元素就在这里指定 。
dtdRules是在 rootElement中为一个元素定义 DTD规
则的一条或多条 XML语句, 即定义 XML文件使用的
元素 。
3.3.3 使用文档类型定义 DTD ——声明内部 DTD和
XML元素 （续）
DTD规则的一般格式为,
<!ELEMENT element-name (element-definition) >
其中, <!ELEMENT是 XML的保留字, 表示开始元素
定义 。 element-name是为元素起的名称, element-
definition是对元素的定义, 就是说 <元素 >...</元素 >
之间能够包含什么内容 。 元素的内容可以是一般性
文字, 也可以是其它元素 。
其中元素定义可以是,
EMPTY | ANY | #PCDATA | 元素
3.3.3 使用文档类型定义 DTD ——声明内部 DTD和
XML元素 （续 2）
? EMPTY,没有内容的元素 。 在 XML文件中, 空元
素不需要结束标记, 但必须以 </空元素名 >这样的写
法 。
? ANY,表明为所有可能的元素以及可解析的数据 。
? #PCDATA,只有可解析有字符数据才能作为元素
的内容 。
? 元素, 如果一个元素又包含另外的元素, 那么这个
元素就是容器元素 。
3.3.3 使用文档类型定义 DTD ——举例
例如,
<!ELEMENT 书籍 (名称,作者,价格 )>
表示定义了一个元素 （ 即标记 ）, 书籍,, 并且它
包含三个子元素元素, 名称,,, 作者, 和, 价
格, 。 <!ELEMENT 名称 (#PCDATA)>
则定义了一个元素, 名称,, 它由 #PCDATA关键字
定义, 表明此元素仅仅包含一般文字, 是基本元素 。
3.3.3 使用文档类型定义 DTD ——声明元素属性
在 XML中, 元素属性设置的一般形式是,
<!ATTLIST element-name attribute-name Type
Default-value>
其中, <!ATTLIST表示开始属性的设定； element-
name表示元素名； attribute-name是设定的元素的
属性名称； Type是该属性的属性值的类别,
3.3.3 使用文档类型定义 DTD ——声明元素属性 （续）
3.3.3 使用文档类型定义 DTD ——举例
下面是几个属性设定的例子,
<!ATTLIST 姓名 性别 (男 |女 ) "男 "〉 >
此元素属性设定语句为, 姓名, 这个元素设定一个名为, 性别,
的属性, 此属性的属性值类别是 Enumerated,取值范围为
,男, 或者, 女, 。 如果在 XML文件中没有为此属性赋值, 属
性内定值是一个字符串, 男, 。
<!ATTLIST 姓名 号码 ID #REQUIRED>
该属性设定语句为, 姓名, 元素设定一个名为, 号码, 的属性，
属性值类别是 ID,意味着在 XML文件中为此属性赋值的时候，
值在此 XML文件中是唯一的，否则将出现解析错误。此属性设
定中的属性内定值为 #REQUIRED,表示这个属性在 XML文件
的 <姓名 >标记中必须出现，否则解析会发生错误。
3.3.3 使用文档类型定义 DTD ——定义实体与字符数据段
在 XML的 DTD中，还可以定义实体（ Entity）。 实体（ entity）
实际上起一种类似“宏”的作用，一些常用的或者不便于直接
书写的文字或数据，可以用一个标识定义下来，在数据中可以
直接引用。
?5种预定义的实体
&,&
<, @lt;
>, >
,,"
‘, '）
演示,frontpage2000
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 1)
XML还允许用户自己定义实体, 例如, 如果在 XML文档中需要
频繁使用词组, Good Luck”,可以在 DTD中这样表示：
<!ENTITY gl "Good Luck">。 这样当使用这个词组, Good
Luck”时, 可以敲入 ≷,从而可以避免拼错和重复敲入相同
的信息, 这里, gl就是实体 。
在 XML中, 实体可以分成内部实体, 外部实体和参数实体 。 内
部实体的一般形式为,
<!ENTITY entityName "will be replaced string">
如果被替换的文本很长, 可能要把被替换的信息存储在一个文
件中 。 可以通过外部实体参考来实现, 即在实体名和文件的
URL中使用关键字 SYSTEM,构成外部实体, 一般形式为,
<!ENTITY entityName SYSTEM "URL">
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 2)
在 XML中, 还提供了参数实体, 它在实体定义中通过在实体名
前插入百分号 （ %） 实现, 百分号表示该实体为参数实体 。 一
旦被定义, 参数定义可以通过用百分号和分号包围参数名来实
现 。 例如,<!ENTITY % role"(boss | manager |
employee)">
例如, 有下面的 XML实体定义和属性定义,
<!ENTITY p1 SYSTEM "product.gif">
<!ATTLIST product image ENTITY #IMPLIED>
在相关的 XML 中, 可以包含下列语句,< product
image="p1">
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 3)
字符数据段
通过预定义 XML实体可以在 XML文档中加入特殊符号, 如果需
要大量的特殊符号, 可以使用字符数据段, 称为 CDATA段 。
CDATA段可以使用户在一个 XML文档中引用大量的特殊符号文
本块, 而不需要分别以实体的形式来代表每一个特殊字符 。 一
般形式为,
<![CDATA[text]]>
text是包含特殊字符的文本串, 该文本不被 XML分析器检查 。
XML处理器负责分析或者以一种有意义的方式使用该文本块 。
其中的左右方括号 [ ]不能省略
3.3.3 使用文档类型定义 DTD ——声明并保存外部 DTD文件
如果希望将 DTD声明应用到其它 XML文件中, 应该将 DTD文本
保存为一个独立的,dtd文件, 然后在 XML文档中引用 。 这样一
个 DTD就可以被多个文档调用, 减少资源浪费 。
创建一个外部 DTD文件的语法为,
<!DOCTYPE rootElement SYSTEM "dtdFile ">
其中, rootElement为应用 DTD文件的根 XML元素, dtdFile
为外部 DTD文件名 （,dtd） 。
对于, dtd 文件, 除了没有内部 DTD 中的 <!DOCTYPE
rootElement[.....]〉 语句外, 其它都一样 。 而且有关元素数
目, 排列顺序, 空元素设定, 选择性元素, 属性设定, Entity
声明等都和内部 DTD相同 。
3.3.4 使用架构 Schema
DTD的语法相当复杂, 并且它不符合 XML文件的标准, 自成
一个体系 。
由于 DTD的复杂和自称体系, W3C于 2001年 5月正式发布了
XML Schema的推荐标准, 提出了 XML架构 （ Schema） 的概念 。
Schema相对于 DTD的明显好处是 XML Schema文档本身也是
XML文档, 而不是像 DTD一样使用自成一体的语法 。 这就方
便了用户和开发者, 因为可以使用相同的工具来处理 XML
Schema和其它 XML信息, 而不必专门为 Schema使用特殊工具
3.3.4 使用架构 Schema ——和 DTD的比较
XML Schema本身就是一个 XML文件 。 但不同的是, Schema文
件所描述的是引用它的 XML文件中的元素和属性的具体类型 。
除此以外, Schema比 DTD还有以下优点：第一, XML Schema
利用 Namespace将文档中特殊的结点与 Schema说明相联系, 一
个 XML文件可以有多个对应的 Schema,而一个 XML文件只能
有一个对应的 DTD。 第二, XML Schema内容模型是开放的,
可以随意扩充, 而 DTD无法解析扩充的内容 。 第三, DTD只能
把内容类型定义为一个字符串, 而 XML Schema允许把内容类
型定义为整型, 浮点型, 布尔型或者许多其它的简单数据类型 。
经过数年的大规模讨论和开发如今 XML Schema已经成为全球
公认的 XML环境下首选的数据建模工具 。
3.3.4 使用架构 Schema ——声明元素
在 XML中, 创建架构的语法为,
<Schema name="SchemaName"
xmlns="urn:schema-microsoft-com:xml-data"
xmlns:dt="urn:schema-microsoft-com:datatypes">
其中, name属性给出架构的名称 。 xmlns给出了一个微软的架
构资源作为一个隐式名称空间, 从而可以使用户引用需要创建
架构的特殊元素, 包括 ElementType,Element,AttributeType
和 Attribute等 。 Xmlns:dt属性包括微软的一个数据输入资源,
作为一个显示名称空间, 从而可以引用微软内置的数据类型,
包括 string,integer,boolean等 。
3.3.4 使用架构 Schema ——声明容器元素
在 XML Schema中, 声明容器元素的一般形式为,
<ElementType name="containerElementName"
content="empty | eltOnly | textOnly | mixed"
dt:type="dataType"
model="open | closed"
order="one | seq | many">
<attribute type ="AttributeTypeName 1">
,..,..,.,
<attribute type ="AttributeTypeName m">
<element type=" containedElementName 1">
,..,..,.,
<element type=" containedElementName n">
</ElementType>
3.3.4 使用架构 Schema ——声明容器元素 (续 1)
(1) content,用来描述元素的内容模型 。 取值可以是,
? empty — 元素内容为空；
? textOnly — 元素只包含文本内容；
? eltOnly — 元素只包含子元素内容；
? mixed — 元素既可以包含文本, 也可以包含子元素 。
3.3.4 使用架构 Schema ——声明容器元素（续 2）
(2) dt:type,指定元素文本的数据类型, 常用的几种数据类型
及其含义见表 3-5
3.3.4 使用架构 Schema ——声明容器元素（续 3）
(3) model,元素的内容是否遵守 schema中的定义 。 取值可以是,
? open — 元素内容中可以添加未定义过的元素, 文本等；
? closed —元素内容中内能添加定义过的元素, 文本等 。
(3) order,定义子元素的排列顺序 。 取值可以是,
? one — 规定元素内容按多种方式中的某一种排列；
? seq — 规定元素内容按指定的顺序排序；
? many — 按任意方式排列 。
3.3.4 使用架构 Schema ——声明属性
用户可以用属性来描述 XMLSchema元素, 在声明属性以前,
还需要声明一个属性类型 。 声明属性类型的语法为,
<AttributeType name="idref"
dt:type="primitive-type"
dt:values="enumerated-values"
default="default-value"
required="{yes|no}">
3.3.4 使用架构 Schema ——声明属性 （续）
<Attribute type="idref">
其中, idref为属性名, 用于内部引用 。 primitive-type是指属性
的数据类型, 包括 entity,entities,enumeration（ 枚举类型 ）,
id（ 唯一标识符 ）, idref（ 标识符引用 ）, idrefs（ 标识符引用
集合 ）, nmtoken（ 名称记号 ）, nmtokens（ 名称记号集合 ）,
notation,string（ 字符 ） 等 。 enmuerated-value是指当属性设为
枚举类型时, 代表枚举值 。 default-value是属性的默认值,
Required这个属性标志在运行状态下是否必须存在 。 例如,
<AttributeType name="location" dt:type="string"/>
<ElementType name="communication" content="textOnly"
model="closed">
<attribute type="location"/>
</ElementType>
3.3.4 使用架构 Schema —— 【 例 3-11】
【 例 3-11】 一个 XML Schema文档 （ 文档名为 myfilm.xml） 示
例 。
3.3.4 使用架构 Schema ——将架构添加到 XML文档
用户可以在一个 XML文档的内部应用一个架构, 以便于在运
行状态下, XML验证分析器将架构规则应用于 XML数据并验
证该文档 。 语法为,
<rootelement xmlns="x-schema:URI">
其中, rootelement为用户希望应用架构的 XML文档的根元素 。
前缀 x-schema对于微软的 MSXML处理器是必需的 。 URI为统
一资源标识符, 是要附加的架构的名称 。
默认的 xml名称空间 （ 名域 ） 为 xmlns="x-schema:URI",它告
诉解析器应该根据 URI上的 schema(x-schema)来解析整个文档 。
3.3.5 名称空间 ——为什么？
——为什么要名称空间？
在 XML中, 用户可以自己定义标记和命名元素 。
XML文档中很可能会定义许多名字相同而意义
不同的元素或属性, 尤其在把不同的 XML文档
合而为一时, 更容易产生冲突 。 名称空间
（ Namespaces） 就是为此而设计的 。
3.3.5 名称空间 ——概 念
名称空间 （ Namespaces） 也称为, 名域, 或, 命名
域, 。 它不是 XML1.0标准的一部分, 而是一个被称
为, Name Space in XML”的独立 标准 。 对 XML
Namespaces严格的定义是：, 名称空间是用 URI
（ Uniform Resource Indicator,统一资源指示器 ） 加以
区别的, 在 XML文件的元素和属性中出现的所有名称
的集合, 。 在没有 Namespaces的 XML 1.0文档里, 元
素和属性中出现的名称被称为, 本地名称 （ Local
Names）,。
3.3.5 名称空间 ——一 般形式
一般形式为,
< namespace,elementName xmlns,
namespace="globalUniqueURI">
[<namespace,containedElement [namespace,
attributeName="attributeVaue"]>
</namespace,containedElement>]
</namespace,elementname>
其中, namespace是名称空间的唯一名称, elementName是
应用名称空间的 XML文档元素的名称 。 GlobalUniqueURI是统
一资源标识符 （ Uniform Resource Identifier,URI）
3.3.5 名称空间 —举例
定义名称空间的唯一目的是唯一地标识一个元素或一组元素的
属性 。 例如,
<pr,payment xmlns:pr="http://www,microsoft.com/payroll">
<pr,employee>Lars Peterson</pr:employee>
<pr,description>Reimburse expenses</pr:description>
<pr,total>199.76</pr:total>
</pr:payment>
3.3.6 使用 CSS格式化数据
W3C为了解决 HTML的结构化问题, 和实现 Web中的
总体外观控制, 于 1996年底, 公布了层叠样式表单
CSS（ Cascading Style Sheet,CSS） 规范 。 所谓层
叠 （ Cascading） 是指对于容器元素指定的所有选项,
将被自动的应用到其包含的所有元素中 。
CSS把文档内容和格式化信息分离开来, 单独把格式
化信息存放在 <style>...</style>标记内, 或单独保存
为一个,css文件 。
3.3.6 使用 CSS格式化数据 —— 【 例 3.13】
【 例 3.13】 在 HTML文档中, 通过 <style>..</style>标
记引入 CSS,指定 H1和 H2元素的显示样式 。
3.3.6 使用 CSS格式化数据 —— CSS的结构和使用规则
在 XML文档所对应的 CSS文档中, 定义了文档中所有元素的显
示样式 。 缺少某种元素的样式定义时使用默认值 。 元素样式定
义的语法格式为,
elementName [,elementName,...] [.className][#ID属性名 ] {
property, value
[;property, value....]
}
其中, elementName为 XML元素的名称, proverty为元素的显
示特性 （ 如字体, 颜色等 ）, value为具体的显示特性值,
ClasssName为样式类名 。
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 1）
从上述格式中可以看到, 在 CSS中定义元素的样式, 可以有多
种方式,
（ 1） 同时为一个或多个元素定义样式 。 例如,
name,company,price,unit,detials {
display:block;
font-weight:bold;
font-size:0.8em
}
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 2）
（ 2） 定义一个样式类, 通过对类名的引用, 在不同的元素使
用同一样式, 或者不同位置的同一元素使用不同的样式 。 例如,
样式文件 style01.css内容如下,
student {display:block}
name.c1 {font-size:3em; color:red}
name.c2 {font-size:2em; color:green}
name.c3 {font-size:1em; color:blue}
下面是引用该样式的 xml文档,
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style01.css"?>
3.3.6 使用 CSS格式化数据 —— CSS的形式 (2)（续 ）
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style01.css"?>
<student>
<name class="c1">张三 </name>
<name class="c2">李四 </name>
<name class="c3">王五 </name>
</student>
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 3）
（ 3） 为特定的元素定义样式 。 可以为该元素指定一个 ID属性,
而在 CSS中, 通过, 元素名＃ ID”的方式指定样式 。 例如,
style02.css内容定义如下,
student {display:block}
name {font-size:3em;color:red;
font-weight:bold}
name#a1 {font-size,2em; color:green}
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 3） (续 )
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style02.css"?>
<student>
<name>张三 </name>
<name ID="a1">李四 </name>
<name>王五 </name>
</student>
3.3.6 使用 CSS格式化数据 ——常用属性 (1)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——常用属性 (2)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——常用属性 (3)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——例 3.14
【 例 3.14】 一篇科技文献的 XML文档和相应的 CSS文档
paper.xml
3.3.7 可扩展样式语言 XSL
CSS是通过创建样式表单元素来格式化 XML数据, 并且将其
显示出来 。
可扩展样式语言 （ eXtensible Style Language,XSL）
XSL将文档转换到一个新的文档树中, 该文档树由格式对象
组成, 然后应用程序就可以将文档显示出来 。
XSL由两个关键部分组成,
一个为转换引擎，将原始文档树转换为能够显示的文档树；
另一个为格式化符号集，该符号集可以定义应用在 XML数据
上的复杂的格式化规则。
目前,IE5 仅支持 XSL的部分功能。
3.3.7 可扩展样式语言 XSL ——什么是 XSL
XSL(eXtensible Stylesheet Language,可扩展样式语言 )是为
XML文件定义的一种标识语言, 它将提供远远超过 CSS的强
大功能, 如将元素再排序等 。 实际上简单的 XML已可被 CSS
所解释, 然而复杂的高度结构化的 XML数据或 XML文档则只
能依赖于 XSL极强的格式化的能力而现给用户 。
XSL以包含了一套元素集的 XML语法规范而定义, 该语法规
范将被用来把 XML文件转换成 HTML文件或 XML文档 。 XSL
样式表包含了一系列数据格式规则, 用以描述 XML文档的显
示方式, 并负责将其转换成 html等其它格式 。
3.3.7 可扩展样式语言 XSL —— XSL和 CSS之间的异同
(1) XSL与 CSS在很多功能上是重复的, 但是它比 CSS更强大 。
不过 XSL功能的强大与其复杂性是分不开的 。
(2) CSS只允许格式化元素内容, 不允许改变或安排这些内容 。
但是 XSL没有这些限制, 它可以提取元素, 属性值, 注释文
本等几乎所有的文档内容 。 在 XML领域, XSL来格式化文档
才是未来发展的方向 。
3.3.7 可扩展样式语言 XSL —— XSL样式文档基本结构
(1) 以下面的指令为文档开头 （ 其中还可以包含其他属性 ）,
<?xml version="1.0"?>
(2) 通过, xsl:stylesheet”标记导入 XSL文档的内容 。 类似于
XML的根元素 。 其中的 xmlns:xsl指明了本 XSL所采用的标准 。
(3) 通过模板来描述 XML文档的显示格式 。
(4) 通过 XML数据的引用指明显示的数据 。
(5) 其中包含了大量的 html语句的各种标记 。
(6) 通过 xsl:for-each,xsl:if,xsl:choose等标记进行数据的循环
处理, 条件处理, 选择处理等工作 。
(7) 可以嵌入 JaveScript或 VBScript脚本程序, 或者 JaveScript语
句, 使 XSLl更具有强大的运算功能 。
3.3.7 可扩展样式语言 XSL —— XSL的模板
在 XSL中, 数据的显示格式被设计细化成一个个模板, 最后
再将这些模板组合成一个完整的 XSL。
3.3.7 可扩展样式语言 XSL ——模板的语法结构
模板的语法结构为,
< xsl:template match="node-context" language="language-
name">
</xsl:template>
其中的属性意义如下,
（ 1） match,确定什么样的情况下执行此模板 。 作为一种简
化的说明, 在此处使用标记的名字；其中最上层模板必须将
match设为, /” 。 在一个 XSL文档中根模板是惟一的 。
（ 2） language,确定在此模板中执行什么脚本语言, 其取值
与 html中的 <script>标记的 Language属性的取值相同, 缺省值
是 Jscript
3.3.7 可扩展样式语言 XSL ——模板的调用
调用模板使用 <xsl:apply-templates>标记完成, 其语法格式如
下,
< xsl:apply-templates select="pattern" order-by="sort-
criteria-list">
其中的属性意义如下,
（ 1） select,确定应调用的模板, 即选取用 <xsl:template>标
记建立的模板 。
（ 2） order-by,排序的依据, 当有多个排序依据时以分号 （ ;）
分隔 。
3.3.7 可扩展样式语言 XSL ——选择模式和测试模式
选择模式就是用选择的方式将数据从 XML中提取出来 。 这是
一种在 XSL中应用广泛且操作简单的获得数据的方法 。 测试
模式是先对选择的对象进行测试, 然后对符合条件的记录进
行预定的处理 。 这是在 XSL中经常使用的两种模式 。
3.3.7 可扩展样式语言 XSL ——选择模式
选择模式有三种不同的元素, 各自的语法格式如下,
（ 1） xsl:Value-of
语法,<xsl:value-of select="模式 ">
功能：该元素的作用是从 XML文档中提取指定节点的数据, 并且将数据
结合到样式表中 。 Select属性用来指定提取的对象 。
（ 2） xsl:for-each
语法,<xsl:for-each select="模式 " order-by="排序列表 ">
功能：循环处理指定节点的相同的数据 。
通过 select属性逐个选择 XML中的元素, 按当前样式表的规定逐个处理 。
Order-by属性的作用是确定排序的控制标记, 属性值前加, +” 号按升序
排列, 属性值前加, -” 号按降序排列, 不加符号时默认为升序 。
（ 3） xsl:apply-templates
3.3.7 可扩展样式语言 XSL ——测试模式
测试模式有以下两种元素,
(1) xsl:if
语法,<xsl:if test="测试条件 " script="script式子 " language="script使用的
语言 ">
功能：测试 test属性给定的条件, 当条件的值为 True时执行该元素的内容,
否则不执行该元素的内容 。 如果存在 script属性, 则可以以一句脚本语言
表达式为测试条件 。 默认使用的脚本语言为 JScript。
(2) xsl:choose
语法,<xsl:choose>
<xsl:when expr="脚本语言表达式 " language="脚本语言类型 " test="
模式 ">
<xsl:othrwise>
3.3.7 可扩展样式语言 XSL ——例 3.15
【 例 3.15】 在下面的 XML文档中是成绩单数据, 通过 XSL设
计显示格式, 要求在显示学生成绩时, 希望成绩优秀 （ 大于
或等于 90分 ） 的用粗体显示, 成绩不及格的用斜体显示, 其
他用正常体显示 。
3.3.8 创建数据岛
数据岛是指存在于 html页面中的 XML代码。数据岛允许在
html页面中集成 XML,对 XML 编写脚本，不需要通过脚本
或 <object>标记读取 XML。 几乎所有能够存在于一个结构完
整的 XML文档中的东西都能存在于一个数据岛中。包括处理
指示,DOCTYPE声明和内部子集。
3.3.8 创建数据岛 ——创建数据岛
<html>
<head>
<title>html with xml data island</title>
</head>
<body>
<P>Within this document is an XML data island.</P>
<XML ID="customerXML">
<Customer>
<name>Cheery</name>
<id>20020001</id>
</Customer>
</XML>
</body>
</html>
上述数据岛的 XML是内嵌的。 另
外，数据岛也可以在 XML标签中
通过 src属性来引用，例
如,<XML ID="customerXML
" src="customer.xml"></XM
L>
3.3.8 创建数据岛 ——访问数据岛
用户可以通过 ID属性访问数据岛,, customerXML”称为文档对象的名称 。
可以利用这个对象的方法和属性访问它的根节点和孩子节点 。 在上面的例
子中, 根节点是 <Customer>, 孩子节点是 <name>和 <custID>。 下面列
出了一些属性和方法, 可用来访问 XML文档的节点 。
? XMLDocument,返回对 XML文档对象模式的引用 。
? documentElement,返回 XML文档的根节点 。
? childNodes,返回节点的孩子节点目录 。
? item,通过索引访问目录中的节点 。 索引值从 0开始, item(0)返 回第
一 个节点 。
? text,返回节点的内容 。
下面的代码访问第一个孩子节点 <name>并返回它的内容, Cherry”。
customerXML.XMLDocument.documentElement.childNodes.item(0).text
3.3.9 文档对象模型 DOM
文档对象模型（ Document Object Model,DOM） 是
HTML文档以及 XML文档的应用程序接口。 W3C提供了精确
的、语言无关的 DOM接口规范，可以用任何语言来实现 DOM
接口。作为 W3C的规范,DOM提供了一种可以应用于不同环
境和应用中的标准的程序接口。它定义了文档的逻辑结构，
提供了对文档进行访问和操作的方法。利用 DOM,程序开发
人员可以动态的创建文档，遍历文档结构，添加、修改、删
除文档内容，改变文档的显示方式等等。可以这样说，文档
代表了文档中的数据，而 DOM则代表了如何去管理这些数据。
3.3.9 文档对象模型 DOM —— DOM的基本结构
(1) 文档 （ Document）
对象：这是所有数据,
所有其他组件, 比如注
释和处理指令的节点的
总的容器 。
(2) 节点 （ Node） 对象：
这是文档中的每一个单
独组件 。 节点由起始标
记和结束标记定义 。
XML 中的一个元素在
DOM中为一个节点对象 。
D o c u m e n t
P a rs e E rro r
N o d e
N o d e
N o d e
N o d e
N o d e
N o d e
N o d e L i s t
N o d e L i s t
N a m e d N o d e M a p
3.3.9 文档对象模型 DOM —— DOM的基本结构（续）
(3) 节点列表 （ NodeList） 对象：这是同一级上的所有节点形
成的列表, 它包含了多个节点对象 。 列表中的节点都有与
Sibling相关联的关系 。
(4) 解析错误 （ ParseError） 对象：这是为每一个没有包含内
容的文档创建的对象 。 该对象有几个属性, 用来存储最后的
解析错误的特性 。 从而可以得到错误代码, 出错位置, 出错
原因等信息 。
(5) 名字空间（ NamedNodeMap） 对象。它提供了对文档
中所使用的名字空间的描述。使用它的属性和方法可指定名
字空间的有关属性，完成对名字空间的操作。
3.3.9 文档对象模型 DOM ——创建文档对象和加载 XML
通过 DOM访问 XML数据通常有两种方法：第一, 使用 C,C++
或者 Visual Basic等访问 XML数据, 此时用户必须安装一些特殊
的头文件和库 。 第二, 使用 HTML和脚本语言 Javascript、
VBScript等通过 DOM实现 XML数据的访问 。 这里我们只看后者
的实现方法 。
在 HTML中访问 XML,首先要创建文档对象 。 在 JavaScript中,
可通过以下语句完成,
var Mydocument = new ActiveXObject("Microsoft.XMLDOM")
这时建立起的 Mydocument只是一个空对象, 还没有加载实际的
XML文档 。 可通过 Mydocument的 load方法完成 XML的加载,
Mydocument.async=false
Mydocument.load("XML文档的 URL")
3.3.9 文档对象模型 DOM ——举 例
Books.xml文档内容如下,
<?xml version="1.0" encoding= "gb2312"?>
<books>
<book status="已售完 ">
<author>蓝天 </author>
<title>XML入门 </title >
</book>
<book status="热卖中 ">
<author>白云 </author>
<title>XML提高 </title>
</book>
</books>
3.3.9 文档对象模型 DOM —— DOM对象的属性和方法
DOM模型中的对象都有各自的属性集和方法集。通过对象的
属性和方法我们可以随意地处理和操作 XML数据。下面介绍
Document,Node和 NodeList三种对象和属性和方法。
3.3.9 文档对象模型 DOM —— Document对象的常用属性和方法
Document对象的常用属性有,
? documentElement,Element类型的只读属性 。 返回文档的
根节点对象 。
? async,逻辑类型的属性 。 指定是否允许同步下载文件 。
? parseError,返回解析错误对象 。
Document对象的常用方法有,
? createAttribute(name),创建属性方法 。
? createNode(Type,Name,namespaceURI),创建类型为
Type,名称为 Name,并且使用 namespaceURI作为名称空间
的节点 。
? load(pathname),把文件加载到文档对象 。
? loadMXL(string),加载 XML文档或段。
Document对象的常用属性有,
? documentElement,Element类型的只读属性 。 返回文档的
根节点对象 。
? async,逻辑类型的属性 。 指定是否允许同步下载文件 。
? parseError,返回解析错误对象 。
Document对象的常用方法有,
? createAttribute(name),创建属性方法 。
? createNode(Type,Name,namespaceURI),创建类型为
Type,名称为 Name,并且使用 namespaceURI作为名称空间
的节点 。
? load(pathname),把文件加载到文档对象 。
? loadMXL(string),加载 XML文档或段。
3.3.9 文档对象模型 DOM —— Document对象的常用属性和
方法（续）
3.3.9 文档对象模型 DOM —— Node对象的常用属性
3.3.9 文档对象模型 DOM —— Node对象的常用方法
3.3.9 文档对象模型 DOM ——例 3.16
【 例 3.16】 对 XML文档,book.xml”,在 HTML中通过 DOM
模型将各本书的书名加到一个列表控件中，单击列表控件中
的书名，可以将该书的所有数据显示出来。
book.xml文当内容
book.htm
3.3.10 XLink和 XPointer规范
XLink和 XPointer规范是为创建 XML超级链接而制定的。超链
接是指一个文档到另一个文档的相互关联。无论是 HTML文档
之间，还是 XML文档之间都可以建立相应的超级链接。但是，
当 XML超级链接执行时，要比 HTML超链接复杂得多。 XML
超链接可以允许开发者动态地指定链接位置，该位置既可以
是 XML文档的，也可以是 HTML文档的。另外,XML还允许
建立双向链接。
3.3.10 XLink和 XPointer规范 ——建立 XML超级链接
建立 XML链接的语法为,
< linkname xlink:type="linkType"
xlink:href="documentTolinkTo"> text </linkname>
其中,linkname为链接的名字,linkType取值包括 simple、
extended,locator,arc,resource,title和 none。
DocumentTolinkTo为目标文档的 URI。 text为该链接的显示文
本。
3.3.10 XLink和 XPointer规范 ——使用 XPointer定位
定义 XPointer引用可以创建一个指向目标文档内部的特定元素
的链接 。
XPointer引用的基本语法为,
<linkname xlink:type="linkType"
xlink:href="xmlDdocument#somePointer"> text </linkname>
其中,#somePointer指向被链接的文档中预定义的绝对 XML id。
Xpointer提供了绝对定位, 相对定位, 范围定位, 属性定位和
字符串定位 5种不同的在 XML文件内定位的方法, 可将地址定
位到相应的地方, 功能上比 HTML中的内链接更为强大 。
3.4 XML开发编辑工具
XML文档是一种纯文本文档, 我们可以用, 记事本,,
UltraEdit等文本编辑软件来编辑, 但是非常麻烦 。 有没有一种
可视化的编辑工具呢？ 就像用 Frontpage编辑 HTML文档一样简
单呢？
XMLSpy
XML Editor
FrontPage 2003
3.5 要使用 XML吗?
我们已经习惯了 HTML语言, 它简单而直观, 并且有大量的编
辑工具 。 为什么还要使用 XML呢？ 对于普通的开发人员, 难
道就如本章第 3.3.1小节所说, 因为 HTML存在的一些问题而要
放弃 HTML,全部转到 XML吗？
3.5 要使用 XML吗? ——20个热点问题
（ 1） 什么是 XML?
（ 2） XML何以重要?
（ 3） SGML,HTML和 XML有什么联系？
（ 4） 如何实现 XML?
（ 5） 什么是文件类型定义 (DTD)?
（ 6） 什么是格式完整和有效的文件?
（ 7） 如何在浏览器中阅读 XML?
（ 8） RDF和 XML有何联系?
（ 9） Netscape浏览器中如何实现 XML?
（ 10） Microsoft浏览器中如何实现 XML?
3.5 要使用 XML吗? ——20个热点问题（续）
（ 11） OSD和 CDF与 XML的关系如何?
（ 12） 电子商务 (e-commerce)和 XML?
（ 13） XML中的层叠样式?
（ 14） XML如何改进超链接?
（ 15） 服务器上支持 XML吗?
（ 16） 谁应该学习 XML?
（ 17） 有哪些编写 XML的工具可供我使用?
（ 18） XML的国际化?
（ 19） XML的未来在哪里?
（ 20） 哪里能学到更多的 XML知识?
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第三章 HTML和 XML基础
背景
标记语言是 Web应用的基础，标记语言是由内
容和标记组成的，标记指定了内容在浏览器中
的显示形式。在 Web应用中，所有的 Web页面都
是以标记语言书写的具有特定格式的文档。因
此，无论是 Web应用还是开发，都应该对标记
语言有一个基本的认识。
3.1 万维网联盟 （ W3C） 和 SGML
3.2 超文本标记语言 HTML
标记语法和文档结构,
标记及标记属性
列表, 表格 （ table）, 表单 （ form）, 帧 （ frame）
使用层叠样式表 CSS技术
3.3 扩展标记语言 XML
XML简介, 使用文档类型定义 DTD
使用架构 Schema,名称空间
使用 CSS格式化数据, 可扩展样式语言 XSL
创建数据岛, 文档对象模型 DOM,XLink和 XPointer规
范
3.4 XML开发编辑工具
3.5 要使用 XML吗？
Agenda
3.1 万维网联盟（ W3C）
万维网联盟（ World Wide Web Consortium,W3C） 是
一个国际标准化组织，成立于 1994年，其主要目标是
为 World Wide Web的发展开发通用的协议和标准。
HTTP和 HTML协议就是 W3C针对 WWW制定的两个
非常重要的协议 。
W3C网址是,http://www.w3c.org。
标准通用标记语言 SGML
标准通用标记语言 SGML（ Standard Generalize Markup Language,SGML）
是一个用来定义在电子表格中如何对 文件的结构和内容 进行描述的国
际标准（ ISO-8879）。
历史背景,
1969年，当时美国 IBM公司的研究人员开始设计一种名为 GML
（ Generalized Markup Language） 的语言，在印刷、统计等需要大规模数据
处理的行业和部门的支持下，这项研究工作持续了十几年，于 1980年推出
了 SGML（ Standard Generalized Markup Language） 语言，并于 1986年获得
国际标准化组织（ ISO） 的批准。其后,SGML的发展较为平稳，并不为其
领域之外的人们所广泛了解。直至 1991年，当 HTML（ Hypertext Markup
Language） 问世之后，人们才开始认识 SGML。
3.2超文本标记语言 HTML
HTML（ Hyper Text Markup Language,超文本标记语言）是一
种用来制作超文本文档的简单标记语言，是由 SGML发展而来
的，可以说是 SGML的一个子集。简单地说,HTML文件包含
了 文档数据 和 显示格式 两部分，其中文档数据是显示在 WWW
浏览器中的数据内容，显示格式则规定了这些内容在浏览器中
以何种格式、样子呈现给用户。
HTML的版本问题
版本,
HTML2.0—1995,
HTML3.0 Netscape和微软的 HTML版本 相差很大，标记不同
HTML3.2—在 HTML3.0上进行统一
HTML 4.01 Specification（ W3C Recommendation 24
December 1999） This document is a revised version of
the 4.0 Recommendation first released on 18 December
1997 and then revised 24 April 1998
3.2超文本标记语言 HTML-主要内容
主要内容包括,
HTML标记语法和文档结构,
文件头及相关标记,
文件体及相关标记属性,
文档内容标记
列表, 表格 （ table）, 表单 （ form）, 帧 （ frame）
使用层叠样式表 CSS技术
HTML标记语法和文档结构 -一般概念
HTML文档,是纯 ASCII码的文本文件，由, 显示内容, 和, 控
制语句, 两部分组成。 控制语句描述了显示内容以何种形式
在浏览器中显示，并负责客户与服务器之间的信息交换。控制
语句以, 标记（ Tag）,形式出现，以区分于显示内容。
标记,由封装在小于号（ <）和大于号（ >）构成的一对尖括号
之中，标记一般分首标记和尾标记，它们成对出现。 首标记 用
于开启某种形式的显示,尾标记 含, /” 以同首标记区分，用
于关闭首标记开启的功能。
例如,<u>text with underline</u>,首标记 <u>开启下划线
功能，尾标记 </u>关闭下划线功能。
有的控制语句仅需一个标记，没有尾标记。如,<br>表示换行。
标记类型与标记属性
?,单标记,,是指只需单独使用就能完整地表达意思的一类标
记, 这类标记的语法是,
<标记 >
常用的单标记有 <br>,表示换行,<hr>代表一个水平线等。
?“双标记,, 由, 首标记, 和, 尾标记, 两部分构成, 必须成
对使用, 其中首标记告诉 Web浏览器从此处开始执行该标记所
表示的功能, 而尾标记告诉 Web浏览器在这里结束该功能 。 首
标记前加一个斜杠 （ /） 即成为尾标记 。 这类标记的语法是,
<标记 >文档内容 </标记 >
例如,<h1>欢迎光临 </h1>
?属性, 其语法是,
<标记 属性 1="属性值 " 属性 2="属性值 " 属性 3="属性值 "… >
标记属性 举例
? 例如,
可写作,<hr size=“3” align=“center” width=“50%”>。
其中 size属性定义线的粗细, 缺省为 1；
align属性表示对齐方式, 可取 left（ 左对齐, 缺省值 ）,
center（ 居中 ） 和 right（ 右对齐 ） ；
width属性定义线的长度, 可取相对值 （ 整个窗口的百分
比 ）, 也可取绝对值 （ 屏幕像素点的个数, 如 width=“400”）,
缺省值是, 100%” 。
HTML标记语法和文档结构 -文档结构
<html>
<head>
头部信息
</head>
<body>
文档主体
（ 语句部分 ）
</body>
</html>
3.2.2 文件头及相关标记
<head>… </head>标记对之间的部分称为文件头。文件头的内
容主要用于定义 HTML文档在 WWW网中的情况，其内容不
在浏览器中显示
1,<title></title>标记
2,<meta>标记
3,<base>标记
4,<link>标记
5,<isindex>标记
6 注释标记
3.2.2 文件头及相关标记 - <title></title>标记
标识网页主题, 其中的内容将在浏览器的标题栏中显示, 不出
现在页面内 。
例如,
<head>
<title>欢迎光临 GSL网站 </title>
</head>
<meta>标记
它是 HTML文档文件头 <head>… </head>标记内的一个辅助性
标记, 往往不引起用户的注意, 但是它对于网页是否能够
被搜索引擎检索, 提高网页在搜索列表的排序起着关键的
作用, 是一个非常有价值的标记 。
<meta>标记为单标记, 没有尾标记 。 <meta>标记共有两个属
性, 分别是 http-equiv属性和 name属性,
<meta>标记 -name属性
（ 1） name属性
name属性主要用于描述网页, 与之对应的属性值为 content，
content中的内容主要是便于搜索引擎查找信息和分类信息
用的 。 meat标记的 name属性语法格式是,
<meta name=“参数, content=“具体的参数值, >
其中 name属性主要有以下几种参数值,
? keywords（ 关键字 ）, keywords用来告诉搜索引擎该网页
的关键字是什么 。
<meta name="keywords"
content="science,education,culture,,entertaiment ">
<meta>标记 -name属性 (续 1)
? description（ 网站内容描述 ）, description用来告诉搜索引
擎网站的主要内容 。
< meta name="description" content="This page is about
science,education etc.">
? robots（ 机器人向导 ）, robots用来告诉搜索机器人需要索
引的页面有哪些 。 content的参数有 all,none,index、
noindex,follow,nofollow。 默认是 all。
<meta name="robots" content="none">
? author（ 作者 ）, 标注网页的作者 。
<meta name="author" content="brion@mail.abc.com">
<meta>标记 -http-equiv属性
（ 2） http-equiv属性
http-equiv,相当于 HTTP的文件头作用, 它可以向浏览器传回
一些有用的信息, 以帮助正确显示网页内容,
例如按照用户定义的样式表单显示网页内容, 必须使用
<meta http-equiv=“Content-type” content=“text/css”>
与之对应的属性值为 content,content中的内容其实就是各个
参数的变量值 。 meat标记的 http-equiv属性语法格式是,
<meta http-equiv="参数 " content="参数变量值 ">
<meta>标记 -http-equiv属性 (续 )
http-equiv属性主要有以下几种参数,
? content-type（ 显示字符集的设定 ）, 设定页面使用的字符集 。
例如,
< meta http-equiv="content-type" content="text/html;
charset=gb2312">
? expires（ 期限 ）, 用于设定网页的到期时间 。 一旦网页过期,
必须到服务器上重新下栽 。
例如,
< meta http-equiv="expires" content="Fri,12 Jan 2001
18:18:18 GMT">
<meta>标记 -http-equiv属性 (续 1)
? pragma（ Cache模式 ）, 禁止浏览器从本地计算机的缓存中
访问页面内容 。
例如,
<meta http-equiv="pragma" content="no-cache">
该种设定访问者将无法使用脱机浏览功能 。
? refresh（ 刷新 ）, 自动刷新并指向新页面 。
例如,
<meta http-equiv="refresh" content="60; url=new.htm">
则浏览器将在 60秒后, 自动转到 new.htm。 可以利用这个功能,
制作一个封面, 在若干时间后, 自动带读者来到你的目录页 。
如果 URL项没有, 浏览器则刷新本页 。 这就实现了 WWW聊天
室定期刷新的特性
<meta>标记 -http-equiv属性 (续 2)
? set-cookie（ cookie设定 ）, 如果网页过期, 那么存盘的
cookie将被删除 。
例如,
<meta http-equiv="set-cookie"
content="cookievalue=xxx;expires=Friday,12-Jan-2004
20:30:00 GMT； path=/">
? window-target（ 显示窗口的设定 ）, 强制页面在当前窗口以
独立页面显示 。
例如,
<meta http-equiv="window-target" content="_top">
可以用来防止别人在框架里调用自己的页面。
3.2.2 文件头及相关标记 - <base>标记
<base>标记定义了文档的基础 URL地址，在文档中所有的
相对地址形式的 URL都是相对于这里定义的 URL而言的。一
篇文档中的 <base>标记不能多于一个，必须放于头部，并
且应该在任何包含 URL地址的语句之前。
<base>标记属性 -href 属性
（ 1） href 属性
href属性指定了文档的基础 URL地址, 该属性在 <base>标记
中是必须存在的 。
例 如, 如 果 希 望 将 文 档 的 基 础 URL 定义为
,http://www.abc.com”,则可以使用如下语句,
<base href = "http://www.abc.com">
当定义了基础 URL地址之后，文档中所有引用的 URL地址都
从该基础 URL地址开始，例如，对于上面的语句，如果文档
中一个超级链接指向 gsl/welcome.htm,则它实际上指向
的是如下 URL地址：
http://www.abc.com/gsl/welcome.htm
<base>标记属性 - target
（ 2） target
target属性同框架一起使用, 它定义了当文档中的链接被点
击后, 在哪一个框架中展开页面 。 如果文档中超级链接没有
明确指定展开页面的目标框架集, 则就使用这里定义的地址
代替 。 常用的 target的属性值有,
? _blank,表明在新窗口中打开链接指向的页面 。
? _self,在当前文档的框架中打开页面 。
? _parent,在当前文档的父窗口中打开页面 。
? _top,在链接所在的完整窗口中展开页面 。
3.2.2 文件头及相关标记 - <link>标记
<link>标记定义了文档之间的链接关系 。 但在网页中不会有链接
按钮出现,在 HTML的头部可以包含任意数量的 <link>标记, 一般
形式是,
<link href="url,rel=“relationship”>
常用属性,
（ 1） href, href属性值指向链接资源所在的 URL,其中 url是链
接的地址 。
（ 2） rel, rel属性定义了文档和所链接资源的链接关系, 可能
的值包括 alternate,stylesheet,start,next,prev,contents，
index,glossary,copyright,chapter,section,subsection，
appendix,help,和 bookmark等 。 如果希望指定不止一个链接
关系, 可以在这些值之间用空格隔开 。
常用于引用用户自定义样式表单 css文件
3.2.2 文件头及相关标记 - <isindex>标记
可让某些 Web Server 寻找网页内的关键字, 若 Web Server提
供这样的寻找功能, 客户端浏览器也支持寻找功能, 在载入网
页时会看到一个简单的寻找 。
<isindex>的一般形式是,
< isindex prompt=str>
例如,< isindex prompt="输入搜索内容 ">
在 Web页面的开始则出现, 输入搜索内容,, 后面有一个文本
框, 用于输入搜索的内容 。
<isindex>标记并不是只能用于 html文档头部, 它还可以用于表
单 （ form） 内 。
3.2.2 文件头及相关标记 -注释标记
注释标记
一般的形式是
<!--注释性文字 -->
用于在 HTML文当中书写说明性文字, 内容在浏览器中不显示 。
3.2.3 文件体及相关标记属性
在 <body>… </body>标记对之间的部分称为 html文档的文件体 。
文件体中描述的是浏览器中显示的内容 。 文件体由一系列的
控制语句构成, 在 < body>… </body>标记对之间可包含
<p>… </p>,<br>,<hr>等标记, 它们所定义的文本, 图像
等将会在浏览器中显示 。
<body>标记是一个非常重要的标记, 含有大量的属性, 许多重
要的网页功能都是通过 <body>标记的属性实现的, 我们可以
把这些属性分成如下几类,
1,一般属性
2,事件属性
3.2.3 文件体及相关标记属性 -一般属性
3.2.3 文件体及相关标记属性 -一般属性 (续 )
例如,
<body text="Blue">表示 <body></body>标记对中的
文本使用蓝色显示在浏览器中。另外，各个属性可以结合使
用，如：可以写成 <body bgcolor="red"
text="#0000ff">。
3.2.3 文件体及相关标记属性 -事件属性
当一个 Web文档被加载显示或者退出（关闭）的时候，会发
生相应的事件，这些事件在 <body>标记中通过属性来表达。
除了上述传统的事件外，随着浏览器版本的升级，现在还增加
了许多新的事件，以增加人机交互能力，这些事件是,
onMouseMove 鼠标移动,onDblClick 鼠标双击,
onMouseDown 鼠标被按下 等
3.2.4 文档内容标记
HTML文档体是由一系列的标记语句组成的,分成,
1．标题、段落标记
2．文本格式标记
3．图像标记 <img>
4．超链接标记 <a>… </a>
5．影像地图标记 <map> </map>,<area></area>
6,层次块标记 <div>… </div>
7,多媒体标记
8,<applet> </applet>和 <object>… </object>标记
9,其它标记
3.2.4 文档内容标记 -标题、段落标记
（ 1） 标题标记 <h1></h1>… <h6></h6>,一级到六标
题标记, 对应的字体逐渐渐小 。
（ 2） 段落标记 <p>… </p>,标记一个段落, 输出位置转到
下一行开始, 并增加一个空行 。
（ 3） 回车换行标记 <br>,将输出位置转到下一行的开始 。
（ 4） 水平线标记 <hr>, 插入一条水平线 。
（ 5）预排版文本标记 <pre>… </pre>,预排格式文本
（ Preformatted Text） 标记可以产生固定宽度的字体。
（ 6）块引用标记 <blockquote>… </blockquote>,主要
用于在文档中标记一段引用文字（如经典论述，名人的演讲
等），它所包容的文字相对于标记外的文字往左缩进两个字
符的距离。
3.2.4 文档内容标记 --文本格式标记
用来定义文本输出的字体和格式, 如斜体, 黑体字, 下划线
等 。 常用的标记包括,
（ 1） 字体标记 <font>… </font>,属性分别是,face属性给出
字体, 例如 face="宋体 "。 size属性给出字的大小, HTML默认
的字体 size是 3,如 size="5",size="+2"表示在默认字体大小基
础上加 2。 color属性给出字体的颜色 。
（ 2） <b>…</b>, <i>…</i>, <u>…</u>, <strike>…</strike>
标记
<b>… </b>标记为粗体显示 。 <i>… </i>标记为斜体显示标记 。
<u>… </u>为下划线标记 。 <strike>… </strike>删除线显示标记 。
3.2.4 文档内容标记 --文本格式标记 （举例）
举例,
<b><font face="宋体 " size="3" color="#0000FF"><i><u>字体标
记一 </u></i></font></b>
显示效果为,
字体标记一
3.2.4 文档内容标记 --文本格式标记 （续）
（ 3） < big>… </big>,< small>… </small>,<sub>… </sub>、
<sup>… </sup>标记
< big>… </big>和 < small>… </small>标记伟指定字体大小的标
记, < big>… </big>标记示字体放大, < small>… </small>标记
使字体减小 。
<sub>… </sub>和 <sup>… </sup>分别为上下标显示标记 。
例如,
<font face="宋体 ">字体标记二,<big>大字体 </big><small>小
字体 </small></font>
显示效果为,
字体标记二：大字体小字体
3.2.4 文档内容标记 --文本格式标记 （续 2）
（ 4） <strong></strong>,<em></em>,<tt></tt>、
<cite></cite>标记
<strong>… </strong>标记和 <b>… </b>标记类似, 都是字体加
粗标记 。 <em>… </em>标记和 <i>… </i>标记类似, 是斜体强
调标记 。 <tt>… </tt>为打字字体 Courier字体, 字母等宽标记 。
<cite>… </cite>为传记引述斜体效果标记 。
3.2.4 文档内容标记 --图像标记 <img>
<img>标记用以插入图像及设定图像属性, 丰富多彩的图像
可以提高网页的吸引力 。 <img>标记的属性有多达 21个, 下
面是几个主要的属性 。
? align,是指定图像的位置是靠左, 靠右, 居中, 靠上或者
是靠底 。 默认情况下是靠上, 即 align＝ top。 在图文混排时,
这个参数很有用 。
? id属性, 指定的 id号 。
? class属性, 指定图像所属的类型 。
? name,用于设定图像的名称 。
? src,规定插入的图像的 url地址, 也就是含路径的图像文件
名 。
? title,设定图像的标题 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 1）
? alt,表示图像的替代文字, 主要用于在浏览器还没有装入
图像 （ 或关闭图像显示 ） 的时候, 先显示有关此图像的信息 。
? border,设定图片的边框 。
? height和 width,分别用于指定图像的高度和宽度, 可以与图
片原来的宽度和高度不同 。
? hspace和 vspace,分别用于设定图像的左右边框大小和上下
边框大小, 在图文混排时会用到 。
? ismp和 usemap,在应用图像地图 （ map） 时使用 。 ismap表
示图像地图的数据存放在服务器中, 当鼠标在图像上的某个
区域上时, 可以将此区域的坐标传送给服务器处理 。 usemap
则用于设定图像地图的名称 。
? dynsrc,指定要下载的影像片断的 url地址 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 2）
? controls,设定影像播放的控制接钮 。
? start,设定何时开始播放影像片断, 有 三种选择：
start=fileopen表示页面载入后即开始播放, 默认的就是这种状
态； start=mouseover表示当鼠标移到影像上即开始播放；
start=fileopen,mouseover表示当有上面两种情况之一发生时就
开始播放
? loop,指定影像片断的播放次数, 当 loop=-1时, 影像片断
将循环播放直至页面更新 。
3.2.4 文档内容标记 --图像标记 <img> （ 续 3）
除了上述一般属性外, <img>标记还有几个事件属性, 分别
是,
? onload,图像被载入时触发 。
? onabort,图像取消载入时触发 。
? onerror,图像载入出错时触发 。
并不是真正地把图像加入到 HTML文档中, 而是将标记的 src
属性赋值为图形文件所在的路径及文件名 （ 图像的格式可以
为 gif或 jpg） 。
3.2.4 文档内容标记 --例 3-2 图像标记
[例 3-2] 图像标记的灵活运用示例 （ p63）
下面代码显示一幅泰山图片, 当鼠标移到图片的时候, 显示
一个简单的介绍, 鼠标移走后重新显示图片 。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Taishan Introduction</title>
</head>
<body>
<img src="image/t01.jpg" width="200" height="150" border="1" align="left"
name="tai" alt="taishan" vspace="10" hspace="10"
onmouseover="tai.src='image/t02.gif'"
onmouseout="tai.src='image/t01.jpg'" >
</body>
</html>
3.2.4 文档内容标记 --超链接标记 <a>… </a>
超链接标记 <a>… </a>可以定义超文本链接, 图像链接等 。
（ 1） 超文本链接
超文本链接的一般格式为,
<a href="url">字符串 </a>
href属性的值为统一资源定位器 （ url） 地址, 字符串为显示的
文字, 一般显示为蓝色 。 当鼠标指向这个字符串时, 鼠标变成
手形, 表示当前位置是一个超链接 。 例如,
<a href="http://www.w3c.org">W3C组织 </a>
（ 2） 图像链接
<a>… </a>标记可以用于图像链接, 一般用法是,
<a href="url"><img src="imgeurl"></a>
超链接标记 <a>属性
? target属性, 定义超链接打开的目标窗口 。 一般形式是
target="window-name",还可以取下面常量,_self（ 相同框
架 ）, _blank（ 新建窗口 ）, _top（ 整页 ）, _parent（ 父窗
口 ） 。
? title属性, 属性值为一字符串, 鼠标指向超链接时, 鼠标右下
角显示标题文本 。
? name属性, 定义一个书签 。 标识一个书签的方法为,
<a name="name">书签文本 </a>
我们就把放置标记的地方做了一个叫做, name”的标记 。
有了书签后, href属性除了指向一个网址外, 还可以定位到网
页内一个具体的书签, 用法是 href="url#name",如果是同一个
页内, 可以写成 href="#name",其中 name是书签名, 同一网页
内不能重名 。
超链接标记 <a>举例
[例 3-3] 超链接标记使用示例 。 (p64)
下述代码演示了超文本链接, 在 html文档中插入书签, 图像链
接的应用 。
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
</head>
<body>
<p align="center">美丽的山东 </p>
<p><a href="#济南 "><img border="0" src="image/1.jpg" width="30"
height="30"></a></p>
<p><a name="济南 ">美丽的泉城 </a></p>
<p><a name="青岛 ">美丽的海滨城市 --青岛 </a></p>
<a href="http://www.cnta.com/" title="中国旅游网 " target="_blank">
主要旅游网 </a>
</body>
</html>
3.2.4 文档内容标记 --影像地图标记
一个图象映射 （ map） 由一些区域 （ area） 组成, 每个区域对
应于一个相关联的超级链接, 当点击那个区域时就转到相应的
那个链接 。
（ 1） <map>… </map>标记
有一个开始和结束标志, 中间是一系列的 area标记, 具有一个
name属性, 指出图像地图的名称 。
（ 2） <area>… </area>标记
<area>标记主要用于图像地图 （ map）, 通过该标记可以在图像
地图中设定作用区域 （ 又称, 热点, ）, 当用户鼠标移到某作
用区域点击时, 执行对应的事件处理函数 。
影像地图标记 -属性
<area>标记属性有,
? class属性, 指定热点的类型 。
? id属性, 指定热点的 id号 。
? href属性, 用于设定该热点所链接的 url地址 。
? alt属性, 用于设定热点的替代性文字 。
? shape属性 coods属性, shape和 coords是两个主要的参数,
用于设定热点的形状和大小 。 其基本用法如下,
shape="rect" coords="x1,y1,x2,y2",表示设定热点的形状为矩
形, 左上角顶点坐标为 （ X1,y1）, 右下角顶点坐标为
（ X2,y2） 。
影像地图标记属性（续）
shape="circle" coords="x1,y1,r",表示设定热点的形状为圆形,
圆心坐标为 （ X1,y1）, 半径为 r。
shape="poligon" coords="x1,y1,x2,y2,....."表示设定热点的形
状为多边形, 各顶点坐标依次为 （ X1,y1）, （ X2,y2）,
（ x3,y3） …
<area>标记是在图像地图中划分作用区域的, 其划分的作用区
域必须在图像地图的区域内, 所以在用 <area> 标记划分区域
前必须用 <map>标记来设定图像地图的作用区域, 并为指定的
图像地图设定名称 。
举例,
[例 3-4] 使用图像地图示例
影像地图标记实例
[例 3-4] 使用图像地图示例
根据上面的要求, 我们可以按照下面的步骤完成,
使用 Frontpage2000制作
（ 1） 插入中国地图图片 （ chinamap.jpg）, 并设置好图像的有
关属性参数, 且在 <img>标记中设置参数 usemap="chinamap"
ismap,以表示对图像地图 （ chinamap） 的引用 。
（ 2） 用 <map>标记设定图像地图的作用区域, 并取名为
chinamap。
（ 3） 分别用 <area>标记针对每个省 （ 直辖市 ） 的位置划分出多
边形作用区域, 并设定好其链接参数 href。
3.2.4 文档内容标记 --层次块标记 <div>… </div>
为了更好的实现元素的精确定位, 动态 HTML (Dynamic HTML)
给 HTML 增加了网页中层 (layer) 和位置 (position)的概念 。
对于两种主流的浏览器, 对层的支持是不一样的, IE支持 <div>
标记, Netscape支持 <layer>标记 。
图层的概念广泛应用于 Dreamweaver,photoshop等 。
层次块标记 <div>属性
<div> 标记用于定义一个块, 中间可以包含引起行中断的标记,
如 <table>标记等 。
<div>标记的属性,
? id属性, 用于标记一个 <div>块, 以便引用该块 。
? style属性
例如, 在 IE浏览器中, 可以用下面的方法定义 <div>块,
< div style="background-color:#ffffcc position:absolute;
left:150px; top:200px; width:200px; height:20px;">文本块示例
</div>
如果是在 Netscape中, 相同的功能应写为,
< layer bgcolor="#ffffcc" left=150 top=200 width=200
height=20>文本块示例 </layer>
层次块标记 <div>浏览器区分
在实际编写 Web应用时候, 可以通过下属代码来区分两种不同
的浏览器 。
if (document.all) {
// 编写 IE支持的代码
,.,
}
else if (document.layers) {
// 编写 Netscape支持的代码
,.,
}
层次块标记 <div> 实例
[例 3-5] 定义 div块并进行平滑移动
在浏览器窗口定义一个 div块, 双击鼠标左键, div块从左向右平
滑移动, 单击鼠标左键, 停止移动 。
解释请参看书本 （ p67）
3.2.4 文档内容标记 --7,多媒体标记
（ 1） <bgsound> 标记, 用以插入背景音乐, 但只适用于 IE浏
览器 。 主要属性包括,
? src属性, 给出 midi音乐文件的 。
? autostart属性, 设置音乐文件播送结束后的处理, 如果为 true，
则自动播放音乐, 为 false 则结束不播放, 默认值为 falese。
? loop属性, 设置是否自动反覆播放, loop=2 表示重复两次,
Infinite 表示重复多次 。
（ 2） <embed>标记
<embed> 是用以插入各种多媒体, 包括声音, 音乐或影像等 。
格式可以是 Midi,Wav,AIFF,AU 等, Netscape 及 新版的
IE都支持该标记 。 主要属性包括,
3.2.4 文档内容标记 --7,多媒体标记 (续 )
? src属性和 autostart属性, 同 <bgsound>标记 。
? hidden属性, 是否完全隐藏控制画面, true 为是, no 为否
(内定 )。
? starttime 属性, 设 定 歌 曲 开 始 播 放 的 时 间 。 如
starttime="00:30" 表示从第 30秒处开始播放 。
? volume属性, 设定音量大小, 数值是 0到 100之间 。 内定则为
使用者系统本身之设定 。
? width属性, 设定控制画面的宽度和高度 。
? align属性, 设定控制画面和旁边文字的对齐方式, 取值可以
是 top,bottom,center,baseline,left,right,texttop、
middle,absmiddle,absbottom。
3.2.4 文档内容标记 --7,多媒体标记 (续 2)
? controls属性, 设定控制画面的外貌 。 取值可以是 console
（ 一般正常的面板, 默认值 ）, smallconsole（ 较小的面板 ）,
playbutton（ 只显示播放按钮 ）, pausecutton（ 只显示暂停按
钮 ）, stopbutton（ 只显示停止按钮 ） 或 volumelever（ 只显示
音量调整钮 ） 。
3.2.4 文档内容标记 —
8,<applet> … </applet>标记和 <object>… </object>标记
为了满足网页制作更加复杂的功能, HTML扩展了许多新的标
记, 用以插入脚本程序, Java程序, 内嵌对象, Active控件等,
从而制作出更加新颖, 丰富和交互能力更强的 Web页面 。 这些
扩展的标记主要是 <script>,<bssound>,<embed>,<applet>、
<object>等, 前面几种标记在上面已经做过介绍, 下面我们介
绍 Java小程序标记和对象标记 。
（ 1） Java小程序标记 <applet> … </applet>用于插入 Java程序
段
（ 2） <object>… </object>标记
<object>… </object>标记用于在网页中插入对象, 除了可以插
入 ActiveX控件外, 还可以插入 OLE对象, 如图像, 文档, 动画,
小程序等 。
（ 介绍略 ）
3.2.4 文档内容标记 --9,其它标记
（ 1） <marquee>… </marquee>标记
（ 2） 闪烁文字 <blink>… </blink>标记
[例 3-6] 超链接标记使用示例 。
下述代码演示了 <a>标记, <div>标记以及 <marquee>标记的组
合应用, 当鼠标指向一个超文本链接时, 在鼠标的右下角显示
marquee效果 。
解释参见 p71
3.2.5 列表
列表 （ list） 是 HTML文档中文档内容的一种重要的表现形式,
特别适合于罗列有关信息内容, 具有清晰明了, 易于查阅, 操
作性强的特点 。
列表可以嵌套, 显示时按层次缩进, 清晰明了 。
HTML中的列表分为三种,
3.2.5 列表 -种类
（ 1） 不编号列表 （ unnumbered list）, 标记是 <ul>… </ul>
<ul>列表包含若干个列表项 （ list item）, 列表项标记是
<li>… </li>,<li>标记可以有属性 type,取值可以是 disk,circle,
square。
（ 2） 编号式列表 （ ordered list）, 标记是 <ol>… </ol>,<ol>列
表包含若干个列表项 （ list item） 。 <ol>标记有 start属性, 可以
是数字 1,2等, 用于指定开始编号 。
（ 3） 定义式 （ definition list）, 标记是 <dl>… </dl>。
定义列表通常包含有交替出现的定义术语 （ definition term）
（ 标记为 <dt>） 和定义描述 （ definition definition） (标记为
<dd>)。
3.2.5 列表 -举例
<UL>
<LI type=circle> 艺术的形式
<OL start=1>
<LI> 文学
<LI> 音乐
<LI> 绘画
</OL>
<LI type=disk> 科学与技术的内涵
<DL compact>
<dt> 科学
<dd> 科学是指,.,
<dt> 技术
<dd> 技术是指,.,
</DL>
</UL>
3.2.6 表格（ table）
表格 （ table） 是网页制作中安排布局最好的工
具, 因为表格不但可以很好地安排文本或图像
的显示位置, 而且还可以任意进行背景和前景
颜色的设置 。
1,<table>… </table>标记
2,<tr></tr>,<th></th>,<td></td>
3,<caption></caption> 标记
<table>… </table>标记
< table>… </table> 标记对用来创建一个表格, 每个
<table>… </table>标记对之间包含若干 <tr>… </tr>,一个 <tr>对
应表格的一行 。 每一个 < tr>… </tr> 标记对又包括若干个
<td>… </td>标记对, 它对应一行中的一格单元格 。
举例,FrontPage2000,插入表格
3.2.6 表格（ table） - 属性
3.2.6 表格（ table） -<tr></tr>,<td></td>
一个表格由若干行 （ Row） 构成, 每一行又由若干个单元格
（ Cell） 组成, 另外一个表格还可能具有一个标题 （ Head） 。
根据上述表格的结构，在 <table>… </table>标记对之间，
用 <tr>… </tr>标记对来创建表格中的每一行（ Row）,表
有多少行就有多少个 <tr></tr>标记对； <td>则填充由
<tr>和 <th>组成的表格,<td></td>标记对用来创建表
格中一行中的一个单元格,<td></td>标记对之间输入单
元格中要显示的内容。
FrontPage2000,插入表格演示
3.2.6 表格（ table） -<tr></tr>,<td></td>属性
<tr>还有 align和 valign属性, 分别表示水平对齐和垂
直对齐方式 。 <td>具有 width,colspan,rowspan和
nowrap属性 。 width是单元格的宽度, 单位用绝对像
素值或总宽度的百分比； colspan设置一个单元格跨
占的列数 （ 缺省值为 1）, rowspan设置一个单元格
跨占的行数 （ 缺省值为 1） ； nowrap禁止单元格内
的内容自动换行 。
3.2.6 表格（ table） -<caption></caption> 标记
标记表格标题, 具有 align和 valign属性 参数, 设置水
平和垂直对齐方式 。
[例 3-7] 使用表格示例
3.2.7 表单（ form）
表单 （ form） 在 Web网页中用来给访问者填写信息,
从而能获得用户信息, 使网页具有交互能力 。 表单
和 Windows的对话框类似, 是由若干控件组成的,
用于实现和用户的交互 。 当用户填写完信息后做提
交 （ submit） 操作, 表单的内容将从客户端的浏览
器传送到服务器上, 由 Web服务器上的服务器脚本
程序处理 。
表单及输入类型
（ 1） 表单标记 <form>… </form>
<form>… </form>标记对用来创建一个表单, 即定义表单的开始和
结束位置, 在标记对之间的一切都属于表单的内容 。
<form>标记的属性有,
? name属性, 给出表单的名称, 常常用于脚本编程, 在一个网页
中, 可以含有多个表单 。
? action属性, action的值是表单处理程序的网络路径和程序名,
如,<form action="http://www.abc.com/feedback.jsp">,当用户
提交表单时, 服务器将执行网址 http:// www.abc.com/上的表单处
理程序 feedback.jsp。
表单及输入类型（续 1）
? method属性, method属性用来定义服务器表单处理程序从表
单中获得信息的方式, 有 get或 post两种传输方式 。
?target属性, target属性用来指定目标窗口或目标帧,显示表单
处理程序的视窗名称 。
表单及输入类型（续 2）
（ 2） 输入控件标记 <input type="">
<input type="" name = >标记用来定义用户输入区, 无尾标注 。 此标记必须
放在 <form>… </form>标记对之间 。 一般形式是,
<input type="" name = "" value="" … >
? type 属性, 给 出 控 件 的 类 型, 常 用 的 类 型 text,TEXTAREA,
Radio,Checkbox,Button。 <SELECT> <OPTION>,Image,Hidden,
Password,,File Submit/Reset,
? name属性, name属性给出输入控件的名字, 该名称可以使用户清楚当前
的要做的选择和输入的内容 。
? value属性, 保存用户的输入和选择, 服务器就是通过调用输入区域的
value属性值来获得该区域的数据 。 另外, 用户可以通过 value属性来指定输
入区域的缺省值 。
text单行文本框控件
单行文本框, 一般形式是,
<input type="text" … >
主要属性有,
? name属性, name为文本框的名称, 便于程序获取用户输入 。
? value属性, value属性存储文本框的初始值 。
? size属性, Size属性表示文本框的显示长度 。
? maxlength属性, maxlength是文本框中输入的有效数据长度 。
例如,html代码如下
<form name="myForm" method="POST" action="/progs/feedback.jsp">
用户账户,<input type="text" name="AccountStr" size="10" value="guest"
maxlength="8"> </form>
text单行文本框控件 -显示
在 Dreamweaver中设计视图的显示结果
去掉 form标记则不显示红色的部分
3.2.7 表单（ form） -password
输入密码文本框, Password 的属性和 Text是完全相同, 两者不同是, 当用户
输入密码时, 区域内将会显示 "*"号 。
一般形式是,
<input type=" password " … >
例如, html代码如下,
<form name="myForm" method="POST" action="/progs/feedback.jsp">
密 码, < input type="password" name="myPassword" size="10"
maxlength="8">
</form>
显示效果为,
password –显示
显示效果为,
<textarea> 输入
多行文本框, 又称滚动文本框 。 和其它的输入类型不同, 它不是通过 <input
type=" " … >来指定的, 它是一个双标记, 写作,<textarea>… </textarea>,此
标记对用于 <form>… </form>标记对之间 。
<textarea>标记的主要属性有,
? name属性, name为多行文本框的名称, 便于程序获取用户输入 。
? rows属性和 cols属性, 分别用来设置文本框的列数和行数, 列与行以字符数
为单位 。
例如,exa3-a（ p78）
<textarea> 实例
例如,exa3-a（ p78）
<table border="1" cellpadding="2" width="350" >
<tr>
<th width=“30” align=“center”>简 <br><br>介
</th>
<td width="300">
<form name="myForm" method="POST"
action="--WEBBOT-SELF--">
<textarea name="brief" rows="5"
cols="40">简要说明 </textarea>
</form>
</tr>
</table>
3.2.7 表单（ form） - button
按钮控件, 一般形式是,
<input type="button" … >
按钮是最长使用的一种输入控件, 除了具有若干的属性外, 同时还可以接受
各种鼠标事件, 主要属性有,
? name属性, name为文本框的名称, 便于程序获取用户输入 。
? value属性, value为按钮的显示名称 。
例如, 有如下 html代码,
<form name="myForm" method="POST" action="/progs/feedback.jsp">
<input type="Button" value="回前一页 " onclick="history.go( -1 );return true;">
<input type="Button" value="关闭窗口 " onclick="window.close();return true;">
</form>
Button显示
在 Dreawweaver中的显示效果
3.2.7 表单（ form） - radio
单选钮, 往往是若干个 radio为一组 。 每一个 radio 必须且仅有一个 value，
通常有两个或以上 radio具有相同的 name,但不同的 value,从而选择其中
之一 。
? name属性, 单选扭的名称, 一般是若干个 radio一组, 取相同的 name。
? checked属性, 用来设置该单选框缺省时是否被选中, 相同 name的多个
Radio中只能有一个选择, 或都不使用该参数 。
? value属性, 存储单旋钮的取值, 多个具有相同 name的单旋钮应该具有
不同的 value。
例如,html代码如下,exa3-b（ p79）
Radio显示效果
Radio显示效果
3.2.7 表单（ form） - checkbox
复选框, 一般形式是,
<input type=" checkbox " … >
复选框是对某种输入做出, 是, 或, 否, 的选择, 除了具有若干属性外,
同时还可以接受鼠标事件 。 和 radio不同, 每一个 checkbox都是独立的 。
chebox的主要属性有,
? name属性, name为复选框的名称, 便于程序获取用户输入 。
? value属性, 每一个 Checkbox 必须有一个 value,当复选框选中 value值
便会传到表单的 action属性指定的程序中 。
? checked属性, 用来设置该复选框缺省时是否被选中 。
例如, html代码如下：例如,html代码如下,exa3-c
Checkbox显示效果
Checkbox显示效果
3.2.7 表单（ form-<select> … </select>和 <option>
<select>… </select>标记对和 <option>… </option>标记对用来创建一个下拉
列表框或可以复选的列表框 。 他不需要在 <input type=" ">中指定输入类型 。
（ 1） <select>… </select>标记对的一般形式是,
<select name=" ">
<option value=" ">… </option>
<option value=" ">… </option>
… …
</select>
<select> 属性
<select>标记的属性有,
? name属性, name为下拉式列表控件名称, 便于程序获取用户输入 。
? size属性, 下拉式列表的高度, 缺省时值为 1,若没有设置 （ 加入 ） multiple
属性, 显示的将是一个弹出式的列表框 。 若使用此参数则不会有 PopUp效果 。
如果小于可选的项目数量, 则出现垂直滚动条 。
? multiple属性, 指定是否可以多选 。 multiple属性不用赋值, 直接加入标记中
即可使用, 加入了此属性后列表框就成了可多选的了 。
<option>… </option>标记
（ 2） <option>… </option>标记
<option>标记用来指定列表框中的一个选项, 它放在 <select>… </select>标记
对之间 。 主要参数有,
? value属性, 用来给 <option>指定的那一个选项赋值, 这个值是要传送到服务
器上的, 服务器通过调用 <select>区域的 name的 value属性来获得该区域选中
的数据项的 。
? selected属性, selected用来指定默认的选项, 一个下拉是复选框可以有一项
或零可内定被选 。
例如,html代码如下,
<select> … </select>和 <option>显示效果
<form name="myForm" method="POST" action="/progs/feedback.jsp">
城市,
<select name="city" width="100">
<option value="beijing">北京 </option>
<option value="shanghai">上海 </option>
<option value="guangzhou">广州 </option>
<option value="hk">香港 </option>
<option value="jinan" selected>济南 </option>
<option value="qingdao">青岛 </option>
</select>
</form>
3.2.7 表单 （ form） - image
Image输入类型, 通常用于取代 submit/reset两个默认的按钮, 来制造个性化
的按钮, 因为由这两个按钮并不漂亮, Image输入的一般形式是,
<input type="image" … >
主要的属性有,
? name属性, 所要代表的按键, 可以是 submit,reset或其它 。
? src属性, 设置按钮图片, 如果按键图片文件不与该 html文件在同一目录下,
需要加上正确的相对或绝对途径 。
3.2.7 表单 （ form） - hidden
hidden为定义隐藏表单的元素, 它在网页上并不显示, 只是随表单一起传
给表单的 action属性指定的程序 。
一般形式是,
<input type="hidden" … >
主要的属性有,
? name属性, 所要代表的控件名称, 便于程序获取用户输入 。
? value属性, 默认值 。
例如, 有如下代码,
<input type="hidden" name="myID" value="730118">
当表单提交后, 服务器程序可以获得 myID的值是 730118,从而实现传送数
据的目的 。
3.2.7 表单 （ form） - file
文件上传输入 file是 html新增加的表单控件, 用于实现文件的上传操作 。 在介绍
具体的使用以前, 先介绍有关文件上载的相关知识 。
（ 1） 文件上载知识
在 TCP/IP中最早出现的文件上载机制是 FTP,它是将文件由客户端发送到服务
器的标准机制
为了实现在 http协议上上载文件, RFC1867在表单中增加了新的输入类型, 就
是 <input type="file"… >。
注,RFC（ Request for Comments Document,请求注释 ）, 。 RFC往往是
Internet一些标准的草案 。 通常, 当某家机构或团体开发出了一套标准或提出
对某种标准的设想, 想要征询外界的意见时, 就会在 Internet上发放一份 RFC，
对这一问题感兴趣的人可以阅读该 RFC并提出自己的意见 。 绝大部分网络标准
的制定都是以 RFC的形式开始的 。
3.2.7 表单 （ form） - file（ 续 1）
（ 2） <input type="file"… >输入
file类型的输入将显示一个文本框, 用于文件名的输入, 同时在文本框的后面显
示一个, 浏览 …, 按钮, 允许用户通过浏览的方式选择要上传的文件 。
3.2.7 表单 （ form） - file（ 续 2）
主要的属性有,
? name属性, 所要代表的控件名称 。
? size属性, 所显示文字盒的长度 。
? maxlength属性, 可输入字符的个数 。
? accept属性, 接受的文件类别, 有二十六种选择, 但可不设定 。
="text/html"
3.2.7 表单 （ form） - file（ 续 3）
例如, 有如下代码,
<form name="myForm" method="POST" action="/progs/archievefiles.jsp">
文 件, < input type="file" name="upload" size="15" maxlength="50"
accept="text/html">
</form>
3.2.7 表单 （ form） - submit/reset
最后, 我们介绍两个走重要的按钮, 就是当表单填写完毕后, 需要选择的
submit/Reset按钮, 它结束表单输入, 然后开始处理用户的输入数据 。
（ 1） 表单提交
表单提交按钮就是将表单内容提交给服务器, 一般形式是,
<input type="submit"… >
有如下属性,
? name属性, 这和其它控件的属性不同, 在提交表单中, name可以指定一个
函数, 需要和 form标记中 action属性的程序配合 。 一般情况下, 不需要 name属
性 。
? value属性, 提交按钮的显示名字, 一般为, 确定,,, 提交, 等易于理解的
名字 。
3.2.7 表单 （ form） - submit/reset（ 续）
（ 2） 重填按钮
表单清除就是要将表单中已经的输入和选择全部清除, 重新填写 。
一般形式是,
<input type="reset"… >
属性和表单提交相同,
3.2.7 表单 （ form） - submit/reset（ 例子）
下面是通过 Frontpage在网页中插入表单的默认代码,
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"
S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<input type="submit" value="提交 " name="B1"><input type="reset" value="
全部重写 " name="B2">
</form>
在上述代码中, <form>标记中的 action没有指定表单处理程序, 则采用 Web服
务器端 Frontpage扩展中一个 默认的宏 "--WEBBOT-SELF--",来处理用户的表
单数据 。 这个 action往往需要用户程序来代替, 以便处理用户的输入 。,
3.2.7 表单 （ form） - 例 3-8
[例 3-8] 一个利用 form计算阶乘的例子 。 （ p83）
3,2.8 帧（ frame）
帧 （ Frame） 可以用
来将浏览器窗口划分
为多个区域 （ 子窗
口 ）, 每个子窗口中
装载一个 HTML文件 。
即每个 HTML文件占
据一个帧, 而多个帧
可以同时显示在同一
个浏览器窗口中, 这
样的 Web页面称为框
架网页 。
<frameset>… </frameset>标记
< frameset>… </frameset> 标 记 对 放 在 帧 的 主 文 档 的
<body></body>标记对的外边, 也可以嵌在其它帧文档中,
并且可以嵌套使用 。 此标记对用来定义主文档中有几个帧并
且各个帧是如何排列的 。 它具有 rows和 cols属性, 使用
<frameset>标记时这两个属性至少必须选择一个, 否则浏览
器只显示第一个定义的帧 。
rows用来规定主文档中各个帧的行定位, 而 cols用来规定主
文档中各个帧的列定位 。 这两个属性的取值可以是百分数,
绝对像素值或星号 (,*” ),其中星号代表那些未被说明的空
间, 如果同一个属性中出现多个星号则将剩下的未被说明的
空间平均分配 。 同时, 所有的帧按照 rows和 cols的值从左到
右, 从上到下排列 。
3,2.8 帧（ frame） - 举例
例子,exa3-e(p85)
<html>
<head>
</head>
<frameset rows="64,*,64">
<frame name="top" src="new_page_2.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="new_page_3.htm">
<frame name="main" src="new_page_4.htm">
</frameset>
<frame name="bottom" target="contents" src="new_page_5.htm">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>
帧的显示效果
将屏幕分成四
个区域，可以
同时显示四个
不同的 html文
件
<frame>标记
<frame>标记放在 <frameset>… </frameset>之间, 用来定义
一个具体的帧 。
<frame>标记具有 src和 name属性, 这两个属性都是必须赋值
的 。 src是此帧的源 HTML文件名 (包括网络路径, 即相对路径
或网址 ),浏览器将会在此帧中显示 src指定的 HTML文件；
name是此帧的名字, 这个名字是用来供超文本链接标志 <a
href=“” target=“”>中的 target属性用来指定链接的 HTML文
件将显示在哪一个帧中 。
例如,
<a href="newone.htm" target="main">链接的文本 </a>
<noframes>… </noframes>标记
有 的 浏 览 器 不 支 持 框 架 网 页, 此 时 需 要 使 用
<noframes>… </noframes>标记对, 用来在那些不支持帧的浏
览器中书写传统的 <body>… </body>部分 。
3.2.9 使用层叠样式表 CSS技术
所有的 HTML标记 (Tags)都有各自默认的样式 (style),
什么是样式呢？样式定义了内容显示的形式和风格，如字体
文字间距、颜色、背景,Margin等, 类似于 Word中的样式。
也就是说,浏览器会按照一定的基本规则来解释和显示每一个
标记中的内容。
什么是 css? 即层叠样式表（ Cascading Stylesheet,CSS）
可以有效地对页面内容的的布局、字体、颜色、背景和其它
效果实现更加精确的控制。
3.2.9 使用层叠样式表 CSS技术 -1使用内联样式
每个标记都有默认的显示样式。可以使用 style属性修改这些
默认的显示。对于任意 body元素，都具有 style属性
（ basefont,param和 script除外） 。 ttyle可以将任何数量
的 css声明当作自己的值，而每个声明用分号隔开。 定义了
style属性的标记将在浏览器中按照 style属性来显示 。如,
<p style="color,red; font-family:'New Century
Schoolbook',serif">红色 NewCentury Schoolbook字，
如果字体可用的话。 </p>
注意：在 style中 New Century Schoolbook包含在单引号中，
因为双引号被用作包含样式声明。
要使用内联样式，必须在文档的 <head>…</head>部分包
括以下标记,
<meta http-equiv="Content-Type" content="text/css">
3.2.9 使用层叠样式表 CSS技术 --使用内联样式（续）
因为和需要展示的内容混合在一起，内联样式会失去一些
样式表的优点。
例如，当一个样式要应用到所有文档的某种元素（标记），
或者将一个样式用到某个元素的一个场合，而不是全部，
此时应使用 id属性代替 style属性。
ID属性用于定义一个元素的独特的样式。一个 CSS规则如,
#myID1 { font-size,larger }
可以通过 ID属性应用到 HTML中,
<p id=myID1>欢迎使用 ID属性 </p>
2.<style>… </style>标记
<style>标记放置在 html文档的 <head>… </head>内，
用于定义样式。使用 <style>标记可以为网页设置不同的样
式属性，一般形式为,
<style type="text/css">
标记 { 属性名, 属性值 ; 属性名, 属性值 ; }
</style>
在 <style>和 </style>之间的部分是一系列的样式定义，实
际上，就是对 html默认的标记从新定义它们的属性值，做到
个性化。
<style>… </style>标记 （举例）
例如, 要设置整个文档的文字颜色和背景色, 可以定义样式为,
<style type="text/css">
body { color,black; background,white; }
</style>
例如, 要个性化超连接的显示, 可以定义下面的样式 。
<style type="text/css">
a:hover { color:#FF0000;
text-decoration:none;
font-weight:bold}
a {color:#0000FF;text-decoration:none; font-size:14px}
</style>
<style>… </style>标记 （举例续）
这样，对于文档中的超连接（ <a>… </a>）,文字显示为
蓝色，当鼠标指向的时候则显示红色，同时字体也为 14px，
不显示下划线。
例如,exa3-f
3.2.9 使用层叠样式表 CSS技术 --样式（,css） 文件
我们可以将所有的 <style>定义保存为一个独立的文件，扩展
名为,css。 然后，当某个网页需要使用其中的样式时，在文档
的 <head>… </head>中增加 <link>标记，一般形式如下,
<link href="mystyle.css" rel="stylesheet"
type="text/css" >
使用样式与 class属性
对于 html的标准标记，当定义了对应的样式后，文档中的标
记将按照新的定义显示。如果要对某个具体的标记使用样式，
则应该为这个特定的标记命名，并在标记中使用 class 属性。
class属性用于指定元素使用何种样式。
使用样式与 class属性 (续 )
例如：如果想对某个特定的 <h1>标题指定上下间距, 而不是所
有的 <h1>标记, 则应该为这个特定的标题命名, 并在标记中
使用 class 属性, 例如,
样式定义格式如下,
h1.myH1{ color:#ff0000; margin-top,1em; margin-bottom,
2em; }
则有下面两种 <h1>标记的使用,
<h1>Old Headline One</h1>
<h1 class="myH1">New Headline One</h1>
5自定义新样式类
除了 html中的标准标记可以定义样式外，用户还可以定义自
己的新样式类。例如：定义一个,css文件 pub.css,内容如
下,
.border {
border,1px solid #63A6D6;
}
.myword1 {
font-family,"宋体 ";
font-size,14px;
font-weight,normal;
color,#000000;
text-decoration,none;
}
在其它的 html文档中就可以包含该文件，并引用里面的样式
类。
自定义新样式类（续 1）
首先, 在文档的头部, 增加,
<link href="pub.css" rel="stylesheet" type="text/css">
然后, 可以在 html的文档体内使用上面的样式, 如,
<p class="myword1">
..,
</p>
3.3 扩展标记语言 XML
3.3.1 XML简介
3.3.2 创建 XML文档
3.3.3 使用文档类型定义 DTD
3.3.4 使用架构 Schema
3.3.5 名称空间
3.3.6 使用 CSS格式化数据
3.3.7 可扩展样式语言 XSL
3.3.8 创建数据岛
3.3.9 文档对象模型 DOM
3.3.10 XLink和 XPointer规范
3.3.1 XML简介
和 HTML一样，可扩展的标记语言 XML（ eXtensible
Markup Language） 也起源于 SGML,是 SGML的一个子
集。 XML 1.0标准于 1998年 2月 10日公布。它的公布引起了
人们的广泛关注,XML被认为是继 HTML和 Java编程语言之
后的又一个里程碑式的 Internet技术。
? HTML的问题
? XML的产生
3.3.1 XML简介 —— HTML的问题
由于 Web技术的飞速发展，传统的 HTML存在着如下的问题
和不足,
（ 1） HTML的标记（ tag） 集合是固定的，大约 70个左右。
（ 2） DHTML带来的问题，由于标准 HTML已经无法满足用
户的需求，人们在其基础上增加了动态的成分，如脚本程序
等。但是，这些非标准的技术制作的网页在不同的浏览器之
间互不兼容。
（ 3） HTML只是一种表现技术，它并不能揭示 HTML标签所
标记的信息的任何具体含义。
3.3.1 XML简介 —— XML的产生
在 1996年 8月，那些关心 SGML的专家聚集在美国西雅图，
成立了一个名为 GCA（ Graphic Communications
Association,图形通信协会）的组织。在这次会议上，
GCA探讨了 SGML对 Web技术的影响。
为了使 SGML被更多的人理解和接受，就必须对 SGML过于
复杂难于被理解和实现的方面进行简化。专家们迅速着手对
SGML进行精简，去掉其语法定义部分，适当简化 DTD部分，
并增加了部分互联网的特殊成分。为了体现它与 HTML的不
同，工作组将其命名为 XML（ eXtensible Markup
Language）,同时也将自身更名为 XML工作组。 1998年 2
月 10日,XML工作组正式向 W3C提交了 XML的最终推荐标
准，这就是 XML 1.0标准。
3.3.2 创建 XML文档
XML文档是一个纯文本文件，可以用任意的文本编辑器编写，
如 Windows中的, 记事本, （ Notepad） 程序。为了提高
编写效率，市场也有一些专门的可视化 XML创作及编辑工具。
3.3.2 创建 XML文档 —— XML文档的组成
一个 XML问档一般包含三个部分,
（ 1） XML文档声明
位于文档的第 1行, 一般形式为,
<?xml version="versionNumber"
[encoding="encodingValue"]
[standalone="yes/no"]?>
其中, VersionNumber为 XML文档所遵循的 XML规范的版本
号；可选项 encoding标志 XML处理器使用的字符集, 默认值
为 UTF-8（ 适合美国英语的 Unicode压缩版 ） ；可选参数
standalone取值为, yes”或, no”（ 取决于该文档是否依赖于
其他 XML文档 ）, 默认值为, yes”。
例如,<?xml version="1.0" encoding="GB2312"?>
3.3.2 创建 XML文档 —— XML文档的组成（续 1）
（ 2） 文档类型定义
在 XML文档声明和 XML文档之间的部分是文文档类型定义
（ DTD） 部分, 一般形式是 <!DOCTYPE … >如不需要可以省
略
3.3.2 创建 XML文档 —— XML文档的组成（续 2）
（ 3） XML标识的文档内容
XML文档内容主要包括,
① 声明根元素
每一个有效的 XML文档有且仅有一个根元素 。 根元素是在一
个 XML文档中包含所有其它元素的元素, 无论是在语法上还
是在逻辑上, 根元素位于所有数据的顶层 。 根元素的声明和
其他元素的声明方法一样, 一般形式为,
<rootElementName>...</rootElementName>
3.3.2 创建 XML文档 —— XML文档的组成（续 3）
② 声明非根元素
在 XML中, 我们是通过在容器元素中嵌套被包含元素来描述
数据对象的, 一个被包含元素又可以包含自己的元素 。 包含
其他元素的元素称为容器 （ container）, 所有的非根元素都
包含在根元素中, 根元素是最上层的容器元素 。
<containerElement [attributesList]>
[<containedElement[attributesList]>
</containedElement>]
,.,
</containerElement>
举例,
3.3.2 创建 XML文档 —— XML文档的组成（续 4）
例如：用 XML来描述一部汽车数据 。 汽车包括发动机, 发动
机又包括活塞等, 用 XML描述如下,
<automobile>
<engine>
<piston>… </piston>
…
</engine>
</automobile>
3.3.2 创建 XML文档 —— XML文档的组成（续 5）
③ 数据元素属性
一个数据元素可以有若干属性, 属性必须在一个元素的起始
标记中声明, 一般形式为,
<elementName [属性名 1="属性值 "] [属性名 2="属性值
"] … >elementValue</elementName>
其中, 元素名和属性名必须以字母或下划线开始, 并且只可
能包含字母, 数字, 下划线, 连字符和句点 。
例如：为汽车 （ automobile） 定义三个属性：车牌号, 车主
和制造商, 可以将 <automobile>标记写为,<automobile
number="123456" owner="Brion" manufacture="Ford">
3.3.2 创建 XML文档 —— XML文档的组成（续 5）
④ 定义名称空间
在 XML中, 用户可以自己定义标记和命名元素 。 因此, 如果
把多个 XML文件合并为一个, 就很可能出现冲突 。 名称空间
（ Namespaces） 就是为此而设计的 。
对 XML Namespaces严格的定义是：, Namespaces是用
URI加以区别的, 在 XML文件的元素和属性中出现的所有名
称的集合, 。 在没有 Namespaces的 XML 1.0文件里, 元素和
属性中出现的名称被称为, 本地名称 （ Local Names）,。
3.3.2 创建 XML文档 ——XML文档的组成（续 6）
<namespace,elementName xmlns,
namespace="globalUniqueURI">
[<namespace,containedElement [namespace,
attributeName="attributeVaue"]>
</namespace,containedElement>]
</namespace,elementname>
其中, namespace是名称空间的唯一名称, elementName是
应用名称空间的 XML文档元素的名称 。 GlobalUniqueURI是
统一资源标识符 （ Uniform Resource Identifier,URI） 。
AttributeName 和 attributeVaue 是和包含元素
containedElement相关联的一个属性的名称和属性值 。
3.3.2 创建 XML文档 ——XML文档的组成（续 7）
⑤ 包含非标准文本
通过预定义 XML实体可以在 XML文档中加入特殊符号, 如果
需要大量的特殊符号, 可以使用 CDATA段 。 CDATA段可以
使用户在一个 XML文档中引用大量的特殊符号文本块, 而不
需要分别以实体的形式来代表每一个特殊字符 。 一般形式为,
<![CDATA[text]]>
text是包含特殊字符的文本串，该文本不被 XML分析器检查。
XML处理器负责分析或者以一种有意义的方式使用该文本块。
3.3.2 创建 XML文档 ——一个简单的 xml文档
[例 3-9] 一个简单的 xml文档 。
<?xml version="1.0" encoding="gb2312"?>
<note>
<to>Brion</to>
<from>Jane</from>
<heading>Remember</heading>
<body>Don't forget me this weekend</body>
</note>
显示结果,
3.3.2 创建 XML文档 —— XML分析器
XML文档需要在 XML分析器中才能运行, XML分析
器有确认型和非确认型两种 。 确认型 XML文档分析
器检查 XML文档的语法, 将 XML文档同文档类型定
义 DTD和架构作比较 。 如果确认规则, XML分析器
还要判断 XML数据是否和预定义的确认规则相符 。
非确认型 XML分析器也进行 XML文档语法的检查,
但不进行 XML文档和 DTD及架构的比较 。
在微软的 Internet Explorer 5.0浏览器中, 内置了
XML确定性分析器, 即,MSXML。
3.3.3 使用文档类型定义 DTD
它没有像 HTML一样拥有一个通用的标记 （ tag） 集合
在 XML中, 标记 （ 在 xml中, 又称元素 ） 是通过文档
类型定义 （ Document Type Difinition,DTD） 来实
现的 。 DTD定义了 XML文档中可以使用的标记符号,
标记的属性, 标记的排列方式 /顺序, 标记能够包含
的内容等 。
在 XML文档中, DTD出现在第一行的文档类型声明
和文档的根之间 。
DTD可以在 XML文件中直接设定, 也可以保存为一
个完全独立的文件 （,dtd） 。
3.3.3 使用文档类型定义 DTD ——声明内部 DTD
和 XML元素
一个内部 DTD声明必须写在 XML声明和 XML根元素
之间, 一般形式为,
<!DOCTYPE rootElement [dtdRules]>
其中, <!DOCTYPE 表示开始设定 DTD。
rootElement指定此 DTD的根元素的名称, 一个 XML
文件只能有一个根元素 。 注意, 如果 XML文件使用
了 DTD,那么文件中的根元素就在这里指定 。
dtdRules是在 rootElement中为一个元素定义 DTD规
则的一条或多条 XML语句, 即定义 XML文件使用的
元素 。
3.3.3 使用文档类型定义 DTD ——声明内部 DTD和
XML元素 （续）
DTD规则的一般格式为,
<!ELEMENT element-name (element-definition) >
其中, <!ELEMENT是 XML的保留字, 表示开始元素
定义 。 element-name是为元素起的名称, element-
definition是对元素的定义, 就是说 <元素 >...</元素 >
之间能够包含什么内容 。 元素的内容可以是一般性
文字, 也可以是其它元素 。
其中元素定义可以是,
EMPTY | ANY | #PCDATA | 元素
3.3.3 使用文档类型定义 DTD ——声明内部 DTD和
XML元素 （续 2）
? EMPTY,没有内容的元素 。 在 XML文件中, 空元
素不需要结束标记, 但必须以 </空元素名 >这样的写
法 。
? ANY,表明为所有可能的元素以及可解析的数据 。
? #PCDATA,只有可解析有字符数据才能作为元素
的内容 。
? 元素, 如果一个元素又包含另外的元素, 那么这个
元素就是容器元素 。
3.3.3 使用文档类型定义 DTD ——举例
例如,
<!ELEMENT 书籍 (名称,作者,价格 )>
表示定义了一个元素 （ 即标记 ）, 书籍,, 并且它
包含三个子元素元素, 名称,,, 作者, 和, 价
格, 。 <!ELEMENT 名称 (#PCDATA)>
则定义了一个元素, 名称,, 它由 #PCDATA关键字
定义, 表明此元素仅仅包含一般文字, 是基本元素 。
3.3.3 使用文档类型定义 DTD ——声明元素属性
在 XML中, 元素属性设置的一般形式是,
<!ATTLIST element-name attribute-name Type
Default-value>
其中, <!ATTLIST表示开始属性的设定； element-
name表示元素名； attribute-name是设定的元素的
属性名称； Type是该属性的属性值的类别,
3.3.3 使用文档类型定义 DTD ——声明元素属性 （续）
3.3.3 使用文档类型定义 DTD ——举例
下面是几个属性设定的例子,
<!ATTLIST 姓名 性别 (男 |女 ) "男 "〉 >
此元素属性设定语句为, 姓名, 这个元素设定一个名为, 性别,
的属性, 此属性的属性值类别是 Enumerated,取值范围为
,男, 或者, 女, 。 如果在 XML文件中没有为此属性赋值, 属
性内定值是一个字符串, 男, 。
<!ATTLIST 姓名 号码 ID #REQUIRED>
该属性设定语句为, 姓名, 元素设定一个名为, 号码, 的属性，
属性值类别是 ID,意味着在 XML文件中为此属性赋值的时候，
值在此 XML文件中是唯一的，否则将出现解析错误。此属性设
定中的属性内定值为 #REQUIRED,表示这个属性在 XML文件
的 <姓名 >标记中必须出现，否则解析会发生错误。
3.3.3 使用文档类型定义 DTD ——定义实体与字符数据段
在 XML的 DTD中，还可以定义实体（ Entity）。 实体（ entity）
实际上起一种类似“宏”的作用，一些常用的或者不便于直接
书写的文字或数据，可以用一个标识定义下来，在数据中可以
直接引用。
?5种预定义的实体
&,&
<, @lt;
>, >
,,"
‘, '）
演示,frontpage2000
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 1)
XML还允许用户自己定义实体, 例如, 如果在 XML文档中需要
频繁使用词组, Good Luck”,可以在 DTD中这样表示：
<!ENTITY gl "Good Luck">。 这样当使用这个词组, Good
Luck”时, 可以敲入 ≷,从而可以避免拼错和重复敲入相同
的信息, 这里, gl就是实体 。
在 XML中, 实体可以分成内部实体, 外部实体和参数实体 。 内
部实体的一般形式为,
<!ENTITY entityName "will be replaced string">
如果被替换的文本很长, 可能要把被替换的信息存储在一个文
件中 。 可以通过外部实体参考来实现, 即在实体名和文件的
URL中使用关键字 SYSTEM,构成外部实体, 一般形式为,
<!ENTITY entityName SYSTEM "URL">
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 2)
在 XML中, 还提供了参数实体, 它在实体定义中通过在实体名
前插入百分号 （ %） 实现, 百分号表示该实体为参数实体 。 一
旦被定义, 参数定义可以通过用百分号和分号包围参数名来实
现 。 例如,<!ENTITY % role"(boss | manager |
employee)">
例如, 有下面的 XML实体定义和属性定义,
<!ENTITY p1 SYSTEM "product.gif">
<!ATTLIST product image ENTITY #IMPLIED>
在相关的 XML 中, 可以包含下列语句,< product
image="p1">
3.3.3 使用文档类型定义 DTD ——定义实体与字符
数据段 (续 3)
字符数据段
通过预定义 XML实体可以在 XML文档中加入特殊符号, 如果需
要大量的特殊符号, 可以使用字符数据段, 称为 CDATA段 。
CDATA段可以使用户在一个 XML文档中引用大量的特殊符号文
本块, 而不需要分别以实体的形式来代表每一个特殊字符 。 一
般形式为,
<![CDATA[text]]>
text是包含特殊字符的文本串, 该文本不被 XML分析器检查 。
XML处理器负责分析或者以一种有意义的方式使用该文本块 。
其中的左右方括号 [ ]不能省略
3.3.3 使用文档类型定义 DTD ——声明并保存外部 DTD文件
如果希望将 DTD声明应用到其它 XML文件中, 应该将 DTD文本
保存为一个独立的,dtd文件, 然后在 XML文档中引用 。 这样一
个 DTD就可以被多个文档调用, 减少资源浪费 。
创建一个外部 DTD文件的语法为,
<!DOCTYPE rootElement SYSTEM "dtdFile ">
其中, rootElement为应用 DTD文件的根 XML元素, dtdFile
为外部 DTD文件名 （,dtd） 。
对于, dtd 文件, 除了没有内部 DTD 中的 <!DOCTYPE
rootElement[.....]〉 语句外, 其它都一样 。 而且有关元素数
目, 排列顺序, 空元素设定, 选择性元素, 属性设定, Entity
声明等都和内部 DTD相同 。
3.3.4 使用架构 Schema
DTD的语法相当复杂, 并且它不符合 XML文件的标准, 自成
一个体系 。
由于 DTD的复杂和自称体系, W3C于 2001年 5月正式发布了
XML Schema的推荐标准, 提出了 XML架构 （ Schema） 的概念 。
Schema相对于 DTD的明显好处是 XML Schema文档本身也是
XML文档, 而不是像 DTD一样使用自成一体的语法 。 这就方
便了用户和开发者, 因为可以使用相同的工具来处理 XML
Schema和其它 XML信息, 而不必专门为 Schema使用特殊工具
3.3.4 使用架构 Schema ——和 DTD的比较
XML Schema本身就是一个 XML文件 。 但不同的是, Schema文
件所描述的是引用它的 XML文件中的元素和属性的具体类型 。
除此以外, Schema比 DTD还有以下优点：第一, XML Schema
利用 Namespace将文档中特殊的结点与 Schema说明相联系, 一
个 XML文件可以有多个对应的 Schema,而一个 XML文件只能
有一个对应的 DTD。 第二, XML Schema内容模型是开放的,
可以随意扩充, 而 DTD无法解析扩充的内容 。 第三, DTD只能
把内容类型定义为一个字符串, 而 XML Schema允许把内容类
型定义为整型, 浮点型, 布尔型或者许多其它的简单数据类型 。
经过数年的大规模讨论和开发如今 XML Schema已经成为全球
公认的 XML环境下首选的数据建模工具 。
3.3.4 使用架构 Schema ——声明元素
在 XML中, 创建架构的语法为,
<Schema name="SchemaName"
xmlns="urn:schema-microsoft-com:xml-data"
xmlns:dt="urn:schema-microsoft-com:datatypes">
其中, name属性给出架构的名称 。 xmlns给出了一个微软的架
构资源作为一个隐式名称空间, 从而可以使用户引用需要创建
架构的特殊元素, 包括 ElementType,Element,AttributeType
和 Attribute等 。 Xmlns:dt属性包括微软的一个数据输入资源,
作为一个显示名称空间, 从而可以引用微软内置的数据类型,
包括 string,integer,boolean等 。
3.3.4 使用架构 Schema ——声明容器元素
在 XML Schema中, 声明容器元素的一般形式为,
<ElementType name="containerElementName"
content="empty | eltOnly | textOnly | mixed"
dt:type="dataType"
model="open | closed"
order="one | seq | many">
<attribute type ="AttributeTypeName 1">
,..,..,.,
<attribute type ="AttributeTypeName m">
<element type=" containedElementName 1">
,..,..,.,
<element type=" containedElementName n">
</ElementType>
3.3.4 使用架构 Schema ——声明容器元素 (续 1)
(1) content,用来描述元素的内容模型 。 取值可以是,
? empty — 元素内容为空；
? textOnly — 元素只包含文本内容；
? eltOnly — 元素只包含子元素内容；
? mixed — 元素既可以包含文本, 也可以包含子元素 。
3.3.4 使用架构 Schema ——声明容器元素（续 2）
(2) dt:type,指定元素文本的数据类型, 常用的几种数据类型
及其含义见表 3-5
3.3.4 使用架构 Schema ——声明容器元素（续 3）
(3) model,元素的内容是否遵守 schema中的定义 。 取值可以是,
? open — 元素内容中可以添加未定义过的元素, 文本等；
? closed —元素内容中内能添加定义过的元素, 文本等 。
(3) order,定义子元素的排列顺序 。 取值可以是,
? one — 规定元素内容按多种方式中的某一种排列；
? seq — 规定元素内容按指定的顺序排序；
? many — 按任意方式排列 。
3.3.4 使用架构 Schema ——声明属性
用户可以用属性来描述 XMLSchema元素, 在声明属性以前,
还需要声明一个属性类型 。 声明属性类型的语法为,
<AttributeType name="idref"
dt:type="primitive-type"
dt:values="enumerated-values"
default="default-value"
required="{yes|no}">
3.3.4 使用架构 Schema ——声明属性 （续）
<Attribute type="idref">
其中, idref为属性名, 用于内部引用 。 primitive-type是指属性
的数据类型, 包括 entity,entities,enumeration（ 枚举类型 ）,
id（ 唯一标识符 ）, idref（ 标识符引用 ）, idrefs（ 标识符引用
集合 ）, nmtoken（ 名称记号 ）, nmtokens（ 名称记号集合 ）,
notation,string（ 字符 ） 等 。 enmuerated-value是指当属性设为
枚举类型时, 代表枚举值 。 default-value是属性的默认值,
Required这个属性标志在运行状态下是否必须存在 。 例如,
<AttributeType name="location" dt:type="string"/>
<ElementType name="communication" content="textOnly"
model="closed">
<attribute type="location"/>
</ElementType>
3.3.4 使用架构 Schema —— 【 例 3-11】
【 例 3-11】 一个 XML Schema文档 （ 文档名为 myfilm.xml） 示
例 。
3.3.4 使用架构 Schema ——将架构添加到 XML文档
用户可以在一个 XML文档的内部应用一个架构, 以便于在运
行状态下, XML验证分析器将架构规则应用于 XML数据并验
证该文档 。 语法为,
<rootelement xmlns="x-schema:URI">
其中, rootelement为用户希望应用架构的 XML文档的根元素 。
前缀 x-schema对于微软的 MSXML处理器是必需的 。 URI为统
一资源标识符, 是要附加的架构的名称 。
默认的 xml名称空间 （ 名域 ） 为 xmlns="x-schema:URI",它告
诉解析器应该根据 URI上的 schema(x-schema)来解析整个文档 。
3.3.5 名称空间 ——为什么？
——为什么要名称空间？
在 XML中, 用户可以自己定义标记和命名元素 。
XML文档中很可能会定义许多名字相同而意义
不同的元素或属性, 尤其在把不同的 XML文档
合而为一时, 更容易产生冲突 。 名称空间
（ Namespaces） 就是为此而设计的 。
3.3.5 名称空间 ——概 念
名称空间 （ Namespaces） 也称为, 名域, 或, 命名
域, 。 它不是 XML1.0标准的一部分, 而是一个被称
为, Name Space in XML”的独立 标准 。 对 XML
Namespaces严格的定义是：, 名称空间是用 URI
（ Uniform Resource Indicator,统一资源指示器 ） 加以
区别的, 在 XML文件的元素和属性中出现的所有名称
的集合, 。 在没有 Namespaces的 XML 1.0文档里, 元
素和属性中出现的名称被称为, 本地名称 （ Local
Names）,。
3.3.5 名称空间 ——一 般形式
一般形式为,
< namespace,elementName xmlns,
namespace="globalUniqueURI">
[<namespace,containedElement [namespace,
attributeName="attributeVaue"]>
</namespace,containedElement>]
</namespace,elementname>
其中, namespace是名称空间的唯一名称, elementName是
应用名称空间的 XML文档元素的名称 。 GlobalUniqueURI是统
一资源标识符 （ Uniform Resource Identifier,URI）
3.3.5 名称空间 —举例
定义名称空间的唯一目的是唯一地标识一个元素或一组元素的
属性 。 例如,
<pr,payment xmlns:pr="http://www,microsoft.com/payroll">
<pr,employee>Lars Peterson</pr:employee>
<pr,description>Reimburse expenses</pr:description>
<pr,total>199.76</pr:total>
</pr:payment>
3.3.6 使用 CSS格式化数据
W3C为了解决 HTML的结构化问题, 和实现 Web中的
总体外观控制, 于 1996年底, 公布了层叠样式表单
CSS（ Cascading Style Sheet,CSS） 规范 。 所谓层
叠 （ Cascading） 是指对于容器元素指定的所有选项,
将被自动的应用到其包含的所有元素中 。
CSS把文档内容和格式化信息分离开来, 单独把格式
化信息存放在 <style>...</style>标记内, 或单独保存
为一个,css文件 。
3.3.6 使用 CSS格式化数据 —— 【 例 3.13】
【 例 3.13】 在 HTML文档中, 通过 <style>..</style>标
记引入 CSS,指定 H1和 H2元素的显示样式 。
3.3.6 使用 CSS格式化数据 —— CSS的结构和使用规则
在 XML文档所对应的 CSS文档中, 定义了文档中所有元素的显
示样式 。 缺少某种元素的样式定义时使用默认值 。 元素样式定
义的语法格式为,
elementName [,elementName,...] [.className][#ID属性名 ] {
property, value
[;property, value....]
}
其中, elementName为 XML元素的名称, proverty为元素的显
示特性 （ 如字体, 颜色等 ）, value为具体的显示特性值,
ClasssName为样式类名 。
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 1）
从上述格式中可以看到, 在 CSS中定义元素的样式, 可以有多
种方式,
（ 1） 同时为一个或多个元素定义样式 。 例如,
name,company,price,unit,detials {
display:block;
font-weight:bold;
font-size:0.8em
}
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 2）
（ 2） 定义一个样式类, 通过对类名的引用, 在不同的元素使
用同一样式, 或者不同位置的同一元素使用不同的样式 。 例如,
样式文件 style01.css内容如下,
student {display:block}
name.c1 {font-size:3em; color:red}
name.c2 {font-size:2em; color:green}
name.c3 {font-size:1em; color:blue}
下面是引用该样式的 xml文档,
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style01.css"?>
3.3.6 使用 CSS格式化数据 —— CSS的形式 (2)（续 ）
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style01.css"?>
<student>
<name class="c1">张三 </name>
<name class="c2">李四 </name>
<name class="c3">王五 </name>
</student>
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 3）
（ 3） 为特定的元素定义样式 。 可以为该元素指定一个 ID属性,
而在 CSS中, 通过, 元素名＃ ID”的方式指定样式 。 例如,
style02.css内容定义如下,
student {display:block}
name {font-size:3em;color:red;
font-weight:bold}
name#a1 {font-size,2em; color:green}
3.3.6 使用 CSS格式化数据 —— CSS的形式（ 3） (续 )
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="style02.css"?>
<student>
<name>张三 </name>
<name ID="a1">李四 </name>
<name>王五 </name>
</student>
3.3.6 使用 CSS格式化数据 ——常用属性 (1)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——常用属性 (2)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——常用属性 (3)
CSS中常用的格式化属性
3.3.6 使用 CSS格式化数据 ——例 3.14
【 例 3.14】 一篇科技文献的 XML文档和相应的 CSS文档
paper.xml
3.3.7 可扩展样式语言 XSL
CSS是通过创建样式表单元素来格式化 XML数据, 并且将其
显示出来 。
可扩展样式语言 （ eXtensible Style Language,XSL）
XSL将文档转换到一个新的文档树中, 该文档树由格式对象
组成, 然后应用程序就可以将文档显示出来 。
XSL由两个关键部分组成,
一个为转换引擎，将原始文档树转换为能够显示的文档树；
另一个为格式化符号集，该符号集可以定义应用在 XML数据
上的复杂的格式化规则。
目前,IE5 仅支持 XSL的部分功能。
3.3.7 可扩展样式语言 XSL ——什么是 XSL
XSL(eXtensible Stylesheet Language,可扩展样式语言 )是为
XML文件定义的一种标识语言, 它将提供远远超过 CSS的强
大功能, 如将元素再排序等 。 实际上简单的 XML已可被 CSS
所解释, 然而复杂的高度结构化的 XML数据或 XML文档则只
能依赖于 XSL极强的格式化的能力而现给用户 。
XSL以包含了一套元素集的 XML语法规范而定义, 该语法规
范将被用来把 XML文件转换成 HTML文件或 XML文档 。 XSL
样式表包含了一系列数据格式规则, 用以描述 XML文档的显
示方式, 并负责将其转换成 html等其它格式 。
3.3.7 可扩展样式语言 XSL —— XSL和 CSS之间的异同
(1) XSL与 CSS在很多功能上是重复的, 但是它比 CSS更强大 。
不过 XSL功能的强大与其复杂性是分不开的 。
(2) CSS只允许格式化元素内容, 不允许改变或安排这些内容 。
但是 XSL没有这些限制, 它可以提取元素, 属性值, 注释文
本等几乎所有的文档内容 。 在 XML领域, XSL来格式化文档
才是未来发展的方向 。
3.3.7 可扩展样式语言 XSL —— XSL样式文档基本结构
(1) 以下面的指令为文档开头 （ 其中还可以包含其他属性 ）,
<?xml version="1.0"?>
(2) 通过, xsl:stylesheet”标记导入 XSL文档的内容 。 类似于
XML的根元素 。 其中的 xmlns:xsl指明了本 XSL所采用的标准 。
(3) 通过模板来描述 XML文档的显示格式 。
(4) 通过 XML数据的引用指明显示的数据 。
(5) 其中包含了大量的 html语句的各种标记 。
(6) 通过 xsl:for-each,xsl:if,xsl:choose等标记进行数据的循环
处理, 条件处理, 选择处理等工作 。
(7) 可以嵌入 JaveScript或 VBScript脚本程序, 或者 JaveScript语
句, 使 XSLl更具有强大的运算功能 。
3.3.7 可扩展样式语言 XSL —— XSL的模板
在 XSL中, 数据的显示格式被设计细化成一个个模板, 最后
再将这些模板组合成一个完整的 XSL。
3.3.7 可扩展样式语言 XSL ——模板的语法结构
模板的语法结构为,
< xsl:template match="node-context" language="language-
name">
</xsl:template>
其中的属性意义如下,
（ 1） match,确定什么样的情况下执行此模板 。 作为一种简
化的说明, 在此处使用标记的名字；其中最上层模板必须将
match设为, /” 。 在一个 XSL文档中根模板是惟一的 。
（ 2） language,确定在此模板中执行什么脚本语言, 其取值
与 html中的 <script>标记的 Language属性的取值相同, 缺省值
是 Jscript
3.3.7 可扩展样式语言 XSL ——模板的调用
调用模板使用 <xsl:apply-templates>标记完成, 其语法格式如
下,
< xsl:apply-templates select="pattern" order-by="sort-
criteria-list">
其中的属性意义如下,
（ 1） select,确定应调用的模板, 即选取用 <xsl:template>标
记建立的模板 。
（ 2） order-by,排序的依据, 当有多个排序依据时以分号 （ ;）
分隔 。
3.3.7 可扩展样式语言 XSL ——选择模式和测试模式
选择模式就是用选择的方式将数据从 XML中提取出来 。 这是
一种在 XSL中应用广泛且操作简单的获得数据的方法 。 测试
模式是先对选择的对象进行测试, 然后对符合条件的记录进
行预定的处理 。 这是在 XSL中经常使用的两种模式 。
3.3.7 可扩展样式语言 XSL ——选择模式
选择模式有三种不同的元素, 各自的语法格式如下,
（ 1） xsl:Value-of
语法,<xsl:value-of select="模式 ">
功能：该元素的作用是从 XML文档中提取指定节点的数据, 并且将数据
结合到样式表中 。 Select属性用来指定提取的对象 。
（ 2） xsl:for-each
语法,<xsl:for-each select="模式 " order-by="排序列表 ">
功能：循环处理指定节点的相同的数据 。
通过 select属性逐个选择 XML中的元素, 按当前样式表的规定逐个处理 。
Order-by属性的作用是确定排序的控制标记, 属性值前加, +” 号按升序
排列, 属性值前加, -” 号按降序排列, 不加符号时默认为升序 。
（ 3） xsl:apply-templates
3.3.7 可扩展样式语言 XSL ——测试模式
测试模式有以下两种元素,
(1) xsl:if
语法,<xsl:if test="测试条件 " script="script式子 " language="script使用的
语言 ">
功能：测试 test属性给定的条件, 当条件的值为 True时执行该元素的内容,
否则不执行该元素的内容 。 如果存在 script属性, 则可以以一句脚本语言
表达式为测试条件 。 默认使用的脚本语言为 JScript。
(2) xsl:choose
语法,<xsl:choose>
<xsl:when expr="脚本语言表达式 " language="脚本语言类型 " test="
模式 ">
<xsl:othrwise>
3.3.7 可扩展样式语言 XSL ——例 3.15
【 例 3.15】 在下面的 XML文档中是成绩单数据, 通过 XSL设
计显示格式, 要求在显示学生成绩时, 希望成绩优秀 （ 大于
或等于 90分 ） 的用粗体显示, 成绩不及格的用斜体显示, 其
他用正常体显示 。
3.3.8 创建数据岛
数据岛是指存在于 html页面中的 XML代码。数据岛允许在
html页面中集成 XML,对 XML 编写脚本，不需要通过脚本
或 <object>标记读取 XML。 几乎所有能够存在于一个结构完
整的 XML文档中的东西都能存在于一个数据岛中。包括处理
指示,DOCTYPE声明和内部子集。
3.3.8 创建数据岛 ——创建数据岛
<html>
<head>
<title>html with xml data island</title>
</head>
<body>
<P>Within this document is an XML data island.</P>
<XML ID="customerXML">
<Customer>
<name>Cheery</name>
<id>20020001</id>
</Customer>
</XML>
</body>
</html>
上述数据岛的 XML是内嵌的。 另
外，数据岛也可以在 XML标签中
通过 src属性来引用，例
如,<XML ID="customerXML
" src="customer.xml"></XM
L>
3.3.8 创建数据岛 ——访问数据岛
用户可以通过 ID属性访问数据岛,, customerXML”称为文档对象的名称 。
可以利用这个对象的方法和属性访问它的根节点和孩子节点 。 在上面的例
子中, 根节点是 <Customer>, 孩子节点是 <name>和 <custID>。 下面列
出了一些属性和方法, 可用来访问 XML文档的节点 。
? XMLDocument,返回对 XML文档对象模式的引用 。
? documentElement,返回 XML文档的根节点 。
? childNodes,返回节点的孩子节点目录 。
? item,通过索引访问目录中的节点 。 索引值从 0开始, item(0)返 回第
一 个节点 。
? text,返回节点的内容 。
下面的代码访问第一个孩子节点 <name>并返回它的内容, Cherry”。
customerXML.XMLDocument.documentElement.childNodes.item(0).text
3.3.9 文档对象模型 DOM
文档对象模型（ Document Object Model,DOM） 是
HTML文档以及 XML文档的应用程序接口。 W3C提供了精确
的、语言无关的 DOM接口规范，可以用任何语言来实现 DOM
接口。作为 W3C的规范,DOM提供了一种可以应用于不同环
境和应用中的标准的程序接口。它定义了文档的逻辑结构，
提供了对文档进行访问和操作的方法。利用 DOM,程序开发
人员可以动态的创建文档，遍历文档结构，添加、修改、删
除文档内容，改变文档的显示方式等等。可以这样说，文档
代表了文档中的数据，而 DOM则代表了如何去管理这些数据。
3.3.9 文档对象模型 DOM —— DOM的基本结构
(1) 文档 （ Document）
对象：这是所有数据,
所有其他组件, 比如注
释和处理指令的节点的
总的容器 。
(2) 节点 （ Node） 对象：
这是文档中的每一个单
独组件 。 节点由起始标
记和结束标记定义 。
XML 中的一个元素在
DOM中为一个节点对象 。
D o c u m e n t
P a rs e E rro r
N o d e
N o d e
N o d e
N o d e
N o d e
N o d e
N o d e L i s t
N o d e L i s t
N a m e d N o d e M a p
3.3.9 文档对象模型 DOM —— DOM的基本结构（续）
(3) 节点列表 （ NodeList） 对象：这是同一级上的所有节点形
成的列表, 它包含了多个节点对象 。 列表中的节点都有与
Sibling相关联的关系 。
(4) 解析错误 （ ParseError） 对象：这是为每一个没有包含内
容的文档创建的对象 。 该对象有几个属性, 用来存储最后的
解析错误的特性 。 从而可以得到错误代码, 出错位置, 出错
原因等信息 。
(5) 名字空间（ NamedNodeMap） 对象。它提供了对文档
中所使用的名字空间的描述。使用它的属性和方法可指定名
字空间的有关属性，完成对名字空间的操作。
3.3.9 文档对象模型 DOM ——创建文档对象和加载 XML
通过 DOM访问 XML数据通常有两种方法：第一, 使用 C,C++
或者 Visual Basic等访问 XML数据, 此时用户必须安装一些特殊
的头文件和库 。 第二, 使用 HTML和脚本语言 Javascript、
VBScript等通过 DOM实现 XML数据的访问 。 这里我们只看后者
的实现方法 。
在 HTML中访问 XML,首先要创建文档对象 。 在 JavaScript中,
可通过以下语句完成,
var Mydocument = new ActiveXObject("Microsoft.XMLDOM")
这时建立起的 Mydocument只是一个空对象, 还没有加载实际的
XML文档 。 可通过 Mydocument的 load方法完成 XML的加载,
Mydocument.async=false
Mydocument.load("XML文档的 URL")
3.3.9 文档对象模型 DOM ——举 例
Books.xml文档内容如下,
<?xml version="1.0" encoding= "gb2312"?>
<books>
<book status="已售完 ">
<author>蓝天 </author>
<title>XML入门 </title >
</book>
<book status="热卖中 ">
<author>白云 </author>
<title>XML提高 </title>
</book>
</books>
3.3.9 文档对象模型 DOM —— DOM对象的属性和方法
DOM模型中的对象都有各自的属性集和方法集。通过对象的
属性和方法我们可以随意地处理和操作 XML数据。下面介绍
Document,Node和 NodeList三种对象和属性和方法。
3.3.9 文档对象模型 DOM —— Document对象的常用属性和方法
Document对象的常用属性有,
? documentElement,Element类型的只读属性 。 返回文档的
根节点对象 。
? async,逻辑类型的属性 。 指定是否允许同步下载文件 。
? parseError,返回解析错误对象 。
Document对象的常用方法有,
? createAttribute(name),创建属性方法 。
? createNode(Type,Name,namespaceURI),创建类型为
Type,名称为 Name,并且使用 namespaceURI作为名称空间
的节点 。
? load(pathname),把文件加载到文档对象 。
? loadMXL(string),加载 XML文档或段。
Document对象的常用属性有,
? documentElement,Element类型的只读属性 。 返回文档的
根节点对象 。
? async,逻辑类型的属性 。 指定是否允许同步下载文件 。
? parseError,返回解析错误对象 。
Document对象的常用方法有,
? createAttribute(name),创建属性方法 。
? createNode(Type,Name,namespaceURI),创建类型为
Type,名称为 Name,并且使用 namespaceURI作为名称空间
的节点 。
? load(pathname),把文件加载到文档对象 。
? loadMXL(string),加载 XML文档或段。
3.3.9 文档对象模型 DOM —— Document对象的常用属性和
方法（续）
3.3.9 文档对象模型 DOM —— Node对象的常用属性
3.3.9 文档对象模型 DOM —— Node对象的常用方法
3.3.9 文档对象模型 DOM ——例 3.16
【 例 3.16】 对 XML文档,book.xml”,在 HTML中通过 DOM
模型将各本书的书名加到一个列表控件中，单击列表控件中
的书名，可以将该书的所有数据显示出来。
book.xml文当内容
book.htm
3.3.10 XLink和 XPointer规范
XLink和 XPointer规范是为创建 XML超级链接而制定的。超链
接是指一个文档到另一个文档的相互关联。无论是 HTML文档
之间，还是 XML文档之间都可以建立相应的超级链接。但是，
当 XML超级链接执行时，要比 HTML超链接复杂得多。 XML
超链接可以允许开发者动态地指定链接位置，该位置既可以
是 XML文档的，也可以是 HTML文档的。另外,XML还允许
建立双向链接。
3.3.10 XLink和 XPointer规范 ——建立 XML超级链接
建立 XML链接的语法为,
< linkname xlink:type="linkType"
xlink:href="documentTolinkTo"> text </linkname>
其中,linkname为链接的名字,linkType取值包括 simple、
extended,locator,arc,resource,title和 none。
DocumentTolinkTo为目标文档的 URI。 text为该链接的显示文
本。
3.3.10 XLink和 XPointer规范 ——使用 XPointer定位
定义 XPointer引用可以创建一个指向目标文档内部的特定元素
的链接 。
XPointer引用的基本语法为,
<linkname xlink:type="linkType"
xlink:href="xmlDdocument#somePointer"> text </linkname>
其中,#somePointer指向被链接的文档中预定义的绝对 XML id。
Xpointer提供了绝对定位, 相对定位, 范围定位, 属性定位和
字符串定位 5种不同的在 XML文件内定位的方法, 可将地址定
位到相应的地方, 功能上比 HTML中的内链接更为强大 。
3.4 XML开发编辑工具
XML文档是一种纯文本文档, 我们可以用, 记事本,,
UltraEdit等文本编辑软件来编辑, 但是非常麻烦 。 有没有一种
可视化的编辑工具呢？ 就像用 Frontpage编辑 HTML文档一样简
单呢？
XMLSpy
XML Editor
FrontPage 2003
3.5 要使用 XML吗?
我们已经习惯了 HTML语言, 它简单而直观, 并且有大量的编
辑工具 。 为什么还要使用 XML呢？ 对于普通的开发人员, 难
道就如本章第 3.3.1小节所说, 因为 HTML存在的一些问题而要
放弃 HTML,全部转到 XML吗？
3.5 要使用 XML吗? ——20个热点问题
（ 1） 什么是 XML?
（ 2） XML何以重要?
（ 3） SGML,HTML和 XML有什么联系？
（ 4） 如何实现 XML?
（ 5） 什么是文件类型定义 (DTD)?
（ 6） 什么是格式完整和有效的文件?
（ 7） 如何在浏览器中阅读 XML?
（ 8） RDF和 XML有何联系?
（ 9） Netscape浏览器中如何实现 XML?
（ 10） Microsoft浏览器中如何实现 XML?
3.5 要使用 XML吗? ——20个热点问题（续）
（ 11） OSD和 CDF与 XML的关系如何?
（ 12） 电子商务 (e-commerce)和 XML?
（ 13） XML中的层叠样式?
（ 14） XML如何改进超链接?
（ 15） 服务器上支持 XML吗?
（ 16） 谁应该学习 XML?
（ 17） 有哪些编写 XML的工具可供我使用?
（ 18） XML的国际化?
（ 19） XML的未来在哪里?
（ 20） 哪里能学到更多的 XML知识?
