第3章 HTML与XML
HTML和XML是进行Web程序设计的两种重要的基础语言，本章将讲述它们的基本语法和应用。
超文本标记语言HTML（Hypertext Markup Language）是在万维网上建立超文本文件的语言，它是万维网的核心计算机语言。创建Web站点时，需使用HTML语言向组成Web站点的各个Web页面放置文本、图形、图像、动画、音频、视频信息等内容，以及按钮和超链接等可以进行交互的内容。
可扩展标记语言XML（eXtensible Markup Language）是万维网联盟（World Wide Web Consortium，W3C）于1998年2月发布的标准。XML目前已成为互联网标准的重要组成部分，其用途主要有两个：一是作为元标记语言，定义各种实例标记语言标准；二是作为标准交换语言，起描述交换数据的作用。
3.1 超文本标记语言HTML
HTML源于“标准通用标记语言”（Standard Generalize Markup Language，SGML）的设计概念。SGML的目的是为了使网络上文档格式统一，易于交流。SGML采用“标记”进行描述。SGML标记，英文称为tag，就是在文档需要的地方，插入特定记号，来控制文档内容的显示，这就是文档格式定义。HTML采用SGML的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件、或在一个文件内部不同部分之间的链接。HTML标记是区分文本各个部分的分界符，用于将HTML文档划分成不同的逻辑部分（如段落、标题等），它描述文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。
HTML是一种文本标记语言，而非编程语言。HTML文件是普通文本文件，与平台无关，可用任何文本编辑器进行编辑，文件扩展名为.htm或.html。
3.1.1 HTML文档结构
1. 一个示例——创建《Web程序设计》课程网站主页面
为使读者对HTML文件有一个整体了解，先看一个HTML文件示例。
【例3-1】“《Web程序设计》课程网站”主页面，如图3-1所示。
图3-1 “《Web程序设计》课程网站”主页面
该网页以表格作为页面的总布局方式，页面设计中使用了常用的HTML标记，包括：表格、表单、文字显示控制、加入图片、超链接、水平线、换行、分段、设置页面背景图片等。我们用记事本打开该页面对应的HTML文档，其内容如下：
从例3-1我们看到，HTML文档是一个文本文件，其中包含HTML标记和属性形式的指令。双击HTML文件名即可在浏览器中显示页面内容。
HTML标记用一对＜＞中间包含若干字符表示，通常成对出现，前一个是起始标签，后一个为结束标签，如＜Html＞…＜/Html＞、＜Head＞…＜/Head＞等。但也有部分标记非成对出现，如例3-1中出现的换行标记＜Br＞。HTML标记是大小写不敏感的。大部分标记都带有一个或多个属性，其中标记名告诉浏览器标记的用途，而属性（如果有的话）则为浏览器提供执行标记命令所需的附加信息。例如：
＜Font size=7 Color=red Face="隶书"＞《Web程序设计》课程网站＜/Font＞
其中，Font是标记名，告诉浏览器设置由＜Font＞及＜/Font＞所界定的文字显示属性，而Color和Face为属性，用于设置文字的颜色和字体。
有些标记（如例3-1中的Body）还包括一些事件，通过设置事件代码，当该事件产生时，事件代码便被执行。事件代码用脚本语言编写，目前常用的脚本语言为JavaScript和VBScript。脚本语言编写的程序用Script标签括起来，Language属性告知浏览器Script标签括起的脚本是用什么脚本语言编写的。用VBScript脚本语言，则Language="VBScript"或Language="VBS"；用JavaScript脚本语言，Language="JavaScript"或Language="JScript"。
2. HTML文档的基本构成
HTML文档的基本结构如下：
HTML页面以＜html＞标记开始，以＜/html＞结束。在它们之间，是头部和体部。头部用＜head＞…＜/head＞标记界定，一般包含网页标题，以及文档属性参数等不在页面上显示的网页元素。体部是网页的主体，内容均会反映在页面上，用＜body＞….＜/body＞标记来界定，页面的内容组织在其中。页面的内容主要包括文字、图像、动画、超链接等。
3.1.2 HTML基本标记
1. 基本HTML标记
HTML标记限定了文档的显示格式，分为头部和体部标记。
1）头部标记
＜head＞，＜/head＞ HTML文件头部起始和结束标记。
＜title＞，＜/title＞ HTML文件的标题，是显示于浏览器标题栏的字符串。
＜style＞，＜/style＞ CSS样式定义，详见5.3节。
＜meta＞ 该标记位于＜head＞与＜title＞标记之间，提供用户不可见的信息。
其中，＜meta＞属性通常用来为搜索引擎定义页面主题以及页面刷新等信息。其属性较为复杂，这里只介绍其三种主要属性：
• name——meta名字，描述网页，与Content配合使用说明网页内容，以便于搜索引擎进行查找和分类。
• http-equiv——说明content属性内容的类别。
• content——定义页面内容，一些特定内容要与http-equiv属性配合使用。
name与content属性配合使用的部分含义如下：
• name="keywords" 则content为搜索引擎提供的关键字列表。
• name="description" 则content与页面内容相关，字数在150个字以内。
• name="author" 则content为作者信息。
• name="copyright" 则content为版权信息。
http-equiv与content属性配合使用的部分含义如下：
• http-equiv="content-Type" 则content中是页面使用的字符集。
• http-equiv="content-language" 则content中是页面语言。
• http-equiv="refresh" 则content中是页面刷新的时间。
• http-equiv="expires" 则content中是页面过期的日期。
例如：
＜meta name="keywords" content="news, flood"＞
//设定关键字为news, flood
＜meta name="description " content="关于洪涝灾害的新闻"＞
//设定网页描述为"关于洪涝灾害的新闻"
＜meta http-equiv="content-Type" content="text/html; Charset=gb2312"＞
//设定网页所使用的字符集为GB2312，即汉字国标码
＜meta http-equiv="content-language" content="zh-CN"＞
//设定网页所使用的语言
＜meta http-equiv="expires" content="Aug,30,2010 00:00:00 GMT"＞
//设定网页过期的日期为2010-8-30
2）体部标记
基本的体部标记包括body、文字显示和段落控制标记、设置图像和超链接、列表和预定义格式标记等。
（1）＜body＞和＜/body＞标记
表明HTML文件体部的开始和结束，body标记属性及含义列于表3-1中。
表3-1 body标记属性表
例如：
＜body topmargin=5 background="images/back057.gif" text="#ff0000" link="yellow" vlink="#00ff00"＞
HTML文件中许多标记都有颜色控制，颜色值在HTML中有两种表示法：
① RGB值表示。用颜色的十六进制RGB值表示，形如"#RRGGBB"。如"#ff0000"，表示红色，"#0000ff"表示蓝色。
② 英文单词表示。如"red"表示红色，"blue"表示蓝色。
（2）文字显示和段落控制标记
文字显示属性主要有字体、字号、颜色，段落控制显示对象的分段。常用的文字显示和段落控制标记列于表3-2中。
表3-2 常用的文字显示和段落控制标记表
【例3-2】一个包含文字显示和段落控制标记的HTML文件示例。
＜html＞
＜head＞＜title＞文字显示和段落控制＜/title＞＜/head＞
＜body background="images/back057.gif" text="#ff2222"＞
＜center＞＜h1＞一级标题＜/h1＞＜/center＞＜hr width=90% color=green＞
＜font face="黑体" size=7 color="0000ff"＞这是黑体，大小为7号字，蓝色＜/font＞＜br＞
＜p＞这是一个段落＜br＞
＜I＞这是斜体＜/I＞＜B＞这是粗体＜/B＞＜U＞这是下划线字体＜/U＞
＜big＞这是大字体＜/big＞＜small＞这是小字体＜/small＞
这是下标字体＜sub＞1＜/sub＞这是上标字体＜sup＞2＜/sup＞＜br＞
＜font face="楷体" size=6 color="cc8888"＞
＜I＞＜B＞＜U＞这些标记还可以混合使用＜/U＞＜/B＞＜/I＞＜/font＞＜/p＞
＜p align=center＞这是另一个段落＜br＞
＜B＞ 以下是转义序列＜/B＞＜br＞
< 小于号；> 大于号；& 与号；"双引号；例如:a>b＜/p＞
＜/body＞＜/html＞
例3-2在浏览器中显示的效果如图3-2所示。
图3-2 文字显示和段落控制
本例有两点需要说明：
① 转义序列。在HTML文件中有些符号有特殊用途，例如“＜”、“＞”等，它们相当于高级语言的关键字，如果在HTML的正文中需显示它们，就必须用转义序列。最常用的转义序列是 ——空格，如果HTML需显示多个空格，必须用该转义序列。其他常用的转义序列还有：<——小于号；>——大于号；&——与号；"——双引号。如要显示x＜y，在HTML文件中需书写为x<y。
② 强制换行标记＜br＞。在HTML中输入的硬回车符并不引起浏览器显示换行，要使浏览器在指定处换行，要用标记＜br＞。＜br＞是非成对标记。
（3）图像标记
目前有以下几种图像格式可以被浏览器解释：GIF格式（.gif文件）、X位图格式（.xbm文件）、JPEG格式（.jpg、.jpeg文件）和PNG格式（Portable Network Graphics）。
在例3-1中我们已经看到，用图像标记＜img＞可以向页面中插入一幅图像。例如：
＜img src="images/a.gif" border=0 width=200 height=100 alt="示例"＞
＜img＞标记的属性包括：
① src——指明图像文件的地址。该属性值必须指明。值可以是一个本地文件名或一个URL形式，如http://member.shangdu.net/images/logo.gif。
② border——指明图像边框的粗细，值为整数。若为0，表示无边框；值越大，边框越粗。
③ width——图像宽度，值为整数，单位为屏幕像素点数。若不指出该属性值，则浏览器默认按图像的实际尺寸显示。
④ height——图像高度，值为整数，单位为屏幕像素点数。若不指出该属性值，则浏览器默认按图像的实际尺寸显示。
⑤ alt——若设置了该属性值，则当鼠标移至该图像区域时，将以一个小标签显示该属性值。
（4）超链接标记
创建超链接（Hyperlink）是HTML语言非常重要的部分。一个超链接唯一地指向另一个Web页，它由两部分组成：一部分是显示在本页面中的可被触发的超链接文本或图像，另一部分是用来描述当超链接被触发后要链接到的URL信息。超链接标记的格式如下：
＜a href="URL信息"＞超链接文本或图像＜/a＞
超链接标记除了有必备的href属性外，还有一个很有用的属性target，它指明目标页面显示的窗口。其含义如下：
• target=_blank目标页面显示于一个新的浏览器窗口。
• target=_top通常在帧中的超链接才设置该值，表示目标页面显示于整个浏览器窗口，而不是显示在帧所在窗口中。
• target=框架名 目标页面显示于指定框架所在的窗口。target的默认值是本页面所在的浏览器窗口。关于框架见3.1.5节。
根据目标页面位置的不同，href属性的URL信息的构成分为如下三种情况：
① 目标页面位于另外的主机或采用非HTTP协议，此时采用绝对URL格式，即协议名://主机名[/目录信息]。例如：
http://www.cernet.edu.cn
http://linux.cgi.com.cn/person/szj98/index.htm
ftp://ftp.njnet.edu.cn
mailto:wang@163.com
② 若目标页面位于本主机，可采用相对URL代替绝对URL。例如，目标页面的HTML文件与本HTML文件位于同一子目录，名为des1.htm，则超链接标记可简化为：
＜a href="des1.htm"＞超链接文本＜/a＞
又如：
＜a href="../des2.htm"＞超链接文本＜/a＞
③ 通常超链接总是指向目标HTML文件的头部，但超链接的目标也可以是某个文件的特定位置（称为“锚点”，anchor）。此时，需用超链接标记的NAME属性来定义超链接的引用名，格式为：
＜a name="锚点名"＞文本或图像等页面元素＜/a＞
注意，这里的文本或图像等页面元素并不被特殊显示，也不会触发超链接的跳转，它仅定义了一个超链接目标的引用名。当需跳转到该目标时，只需将“#锚名”附加到URL之后即可。
【例3-3】三种URL应用示例。
＜html＞
＜head＞＜title＞超链接URL＜/title＞＜/head＞
＜body＞
单击＜a href="xp.htm" target=_blank＞＜b＞这里＜/b＞＜/a＞可以见我的照片＜br＞
单击＜a href="http://www.163.com"＞＜b＞这里＜/b＞＜/a＞可以进入网易＜br＞
单击＜a href="mailto:test@163.com"＞＜b＞这里＜/b＞＜/a＞可以给我发信＜br＞
单击＜a href="example3.htm#aaa"＞＜b＞这里＜/b＞＜/a＞可以转到我的简历＜br＞
＜a name="aaa"＞我的简历：＜/a＞＜/body＞＜/html＞
（5）列表标记和预定格式标记
列表标记也是HTML的一个基本结构。它有三种类型的列表：
① 无序列表（unordered list）： ＜ul＞列表项＜/ul＞
② 有序列表（ordered list）： ＜ol＞列表项＜/ol＞
③ 定义列表（definition list）： ＜dl＞列表项＜/dl＞
预定格式（preformatted）标记可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中，该标记的格式为：
＜pre＞预定格式的信息＜/pre＞
该标记也是很有用的，只要将信息按照所需要的格式编排好，放在＜pre＞、＜/pre＞标记对中，就不必担心信息在浏览器中的显示会出现偏差。
【例3-4】三种列表标记应用示例。
＜html＞＜head＞＜title＞课表＜/title＞＜/head＞
＜body＞＜b＞今天我要上以下的课＜/b＞
＜ul＞＜!--无序列表--＞
＜li＞局域网工程
＜li＞操作系统
＜li＞数据结构
＜/ul＞
＜b＞今天我要上以下的课＜/b＞
＜ol＞＜!--有序列表--＞
＜li＞局域网工程
＜li＞操作系统
＜li＞数据结构
＜/ol＞
＜dl＞＜!--定义列表--＞
＜dt＞＜b＞局域网＜/b＞＜!--定义标题--＞
＜dd＞局域网是指将小范围内的数据设备经过通信系统连接起来的计算机网络
＜/dl＞
＜/body＞＜/html＞
该HTML文件在浏览器中的显示效果如图3-3所示。
图3-3 三种列表标记应用示例
3.1.3 表格（Table）
表格是最常用的页面元素，在页面中用表格来表示数据直观又清晰，而且HTML表格的使用非常灵活，许多较复杂的页面布局也可利用表格来完成。在Internet上浏览的许多页面都大量使用了表格。在HTML中，表格是由一个表格名称（标题）再加上一行或多行表格内容所构成的块状结构。
1. 表格定义
表格定义的语法结构为：
＜table＞
[＜caption＞标题内容＜/caption＞]
＜tr＞
＜td＞表格内容＜/td＞
{＜td＞表格内容＜/td＞}
＜/tr＞
……
＜/table＞
＜table＞和＜/table＞标记对界定表格结构的起始和结束；＜caption＞、＜/caption＞标志是可选项，该标记中的内容是表格的标题；＜tr＞、＜/tr＞界定一个表格行的开始和结束；一个表格行可以包含多个表格项，每个表格项的内容和显示特性由标记对＜td＞、＜/td＞来定义。
2. 表格属性
标记＜table＞、＜tr＞和＜td＞的属性用来定义表格的显示特性，其中＜table＞的属性描述整个表格的显示特性，行控制标记＜tr＞的属性定义该行的显示特性，表格项控制标记＜td＞的属性定义该项的显示特性。利用它们丰富的属性可以设计出各种复杂的表格。这些属性分别列于表3-3、表3-4和表3-5中。
表3-3 table标记属性表
表3-4 ＜tr＞标记属性表
表3-5 ＜td＞标记属性表
【例3-5】一个简单表格示例。本例只给出主要表格的部分文本，其余部分读者可以很容易补全。
＜table border=1 cellspacing=2 cellpadding=4＞
＜caption＞物资列表＜/caption＞
＜tr＞＜td＞商品类别＜/td＞＜td＞数量＜/td＞＜/tr＞
＜tr＞＜td＞日用百货＜/td＞＜td＞10＜/td＞＜/tr＞
＜tr＞＜td＞电器＜/td＞＜td＞20＜/td＞＜/tr＞
＜tr＞＜td＞轿车＜/td＞＜td＞5＜/td＞＜/tr＞
＜/table＞
该文件在浏览器中显示的结果如图3-4所示。
图3-4 一个简单表格示例
【例3-6】一个较复杂的表格示例。其中每行列数及每列行数都不同，利用td标记的colspan和rowspan属性可以对表格的单元格进行灵活的控制。
＜html＞＜head＞＜title＞复杂表格＜/title＞＜/head＞
＜body topmargin=4＞
＜table border=3 bordercolor=blue background="images/bock057.gif" align=center
cellspacing=3 cellpadding=6＞
＜caption＞专业设置及在校生人数表＜/caption＞
＜tr align=center bgcolor=mediumturquoise＞
＜td＞＜strong＞学院名＜/strong＞＜/td＞
＜td colspan=4＞＜strong＞专业及人数＜/strong＞＜/td＞＜/tr＞
＜tr align=center＞＜td rowspan=6＞计算机学院＜/td＞
＜td colspan=4 bgcolor=ddeeff＞计算机科学与技术专业＜/td＞＜/tr＞
＜tr align=center＞＜td＞2006级＜/td＞＜td＞2007级＜/td＞＜td＞2008级＜/td＞＜td＞2009级＜/td＞＜/tr＞
＜tr align=center ＞＜td＞300人＜/td＞＜td＞200人＜/td＞
＜td＞150人＜/td＞＜td＞120人＜/td＞＜/tr＞
＜tr align=center ＞＜td colspan=4 bgcolor=ddeeff ＞软件工程专业＜/td＞＜/tr＞
＜tr align=center＞＜td＞2006级＜/td＞＜td＞2007级＜/td＞＜td＞2008级＜/td＞＜td＞2009级＜/td＞＜/tr＞
＜tr align=center＞＜td ＞100人＜/td＞＜td＞80人＜/td＞＜td＞50人＜/td＞＜td＞40人＜/td＞＜/tr＞
＜tr align=center＞＜td rowspan=3＞外语学院＜/td＞
＜td colspan=4 bgcolor=ddeeff ＞英语专业＜/td＞＜/tr＞
＜tr align=center＞＜td＞2006级＜/td＞＜td＞2007级＜/td＞＜td＞2008级＜/td＞＜td＞2009级＜/td＞＜/tr＞
＜tr align=center ＞＜td ＞100人＜/td＞＜td＞80人＜/td＞＜td＞50人＜/td＞＜td＞40人＜/td＞＜/tr＞
＜/table＞＜/body＞＜html＞
该HTML文件在浏览器中显示的结果如图3-5所示。
图3-5 一个复杂表格示例
3.1.4 表单（Form）
表单提供图形用户界面的基本元素，包括按钮、文本框、单选钮、复选框等，是HTML实现交互功能的主要接口，用户通过表单向服务器提交数据。表单的使用包括两部分：一部分是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序，在浏览器中执行；也可以是服务器处理程序，处理用户提交的数据，返回结果。本节仅介绍前一部分，即如何利用HTML提供的表单及相关标记生成用户界面，后一部分涉及JavaScript、VBScript、ASP、ASP.NET程序设计，将在后续章节介绍。
1. 表单定义
表单定义的语法如下：
＜form method="get|post" action="处理程序名"＞
[＜input type=输入域种类name=输入域名＞]
[teaxtarea定义]
[select定义]
＜/form＞
form标记的属性含义如下：
• method——取值为post或get。二者的区别是：get方法将在浏览器的URL栏中显示所传递变量的值，而post方法则不显示；在服务器端的数据提取方式也不同。
• action——指出用户所提交的数据将由哪个服务器的哪个程序处理。可处理用户提交的数据的服务器程序种类较多，如ASP脚本程序、ASPX程序、PHP程序等。
form的输入域有三类定义方式：input、textarea和select，定义方法和含义见下面的说明。
2. 表单的输入域
不同类型的输入域为用户提供灵活多样的输入数据的方式，表单的输入域有如下三类：
• 以标记＜input＞定义的多种输入域，包括text、radio、checkbox、password、hidden、button、submit、reset和file等。
• 以标记＜textarea＞定义的文本域。
• 以标记＜select＞和＜option＞定义的下拉列表框。
【例3-7】表单输入域的定义方法及使用示例。该HTML文件在浏览器中显示的效果如图3-6所示。
图3-6 表单的输入域示例
＜html＞＜head＞＜title＞表单使用＜/title＞＜/head＞
＜body＞＜b＞请选择您学习的方式＜/b＞＜br＞
＜form method=get action="http://test.com/cgi-bin/run1"＞
＜input type=radio checked＞全日制在读
＜input type=radio＞走读
＜input type=radio＞函授＜br＞＜br＞
＜b＞请选择您所要学习的课程＜/b＞＜br＞
＜input type=checkbox value="yes" name="局域网工程" checked＞局域网工程＜br＞
＜input type=checkbox value="yes" name="操作系统"＞操作系统＜br＞
＜input type=checkbox value="yes" name="数据结构"＞数据结构＜br＞＜br＞
＜b＞请输入您的要求＜/b＞＜br＞
＜textarea name="comment" rows=4 cols=50＞＜/textarea＞＜br＞
＜input type=submit name="ok" value="提交"＞
＜input type=reset name="re-input" value="重选"＞＜/form＞＜/body＞＜/html＞
不同的输入域适用于接收用户不同的输入，常用的表单输入域列于表3-6中。
表3-6 常用的表单输入域
当提供给用户的选择项目较多时，为节省显示空间，可使用表单的下拉列表输入域。定义下拉列表框使用＜select＞和＜option＞两个标记，其语法如下：
＜select name=下拉列表框名multiple＞
＜option value=设定值＞表项内容＜/option＞
……
＜/select＞
属性multiple是可选项，若定义该属性，则下拉列表中的多项都可被选中。
例如，下面的代码定义一个含有三个选项的下拉列表：
＜form method=post action="http://test.com/cgi-bin/choice"＞
＜select name="水果"＞
＜option value="苹果"＞苹果＜/option＞
＜option value="梨子" selected＞梨子＜/option＞
＜option value="香蕉"＞香蕉＜/option＞
＜/select＞
＜/form＞
当用户需要上传文件时，可使用file输入域。文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。创建文件域方法如下：
＜input type="file" 属性="值"…＞
属性主要包括name、size等，name指出文件域名称，size指出文件名输入框的宽度。
【例3-8】创建一个如图3-7所示的表单，其中包含文件域、“提交”按钮和“重置”按钮。
图3-7 含有文件域的表单
＜html＞＜head＞＜title＞文件域示例＜/title＞＜/head＞
＜body＞＜form＞
＜table align=center bgcolor=#d6d3ce width=368＞
＜tr＞＜th colspan=2 bgcolor=#0034FF＞＜font color=#FFFFFF＞文件域＜/font＞＜/th＞＜/tr＞
＜tr＞＜td height=52 align=right＞请选择文件：＜/td＞
＜td height=52＞＜input type="file" name="F1" size=20＞＜/td＞＜/tr＞
＜tr align=center＞
＜td height=52 align=right＞＜input type=submit value="提交" name="btnsubmit"＞＜/td＞
＜td height=52＞＜input type=reset value="重置" name="btnreset"＞＜/td＞＜/tr＞
＜/table＞＜/form＞＜/body＞＜/html＞
3.1.5 框架（Frame）
框架又常称为帧，它也是HTML常用的页面元素。利用框架可以将浏览器显示窗口分割成多个相互独立的区域，每个区域可以显示独立的HTML页面。
1. 一个简例
【例3-9】一个应用框架的示例。其中包含三个HTML文件：main.htm称为主文件，是包含＜frame＞标记的文件，它定义浏览器窗口被分割的方式，本例将窗口分为左、右两个子窗口，分别占窗口宽度的15%和85%；文件frame1.htm、frame2.htm分别是浏览器被分割的两个区域显示的页面文件。该HTML文件在浏览器中的显示效果如图3-8所示。
图3-8 一个应用框架的示例
文件main.htm的内容：
＜html＞
＜head＞＜title＞框架简例＜/title＞＜/head＞
＜frameset cols="15%,85%"＞
＜frame src="frame1.htm"＞
＜frame src="frame2.htm" scolling=no＞
＜/frameset＞
＜noframes＞
Please use a Web browser such as IE3.0 or Netscape Navigator
to view this page in frames!
＜/noframes＞
＜/html＞
文件frame1.htm的内容：
＜html＞
＜head＞＜title＞The document for the left frame＜/title＞＜/head＞
＜body bgcolor="aqua" text="#ff0000"＞左边子窗口的内容！＜/body＞
＜/html＞
文件frame2.htm的内容：
＜html＞
＜head＞
＜title＞The document for the right frame＜/title＞
＜/head＞
＜body＞
右边子窗口的内容！
＜/body＞
＜/html＞
2. 框架定义
框架的定义较为特殊，首先需确定如何分割窗口，然后建立描述窗口分割的主文件，再为每个框架建立相应的HTML文件。
主文件的定义方法是：
＜html＞
＜head＞[头部标记]＜/head＞
＜frameset＞{＜frameset＞...＜/frameset＞}
＜frame＞
＜frame＞
...
＜/frameset＞
[＜noframes＞字符串＜/noframes＞]
＜/html＞
其中，标记＜frameset＞定义窗口分割的方式（横向或纵向）和大小，＜frameset＞可以嵌套，内层的＜frameset＞表示对已分割的窗口再进行分割的方式和大小。＜frame＞标记指明框架所对应的HTML文件。＜frame＞标记的个数应与其所属的＜frameset＞标记分割的框架数目相同，与窗口的对应关系是按排列顺序逐个对应。＜noframes＞标记定义了若浏览器不支持框架时所显示的内容。IE3.0及以上、Netscape 2.0及以上版本的浏览器都支持框架。
＜framset＞和＜frame＞标记有一些有用的属性，描述分割窗口的特性以及框架中页面显示的特性，分别列于表3-7和表3-8中。
表3-7 ＜framset＞标记的属性
表3-8 ＜frame＞标记属性表
【例3-10】利用框架将窗口分成三个子窗口，分别命名为win001、win002和win003，子窗口win001对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win002中显示。
主文件：
＜html＞＜head＞＜title＞较复杂的框架例子＜/title＞＜/head＞
＜frameset rows="360,*" bordercolor="green"＞
＜frameset cols="30%,*"＞
＜frame src="frame1.htm" scrolling="no" name="win001"＞
＜frame src="frame2.htm" name="win002"＞
＜/frameset＞
＜frame src="frame3.htm" noresize marginwidth=5 name="win003"＞
＜/frameset＞
＜noframes＞
Please use a Web browser such as IE3.0 or Netscape Navigator
to view this page in frames!
＜/noframes＞
＜/html＞
文件frame1.htm：
＜html＞＜head＞＜title＞左边框架＜/title＞＜/head＞
＜body＞＜a href="frame2.htm" target="win002"＞第一章＜/a＞＜br＞＜br＞
＜a href="第二章.htm" target="win002"＞第二章＜/a＞＜/body＞＜/html＞
文件frame2.htm：
＜html＞＜head＞＜title＞第一章＜/title＞＜/head＞
＜body＞＜h1＞第一章 绪论＜/h1＞＜br＞本章简述课程的要点...＜br＞＜br＞
＜a href="frame2.htm"＞返回＜/a＞＜/body＞＜/html＞
文件frame3.htm:：
＜html＞＜head＞＜title＞第三个框架＜/title＞＜/head＞
＜body＞＜h2＞联系人地址：test@gu.com＜/h2＞＜/body＞＜/html＞
例3-10在浏览器中显示的效果如图3-9所示。
图3-9 将超链接的目标显示于另一框架中
例3-10在上左子窗口对应的文件frame1.htm中设置了两个超链接，它们被触发后，相应的目标页面将显示于上右子窗口（名为“win002”）中，这是通过在文件frame1.htm的标记＜a＞中设置target属性来指定的。这种方法在页面设计中被广泛使用，它可以保持超链接不被目标文件覆盖。