3.1 课前指导
3.2 课堂教学
3.3 上机练习
3.4 课后作业第 3课 HTML语言介绍（二）
3.1 课前指导列表 （ LIST） 通常用于列举相关的信息条目,提供一种有组织的易于浏览的阅览格式,以及用于描述一个分布的过程 。
表格 （ TABLE） 将文本和图片按行,列排列,它和列表一样,有利于表达信息 。 值得注意的是,表格往往在主页中用来建立主页的框架,使整个页面更规则地放置图片和空白,并使条目清晰 。
框架 （ FRAMES） 是在同一浏览器窗口中显示多个相互隔离的 HTML页的结构,每个区域显示一个 HTML文件 。 利用框架结构可以在页面中同时浏览多个页面 。
3.2 课堂教学
3.2.1 列表标记
3.2.2 表格
3.2.3 框架
3.2.4 自动刷新页面
3.2.1 列表标记
1,无序列表标记
2,菜单列表标记
3,有序列表标记
4,定义列表标记
5,列表的嵌套
1,无序列表标记无序列表中每一个表项的前面是项目符号 （ 如 ●,
■ 等 ） 。 建立无序列表使用 <UL>标记和 <LI>表项标记 。
格式为：
<UL type=符号类型 >
<LI type=符号类型 1> 第一个列表项
<LI type=符号类型 2> 第二个列表项
</UL>
说明：
① type属性指定每个表项左端的符号类型,取值有,disc（ 实心圆点 ● ）,circle（ 空心圆点 ○ ）,
square（ 方块 ■ ）
② 在 <UL>后指定符号的样式,可设定直到 </UL>；
在 <LI>后指定符号的样式,可以设置从该 <LI>起直到
</UL>。
③ <LI>标记是单标记 。 即一个表项的开始,就是前一个表项的结束 。
从浏览器上看,无序列表的特点是,列表项目作为一个整体,与上下段文本间各有一行空白；表项向右缩进并左对齐,每行前面有项目符号 。
【 例 3-1】 无序列表应用示例 。
<HTML>
<HEAD><TITLE>无序列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B>
</FONT></P>
<UL>中国古典文学
<LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
</UL>
<UL type=circle>中国近现代文学
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=square>编辑部的故事
</UL>
</BODY>
</HTML> 在浏览器中的 显示效果 。
2,菜单列表标记菜单列表比无序列表更紧凑,它往往用于列出几个相关网页的索引,以便通过超链接来很快选取感兴趣的内容 。 它用 <MENU>标记替代 <UL>,并引入 <LH>来定义菜单列表的标题 。 格式为：
<MENU>
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
</MENU>
在浏览器中显示时,除 <LH>定义的标题前没有项目符号外,其他与 <LI>定义的列表项相同 。
【 例 3-2】 在例 3-1中使用菜单列表 。
<HTML>
<HEAD><TITLE>菜单列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B></FONT></P>
<MENU>
<LH><FONT color=purple>中国古典文学 </FONT><LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
<BR>
<LH><FONT color=purple>中国近现代文学 </FONT>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=square>编辑部的故事
</BODY>
</HTML> 在浏览器中的 显示效果 。
3,有序列表标记通过带序号的列表可以更清楚地表达信息的顺序 。
使用 <OL>标记可以建立有序列表,表项的标记仍为
<LI>。 格式为：
<OL type=符号类型 >
<LI type=符号类型 1> 表项 1
<LI type=符号类型 2> 表项 2
</OL>
说明：
① 属性 type指定符号的类型见表 3-1。
表 3-1 属性 type指定符号的类型取值 符号说明 示例
1 数字（缺省） 1,2,3
A 大写英文字母 A,B,C
a 小写英文字母 a,b,c
I 大写罗马字母 Ⅰ,Ⅱ,Ⅲ
i 小写罗马字母 ⅰ,ⅱ,ⅲ
② 在 <OL>后指定符号的样式,可设定到 </OL>表项指定新的符号 。
③ 在浏览器中显示时,有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号 。
【 例 3-3】 有序列表应用示例 。
<HTML>
<HEAD><TITLE>有序列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B></FONT></P>
<OL>
<FONT color=purple>中国古典文学 </FONT>
<LI>红楼梦
<LI>三国演义
<LI>水浒传
<LI>西游记
<BR>
</OL>
<OL type=I>
<FONT color=purple>
中国近现代文学
</FONT>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=a>编辑部的故事
</OL>
</BODY>
</HTML>
在浏览器中的 显示效果 。
4,定义列表标记用定义列表表示单词或语句,使之具有交互凹进的特点 。 定义列表使用标记 <DL>,<DT>和 <DD>。 <DT>
往往用于定义单词,<DD>用于定义语句 。 由 <DT>定义的项目会自动换行左对齐,但项目之间没有空行 。 格式为：
<DL>
<DT> 定义单词 1
<DD> 单词 1的说明
<DT> 定义单词 2
<DD> 单词 2的说明
</DL>
与 <LI>标记一样,<DT>,<DD>也为单标记 。
5,列表的嵌套列表嵌套把主页分为多个层次,例如书的目录,
给人以很强的层次感 。 有序列表和无序列表不仅可以自身嵌套,而且彼此可互相嵌套 。
【 例 3-4】 无序列表中套无序列表 。
<HTML>
<HEAD><TITLE>无序列表中套无序列表 </TITLE></HEAD>
<BODY>
<FONT color=blue size=3>,无序列表中套无序列表,示例 </FONT>
<UL>
<LI>中国古典文学
<UL>
<LI>红楼梦
<LI>三国演义
<LI>水浒传
<LI>西游记
</UL>
<LI>中国近现代文学
<OL type=a>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI>编辑部的故事
</OL>
</UL>
</BODY>
</HTML>
在浏览器中的 显示效果 。
【 例 3-5】 有序列表与无序列表的嵌套 。
<HTML>
<HEAD><TITLE>有序列表与无序列表的嵌套 </TITLE></HEAD>
<BODY>
<FONT color=blue size=3>有序列表与无序列表的嵌套示例 </FONT>
<UL>
<LI>中国古典文学
<UL>
<LI>红楼梦 <LI>三国演义
<LI>水浒传 <LI>西游记
</UL>
<LI>中国近现代文学
<OL type=a>
<LI>阿 Q正传 <LI>围城
<LI>四世同堂 <LI>家,春,秋
<LI>编辑部的故事
</OL>
</UL>
</BODY>
</HTML> 在浏览器中的 显示效果 。
3.2.2 表格
1,表格标记
2,给表格加上标题
3,跨多行、多列的表项
4,表格的分组显示
5,对齐表项
1,表格标记表格的标记为 <TABLE>,行的标记为 <TR>,表项的标记为 <TD>。 其中,<TR>是单标记,一行的结束是新一行的开始 。 表项内容写在 <TD>后或与 </TD>之间 。
<TABLE>则必须成对使用 。 格式为：
<TABLE align=left|center|right
border=n width=x|x% height=y|y%>
<TR> <TH>表头 1<TH>表头 2? <TH>表头 n
<TR> <TD>表项 1<TD>表项 2? <TD>表项 n
<TR> <TD>表项 1<TD>表项 2? <TD>表项 n
</TABLE>
说明：
① 在浏览器中显示时,<TH>标记的文字按粗体显示,属于,表头,,<TD>标记的文字按正常字体显示,
属于表项 。
② 表格的整体外观由 <TABLE>标记的属性决定,
见表 3-2。
表 3-2 <TABLE>标记的属性属性名 说明
Align 定义表格在网页中的位置。
Border 定义表格边框的粗细,n取整数，单位是像素。如果省略，则不带边框。
Width 定义表格的宽度,x为像素数或占窗口的百分比。
Height 定义表格的高度,y为像素数或占窗口的百分比。
③ 也可以将表头标记加在第一列 。
④ 对于表格的宽度,如果为像素数,则为绝对宽度 。 如果为百分数 %,则为相对于浏览器窗口宽度的比例,也就是 100%时表格宽等于窗口的宽度 。 不管是绝对宽度还是相对宽度,数值太小不足以显示表格中的内容时,会自动以最小的宽度显示 。
【 例 3-6】 建立有框线和无框线简单表格 。
<HTML>
<HEAD><TITLE>学生成绩统计表 </TITLE></HEAD>
<BODY>
<TABLE align=center border=3 width=480 height=140>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
<TR><TD>0002<TD>常小雨 <TD>88<TD>82<TD>85
<TR><TD>0006<TD>李 刚 <TD>68.5<TD>90<TD>79.3
</TABLE> <BR>
<TABLE align=left>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
<TR><TD>0002<TD>常小雨 <TD>88<TD>82<TD>85
<TR><TD>0006<TD>李 刚 <TD>68.5<TD>90<TD>79.3
</TABLE>
</BODY>
</HTML> 在浏览器中的 显示效果 。
2,给表格加上标题用 <CAPTION>标记给表格加标题,其格式为：
<CAPTION align=left|right|top|bottom
valign=top|bottom>标题 </CAPTION>
说明,<CAPTION> 标 记 应 包 含 在
<TABLE>? </TABLE>标记之间,其属性说明见表 3-3。
属性名 说明
align 设置表格标题在 center（缺省），左边 left，还是右边 right
valign 设置表格标题放在表的上部 top（缺省），还是下部 bottom
表 3-3 <CAPTION>标记的属性
【 例 3-7】 给表格加上标题 。
<HTML>
<HEAD><TITLE>学生成绩统计表 </TITLE></HEAD>
<BODY>
<TABLE align=center border>
<CAPTION>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
<TABLE align=center border>
<CAPTION align=right>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
<TABLE align=center border>
<CAPTION align=left valign=bottom>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
</BODY>
</HTML> 在浏览器中的 显示效果 。
3,跨多行,多列的表项使用 <TR>,<TD>,<TH>标记的 colspan和 rowspan
属性,可以分别制作跨多列 （ 合并列 ） 和跨多行 （ 合并行 ） 的表格 。
(1) 跨多列表项跨多列表项的格式为：
<TD colspan=x>表项 </TD> |
<TR colspan=x>表项 </TR> |
<TH colspan=x>表项 </TH>
其中,x表示合并的列数 。
(2) 跨多行表项跨多行表项的格式为：
<TD rowspan=y>表项 </TD> |
<TR rowspan=y>表项 </TR> |
<TH rowspan=y>表项 </TH>
其中,y表示合并的行数 。
(3) 同时跨多列多行表项在 <TH>中同时使用 colspan和 rowspan属性可制作多重表头 。 格式为：
<TH rowspan=x colspan=y>
其中,rowspan设置表头跨过 x行,colspan设置表头跨过 y列 。
【 例 3-8】 分别建立跨多列表项和跨多行表项的表格 。
<HTML>
<BODY>
<TABLE align=center border>
<TR><TH colspan=3>计算机系
<TR><TH>姓 名 <TH>性别 <TH>年龄
<TR><TD>张大强 <TD>男 <TD>18
<TR><TD>王永芳 <TD>女 <TD>17
</TABLE><BR>
<TABLE border>
<TR><TH rowspan=3>计算机系 <TH>姓 名 <TD>性别 <TD>年龄
<TR> <TH>张大强 <TD>男 <TD>18
<TR> <TH>王永芳 <TD>女 <TD>17
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
【 例 3-9】 建立多重表头的表格 。
<HTML>
<HEAD><TITLE>成绩 </TITLE></HEAD>
<BODY>
<TABLE align=center border=5>
<CAPTION><FONT size=5><B>学生成绩表 </B></FONT></CAPTION>
<TR><TH rowspan=2>学号 <TH rowspan=2>姓名 <TH colspan=3>成绩
<TR> <TH>英语 <TH>高等数学 <TH>总分数
<TR><TD>0001<TD>黄德荣 <TD>80<TD>93<TD>173
<TR><TD>0002<TD>王丽蓉 <TD>90<TD>100<TD>190
<TR><TD>0003<TD>赵晓丽 <TD>72<TD>86<TD>158
<TR><TD>0004<TD>白淑霞 <TD>86<TD>92<TD>178
<TR><TD>0005<TD>李萍萍 <TD>92<TD>69<TD>161
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
4,表格的分组显示复杂表格是对表格的行,列,表项的对齐方式进行设置 。
(1) 按行分组表格的行从上到下可以分为表头,表体和表尾 。
分别使用标记 <THEAD>,<TBODY>,<TFOOT>来定义 。 这种定义方法不但可以实现设置表头,而且可以将表格的行分组 。
格式为：
<TABLE>
<THEAD> 题头 </THEAD>
<TFOOT> 表尾 </TFOOT>
<TBODY> 表体 1 </TBODY>
<TBODY> 表体 n </TBODY>
</TABLE>
可以定义多个表体 <TBODY>部分,每个 <TBODY>部分定义多行信息,每行的格式与一般表格中的一样,
在同一个 <TBODY>中,所有各行的列数必须相同 。
<THEAD>,<TBODY>,<TFOOT>标记可以是单标记 。
在浏览器中显示时,表头,表尾以及各个表体之间都用边框来分隔 。
【 例 3-10】 按行分组制作表格 。
<HTML>
<BODY>
<TABLE border align=center>
<THEAD>
<TR bgcolor=pink><TH>学 号 <TH>姓 名 <TH>性 别 <TH>年 龄
</THEAD>
<TBODY>
<TR align=center><TD bgcolor=orange>0001
<TD bgcolor=greenyellow>王霞 <TD>女 <TD>17
<TR align=right><TD bgcolor=orange>0002
<TD bgcolor=greenyellow>张丽 <TD>女 <TD align=center>16
</TBODY>
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
(2) 按列分组用列组 <COLGROUP>标记和列 <COL>标记,可以改变列的一些性质,如列的宽度等 。 其格式为：
<COLGROUP | COL span=x width=y>
说明：
① 使用 <COLGROUP>标记可设定列组中的列数以及各列的属性,<COL>标记可以设定一列的属性,它可以放在 <COLGROUP>中使用,也可单独用于定义列组以外列的属性,但它不能构造列组 。
② span的值 x大于 0,表示从左数起,指定列组
（ 或所含列 ） 的列数,缺省为 1列 。 width的值 y表示该列组各列的宽度,可以为像素数,%数 （ 占整个表格的百分比 ） 或 n*（ 自动分配,为当前列的 1/n） 。
【 例 3-11】 按列分组制作表格,设置列宽 。
<HTML>
<HEAD><TITLE>学生 </TITLE></HEAD>
<BODY>
<TABLE border width=250 align=center>
<CAPTION>学生名单 </CAPTION>
<COLGROUP span=2 width=90>
<THEAD><TR><TH>姓名 <TH>性别 <TH>年龄 </THEAD>
<TBODY>
<TR><TD>王慧 <TD>女 <TD>20
<TR><TD>李洪 <TD>男 <TD>21
</TBODY>
</TABLE>
<TABLE border=3 align=center><COL width=50%>
<COLGROUP span=2 width=100>
<CAPTION align=left>学生名单 </CAPTION>
<TR><TH>学号 <TH>姓名 <TH>性别 <TH>年龄
<TR><TD>0001<TD>李萍 <TD>女 <TD>17
<TR><TD>0002<TD>张勇 <TD>男 <TD>18
</TABLE>
</BODY>
</HTML> 在浏览器中的 显示效果 。
5,对齐表项在缺省下,表项居于单元格的左端 。 可用列,行的属性设置表项数据在单元格中的位置 。
(1) 水平对齐的方式是用标记 <COL>,<COLGROUP>、
<TH>,<TD>和 <TR>的 align属性 。 align的属性值分别为,center（ 居中 ）,left（ 左对齐 ）,right（ 右对齐 ） 和 justify（ 左右调整 ） 。
(2) 垂直对齐的方式则是使用 valign属性,
valign的属性值分别为,top（ 靠单元格顶 ）,bottom
（ 靠单元格底 ）,middle（ 靠单元格中 ） 和 baseline
（ 同行单元数据项位置一致 ） 。
【 例 3-12】 调整表格中数据的位置 。
<HTML>
<HEAD><TITLE>学生名单 </TITLE></HEAD>
<BODY>
<TABLE border=3 align=center width=60% height=200>
<COL width=100 align=center valign=bottom>
<COL width=100 align=left valign=top>
<COL span=2 width=100 align=right valign=middle>
<COL width=200 align=justify valign=top>
<CAPTION>学生名单表 </CAPTION>
<TR><TH>学号 <TH>姓名 <TH>性别 <TH>年龄
<TR><TD>0001<TD>李 萍 <TD>女 <TD>17
<TR><TD>0002<TD>张 勇 <TD>男 <TD>18
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
3.2.3 框架
1,框架标记
2,框架属性
3,框架间的链接
1,框架标记框架标记有两个：框架组标记
<FRAMESET>? </FRAMESET> 和框架标记 <FRAME> 。
<FRAMESET>用以划分框架,而每一框架由一个 <FRAME>
标记所标示,<FRAME>标记用来声明其中框架页面的内容,并且必须在 <FRAMESET>范围中使用 。
所有框架标记需要放在一个起始的 HTML文件中,
这个文件只是用来声明框架的定义,记录了框架如何划分,以及框架的各种属性,不会显示任何资料 。
框架的定义的基本语法为：
<FRAMESET>
<FRAME src="URL">
<FRAME src="URL">
</FRAMESET>
(1) 框架组标记
<FRAMESET>标记用来定义一个框架组,其语法格式为：
<FRAMESET rows=x1 cols=x2 border=n
bordercolor=mycolor frameborder=yes|no
framespacing=m>
</FRAMESET>
说明：框架组标记的属性及其说明见表 3-4。
属性名称 说明
rows 设定横向分割的框架数目。
cols 设定纵向分割的框架数目。
border 设定边框的宽度。
bordercolor 设定边框的颜色。
frameborder 设定有 ∕ 无边框。
framespacing 设置各窗口间的空白。
其中 rows和 cols属性的取值可以是像素数 （ x）,
相对于浏览器窗口的百分比数 （ x%） 和自动分配
（ x*） 。
表 3-4 框架组标记的属性及其说明
(2) 框架标记
<FRAME>标记用于给各个框架指定页面的内容,也就是,它将各个框架和包含其内容的那个文件联系在一起 。 <FRAME>是一个单标记,其语法格式为：
<FRAME src="源文件名,html" name="框架名 "
border=n bordercolor=mycolor
frameborder=yes|no marginwidth=x1
marginheight=x2 scrolling=yes|no|auto noresize>
说明：框架标记的属性及其说明见表 3-5。
表 3-5 框架标记的属性及其说明属性名称 说明
src 表示该框架对应的源文件。
name 指定框架名。
border 设定边框的宽度。
bordercolor 设定边框的颜色。
Frameborder 设定有（ yes） ∕无（ no）边框。
marginwidth 设置框架内容与左右边框的空白。
marginheight 设置框架内容与上下边框的空白。
scrolling 设置是（ yes） ∕否 no∕自动（ auto）加入滚动条。
noresize 不允许各窗口改变大小，缺省设置是允许各窗口改变大小的。
其中框架名由字母开头,用下划线开头的名字无效 。 例如：
<FRAME src="aaa1.html" name="rg1">
<FRAME src="../web1/paga.html" name="sub1">
<FRAME src="http://www.china.com/book.html" name="bo">
<FRAME>标记的个数应等于在 <FRAMESET>标记中所定义的框架数,并按在文件中出现的次序按先行后列对框架进行初始化 。 如果 <FRAME>标记数目少于
<FRAMESET>中定义的框架数量,则多余的框架为空 。
注意,由于 <FRAMESET>与 <BODY>标记的作用相同,
所以在 HTML文件中一般不能同时出现,否则会导致无法正常显示框架 。
【 例 3-13】 左右排列多个窗口 。 本例中用到的 html
文件是本章前面建立的例题 。
<HTML>
<HEAD><TITLE>左右排列多个窗口 </TITLE></HEAD>
<FRAMESET cols=30%,20%,50%>
<FRAME src="3_7.htm">
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
【 例 3-14】 上下排列多个窗口 。
<HTML>
<HEAD><TITLE>上下排列多个窗口 </TITLE></HEAD>
<FRAMESET rows=25%,25%,50%>
<FRAME src="3_7.htm">
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
还可以建立纵横排列的多个框架,即框架的嵌套 。
【 例 3-15】 纵横排列的多个窗口 。
<HTML>
<HEAD><TITLE>纵横排列多个窗口 </TITLE></HEAD>
<FRAMESET cols=20%,*>
<FRAME src="3_7.htm">
<FRAMESET rows=40%,*>
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
2,框架属性框架的属性包括边框,颜色,滚动条等,这些属性使框架的外观发生变化,产生不同的艺术效果 。
利用 <FRAMESET>和 <FRAME>标记都可以设置边框的外观,如大小,颜色以及有无边框等 。 两个标记所不同的是,<FRAMESET>标记设置的是整个框架各个边框的属性,而 <FRAME>只能设置它所控制的框架 。
3,框架间的链接在很多网页中,常在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容 。 这些目录是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架 。
使用 <A>的 target属性可以控制目标文件在那个框架内显示 。 当单击热点文本时,目标文件就会出现在
target指定的框架内 。 target属性的值可以是框架名,
其语法格式为：
<A href="目标文件名,html" target="框架名 ">
热点文本 </A>
说明：框架名有四个特殊的值,分别实现 4类特殊的操作 。 见表 3-6。
表 3-6 框架名的四种值取值 说明
target=_blank 链接的目标文件被载入一个新的没有名字的浏览器窗口
target=_self 链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本所在的那个文件
target=_top 链接的目标文件被载入整个浏览器窗口
target=_parent 当框架有嵌套时，链接的目标文件被载入父框架中。否则，
被载入整个浏览器窗口
【 例 3-16】 框架间的链接 。
起始文件 3_16.htm文件的内容为：
<HTML>
<HEAD><TITLE>框架间的链接 </TITLE></HEAD>
<FRAMESET rows=30%,70%>
<FRAME src="3_16_0.htm" name="f1">
<FRAME src="3_16_1.htm" name="f2">
</FRAMESET>
</HTML>
其中 3_16_0.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<H2 align=center><B>第二章例题 </B></H2>
<FONT size=3 color=purple><CENTER>
<A href="3_16_1.htm" target=f2>【 例 2-1】 </A>
<A href="3_16_2.htm" target=f2>【 例 2-2】 </A>
<A href="3_16_3.htm" target=f2>【 例 2-3】 </A>
<A href="3_16_4.htm" target=f2>【 例 2-4】 </A>
<A href="3_16_5.htm" target=f2>【 例 2-5】 </A>
</CENTER></FONT></BODY>
</HTML>
3_16_1.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
【 例 2-1】 简单的 HTML文件。 <P>
<PRE>
<HTML>
<HEAD>
<TITLE>简单的 HTML文件 </TITLE>
</HEAD>
<BODY>
最简单的网页
</BODY>
</HTML>
</PRE>
<DIV align=center>
<A href="..\ch2\2_1.htm">执行 </A>
</DIV>
</BODY>
</HTML>
其他文件的编写参见第二章 。 在浏览器中 显示效果 。
3.2.4 自动刷新页面自动刷新页面就是页面停留几秒钟后自动指向新网页 。 其格式为：
<META http-equiv="Refresh"
content="秒数 ; url=新页面 ">
说明：
① <META>标记必须放置在 <HEAD>...</HEAD>中；
② http-equiv属性值设置为,Refresh” 时,要求显示 URL制定的文件；
③ content属性包含两个值：秒数和 URL,它们之间用,;” 分隔 。 该链接将在指定的时间后被打开 。
【 例 3-17】 自动刷新页面 。
<HTML>
<HEAD>
<META http-equiv="REFRESH"
content="5;url=http://www.chinabest.com/">
<TITLE>搬家了 </TITLE>
</HEAD>
<BODY>
<FONT size=6 color=red>
<P align=center>搬 家 了！ </P></FONT><hr>
我们的网站现在已经搬到 <A href=http://www.chinabest.com/>
http://www.chinabest.com/</A>,5秒钟后自动载入新家。
如果没有自动载入，请单击上面的链接。
</BODY>
</HTML>
在浏览器中的 显示效果 。
3.3 上机练习
【 练习 3-1】 使用列表实现例 3-16中的框架间链接 。
起始文件 lx3_1.htm文件的内容为：
<HTML>
<HEAD><TITLE>框架间的链接 </TITLE></HEAD>
<FRAMESET cols=30%,70%>
<FRAME src=lx3_1_0.htm name=f1>
<FRAME src=3_16_1.htm name=f2>
</FRAMESET>
</HTML>
其中 lx3_1_0.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<H2 align=center><B>第二章例题 </B></H2>
<FONT size=3 color=purple>
<CENTER>
<A href=3_16_1.htm target=f2>【 例 2-1】 </A>
<A href=3_16_2.htm target=f2>【 例 2-2】 </A>
<A href=3_16_3.htm target=f2>【 例 2-3】 </A>
<A href=3_16_4.htm target=f2>【 例 2-4】 </A>
<A href=3_16_5.htm target=f2>【 例 2-5】 </A>
</CENTER>
</FONT>
</BODY>
</HTML>
其他文件内容同例 3-16,在浏览器中 显示效果 。
3.2 课堂教学
3.3 上机练习
3.4 课后作业第 3课 HTML语言介绍（二）
3.1 课前指导列表 （ LIST） 通常用于列举相关的信息条目,提供一种有组织的易于浏览的阅览格式,以及用于描述一个分布的过程 。
表格 （ TABLE） 将文本和图片按行,列排列,它和列表一样,有利于表达信息 。 值得注意的是,表格往往在主页中用来建立主页的框架,使整个页面更规则地放置图片和空白,并使条目清晰 。
框架 （ FRAMES） 是在同一浏览器窗口中显示多个相互隔离的 HTML页的结构,每个区域显示一个 HTML文件 。 利用框架结构可以在页面中同时浏览多个页面 。
3.2 课堂教学
3.2.1 列表标记
3.2.2 表格
3.2.3 框架
3.2.4 自动刷新页面
3.2.1 列表标记
1,无序列表标记
2,菜单列表标记
3,有序列表标记
4,定义列表标记
5,列表的嵌套
1,无序列表标记无序列表中每一个表项的前面是项目符号 （ 如 ●,
■ 等 ） 。 建立无序列表使用 <UL>标记和 <LI>表项标记 。
格式为：
<UL type=符号类型 >
<LI type=符号类型 1> 第一个列表项
<LI type=符号类型 2> 第二个列表项
</UL>
说明：
① type属性指定每个表项左端的符号类型,取值有,disc（ 实心圆点 ● ）,circle（ 空心圆点 ○ ）,
square（ 方块 ■ ）
② 在 <UL>后指定符号的样式,可设定直到 </UL>；
在 <LI>后指定符号的样式,可以设置从该 <LI>起直到
</UL>。
③ <LI>标记是单标记 。 即一个表项的开始,就是前一个表项的结束 。
从浏览器上看,无序列表的特点是,列表项目作为一个整体,与上下段文本间各有一行空白；表项向右缩进并左对齐,每行前面有项目符号 。
【 例 3-1】 无序列表应用示例 。
<HTML>
<HEAD><TITLE>无序列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B>
</FONT></P>
<UL>中国古典文学
<LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
</UL>
<UL type=circle>中国近现代文学
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=square>编辑部的故事
</UL>
</BODY>
</HTML> 在浏览器中的 显示效果 。
2,菜单列表标记菜单列表比无序列表更紧凑,它往往用于列出几个相关网页的索引,以便通过超链接来很快选取感兴趣的内容 。 它用 <MENU>标记替代 <UL>,并引入 <LH>来定义菜单列表的标题 。 格式为：
<MENU>
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
</MENU>
在浏览器中显示时,除 <LH>定义的标题前没有项目符号外,其他与 <LI>定义的列表项相同 。
【 例 3-2】 在例 3-1中使用菜单列表 。
<HTML>
<HEAD><TITLE>菜单列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B></FONT></P>
<MENU>
<LH><FONT color=purple>中国古典文学 </FONT><LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
<BR>
<LH><FONT color=purple>中国近现代文学 </FONT>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=square>编辑部的故事
</BODY>
</HTML> 在浏览器中的 显示效果 。
3,有序列表标记通过带序号的列表可以更清楚地表达信息的顺序 。
使用 <OL>标记可以建立有序列表,表项的标记仍为
<LI>。 格式为：
<OL type=符号类型 >
<LI type=符号类型 1> 表项 1
<LI type=符号类型 2> 表项 2
</OL>
说明：
① 属性 type指定符号的类型见表 3-1。
表 3-1 属性 type指定符号的类型取值 符号说明 示例
1 数字（缺省） 1,2,3
A 大写英文字母 A,B,C
a 小写英文字母 a,b,c
I 大写罗马字母 Ⅰ,Ⅱ,Ⅲ
i 小写罗马字母 ⅰ,ⅱ,ⅲ
② 在 <OL>后指定符号的样式,可设定到 </OL>表项指定新的符号 。
③ 在浏览器中显示时,有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号 。
【 例 3-3】 有序列表应用示例 。
<HTML>
<HEAD><TITLE>有序列表 </TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学 </B></FONT></P>
<OL>
<FONT color=purple>中国古典文学 </FONT>
<LI>红楼梦
<LI>三国演义
<LI>水浒传
<LI>西游记
<BR>
</OL>
<OL type=I>
<FONT color=purple>
中国近现代文学
</FONT>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI type=a>编辑部的故事
</OL>
</BODY>
</HTML>
在浏览器中的 显示效果 。
4,定义列表标记用定义列表表示单词或语句,使之具有交互凹进的特点 。 定义列表使用标记 <DL>,<DT>和 <DD>。 <DT>
往往用于定义单词,<DD>用于定义语句 。 由 <DT>定义的项目会自动换行左对齐,但项目之间没有空行 。 格式为：
<DL>
<DT> 定义单词 1
<DD> 单词 1的说明
<DT> 定义单词 2
<DD> 单词 2的说明
</DL>
与 <LI>标记一样,<DT>,<DD>也为单标记 。
5,列表的嵌套列表嵌套把主页分为多个层次,例如书的目录,
给人以很强的层次感 。 有序列表和无序列表不仅可以自身嵌套,而且彼此可互相嵌套 。
【 例 3-4】 无序列表中套无序列表 。
<HTML>
<HEAD><TITLE>无序列表中套无序列表 </TITLE></HEAD>
<BODY>
<FONT color=blue size=3>,无序列表中套无序列表,示例 </FONT>
<UL>
<LI>中国古典文学
<UL>
<LI>红楼梦
<LI>三国演义
<LI>水浒传
<LI>西游记
</UL>
<LI>中国近现代文学
<OL type=a>
<LI>阿 Q正传
<LI>围城
<LI>四世同堂
<LI>家,春,秋
<LI>编辑部的故事
</OL>
</UL>
</BODY>
</HTML>
在浏览器中的 显示效果 。
【 例 3-5】 有序列表与无序列表的嵌套 。
<HTML>
<HEAD><TITLE>有序列表与无序列表的嵌套 </TITLE></HEAD>
<BODY>
<FONT color=blue size=3>有序列表与无序列表的嵌套示例 </FONT>
<UL>
<LI>中国古典文学
<UL>
<LI>红楼梦 <LI>三国演义
<LI>水浒传 <LI>西游记
</UL>
<LI>中国近现代文学
<OL type=a>
<LI>阿 Q正传 <LI>围城
<LI>四世同堂 <LI>家,春,秋
<LI>编辑部的故事
</OL>
</UL>
</BODY>
</HTML> 在浏览器中的 显示效果 。
3.2.2 表格
1,表格标记
2,给表格加上标题
3,跨多行、多列的表项
4,表格的分组显示
5,对齐表项
1,表格标记表格的标记为 <TABLE>,行的标记为 <TR>,表项的标记为 <TD>。 其中,<TR>是单标记,一行的结束是新一行的开始 。 表项内容写在 <TD>后或与 </TD>之间 。
<TABLE>则必须成对使用 。 格式为：
<TABLE align=left|center|right
border=n width=x|x% height=y|y%>
<TR> <TH>表头 1<TH>表头 2? <TH>表头 n
<TR> <TD>表项 1<TD>表项 2? <TD>表项 n
<TR> <TD>表项 1<TD>表项 2? <TD>表项 n
</TABLE>
说明：
① 在浏览器中显示时,<TH>标记的文字按粗体显示,属于,表头,,<TD>标记的文字按正常字体显示,
属于表项 。
② 表格的整体外观由 <TABLE>标记的属性决定,
见表 3-2。
表 3-2 <TABLE>标记的属性属性名 说明
Align 定义表格在网页中的位置。
Border 定义表格边框的粗细,n取整数，单位是像素。如果省略，则不带边框。
Width 定义表格的宽度,x为像素数或占窗口的百分比。
Height 定义表格的高度,y为像素数或占窗口的百分比。
③ 也可以将表头标记加在第一列 。
④ 对于表格的宽度,如果为像素数,则为绝对宽度 。 如果为百分数 %,则为相对于浏览器窗口宽度的比例,也就是 100%时表格宽等于窗口的宽度 。 不管是绝对宽度还是相对宽度,数值太小不足以显示表格中的内容时,会自动以最小的宽度显示 。
【 例 3-6】 建立有框线和无框线简单表格 。
<HTML>
<HEAD><TITLE>学生成绩统计表 </TITLE></HEAD>
<BODY>
<TABLE align=center border=3 width=480 height=140>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
<TR><TD>0002<TD>常小雨 <TD>88<TD>82<TD>85
<TR><TD>0006<TD>李 刚 <TD>68.5<TD>90<TD>79.3
</TABLE> <BR>
<TABLE align=left>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
<TR><TD>0002<TD>常小雨 <TD>88<TD>82<TD>85
<TR><TD>0006<TD>李 刚 <TD>68.5<TD>90<TD>79.3
</TABLE>
</BODY>
</HTML> 在浏览器中的 显示效果 。
2,给表格加上标题用 <CAPTION>标记给表格加标题,其格式为：
<CAPTION align=left|right|top|bottom
valign=top|bottom>标题 </CAPTION>
说明,<CAPTION> 标 记 应 包 含 在
<TABLE>? </TABLE>标记之间,其属性说明见表 3-3。
属性名 说明
align 设置表格标题在 center（缺省），左边 left，还是右边 right
valign 设置表格标题放在表的上部 top（缺省），还是下部 bottom
表 3-3 <CAPTION>标记的属性
【 例 3-7】 给表格加上标题 。
<HTML>
<HEAD><TITLE>学生成绩统计表 </TITLE></HEAD>
<BODY>
<TABLE align=center border>
<CAPTION>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
<TABLE align=center border>
<CAPTION align=right>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
<TABLE align=center border>
<CAPTION align=left valign=bottom>学生成绩统计表 </CAPTION>
<TR><TH>学号 <TH>姓 名 <TH>英语 <TH>高等数学 <TH>平均分数
<TR><TD>0001<TD>黄德荣 <TD>92<TD>98.5<TD>95.3
</TABLE><BR>
</BODY>
</HTML> 在浏览器中的 显示效果 。
3,跨多行,多列的表项使用 <TR>,<TD>,<TH>标记的 colspan和 rowspan
属性,可以分别制作跨多列 （ 合并列 ） 和跨多行 （ 合并行 ） 的表格 。
(1) 跨多列表项跨多列表项的格式为：
<TD colspan=x>表项 </TD> |
<TR colspan=x>表项 </TR> |
<TH colspan=x>表项 </TH>
其中,x表示合并的列数 。
(2) 跨多行表项跨多行表项的格式为：
<TD rowspan=y>表项 </TD> |
<TR rowspan=y>表项 </TR> |
<TH rowspan=y>表项 </TH>
其中,y表示合并的行数 。
(3) 同时跨多列多行表项在 <TH>中同时使用 colspan和 rowspan属性可制作多重表头 。 格式为：
<TH rowspan=x colspan=y>
其中,rowspan设置表头跨过 x行,colspan设置表头跨过 y列 。
【 例 3-8】 分别建立跨多列表项和跨多行表项的表格 。
<HTML>
<BODY>
<TABLE align=center border>
<TR><TH colspan=3>计算机系
<TR><TH>姓 名 <TH>性别 <TH>年龄
<TR><TD>张大强 <TD>男 <TD>18
<TR><TD>王永芳 <TD>女 <TD>17
</TABLE><BR>
<TABLE border>
<TR><TH rowspan=3>计算机系 <TH>姓 名 <TD>性别 <TD>年龄
<TR> <TH>张大强 <TD>男 <TD>18
<TR> <TH>王永芳 <TD>女 <TD>17
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
【 例 3-9】 建立多重表头的表格 。
<HTML>
<HEAD><TITLE>成绩 </TITLE></HEAD>
<BODY>
<TABLE align=center border=5>
<CAPTION><FONT size=5><B>学生成绩表 </B></FONT></CAPTION>
<TR><TH rowspan=2>学号 <TH rowspan=2>姓名 <TH colspan=3>成绩
<TR> <TH>英语 <TH>高等数学 <TH>总分数
<TR><TD>0001<TD>黄德荣 <TD>80<TD>93<TD>173
<TR><TD>0002<TD>王丽蓉 <TD>90<TD>100<TD>190
<TR><TD>0003<TD>赵晓丽 <TD>72<TD>86<TD>158
<TR><TD>0004<TD>白淑霞 <TD>86<TD>92<TD>178
<TR><TD>0005<TD>李萍萍 <TD>92<TD>69<TD>161
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
4,表格的分组显示复杂表格是对表格的行,列,表项的对齐方式进行设置 。
(1) 按行分组表格的行从上到下可以分为表头,表体和表尾 。
分别使用标记 <THEAD>,<TBODY>,<TFOOT>来定义 。 这种定义方法不但可以实现设置表头,而且可以将表格的行分组 。
格式为：
<TABLE>
<THEAD> 题头 </THEAD>
<TFOOT> 表尾 </TFOOT>
<TBODY> 表体 1 </TBODY>
<TBODY> 表体 n </TBODY>
</TABLE>
可以定义多个表体 <TBODY>部分,每个 <TBODY>部分定义多行信息,每行的格式与一般表格中的一样,
在同一个 <TBODY>中,所有各行的列数必须相同 。
<THEAD>,<TBODY>,<TFOOT>标记可以是单标记 。
在浏览器中显示时,表头,表尾以及各个表体之间都用边框来分隔 。
【 例 3-10】 按行分组制作表格 。
<HTML>
<BODY>
<TABLE border align=center>
<THEAD>
<TR bgcolor=pink><TH>学 号 <TH>姓 名 <TH>性 别 <TH>年 龄
</THEAD>
<TBODY>
<TR align=center><TD bgcolor=orange>0001
<TD bgcolor=greenyellow>王霞 <TD>女 <TD>17
<TR align=right><TD bgcolor=orange>0002
<TD bgcolor=greenyellow>张丽 <TD>女 <TD align=center>16
</TBODY>
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
(2) 按列分组用列组 <COLGROUP>标记和列 <COL>标记,可以改变列的一些性质,如列的宽度等 。 其格式为：
<COLGROUP | COL span=x width=y>
说明：
① 使用 <COLGROUP>标记可设定列组中的列数以及各列的属性,<COL>标记可以设定一列的属性,它可以放在 <COLGROUP>中使用,也可单独用于定义列组以外列的属性,但它不能构造列组 。
② span的值 x大于 0,表示从左数起,指定列组
（ 或所含列 ） 的列数,缺省为 1列 。 width的值 y表示该列组各列的宽度,可以为像素数,%数 （ 占整个表格的百分比 ） 或 n*（ 自动分配,为当前列的 1/n） 。
【 例 3-11】 按列分组制作表格,设置列宽 。
<HTML>
<HEAD><TITLE>学生 </TITLE></HEAD>
<BODY>
<TABLE border width=250 align=center>
<CAPTION>学生名单 </CAPTION>
<COLGROUP span=2 width=90>
<THEAD><TR><TH>姓名 <TH>性别 <TH>年龄 </THEAD>
<TBODY>
<TR><TD>王慧 <TD>女 <TD>20
<TR><TD>李洪 <TD>男 <TD>21
</TBODY>
</TABLE>
<TABLE border=3 align=center><COL width=50%>
<COLGROUP span=2 width=100>
<CAPTION align=left>学生名单 </CAPTION>
<TR><TH>学号 <TH>姓名 <TH>性别 <TH>年龄
<TR><TD>0001<TD>李萍 <TD>女 <TD>17
<TR><TD>0002<TD>张勇 <TD>男 <TD>18
</TABLE>
</BODY>
</HTML> 在浏览器中的 显示效果 。
5,对齐表项在缺省下,表项居于单元格的左端 。 可用列,行的属性设置表项数据在单元格中的位置 。
(1) 水平对齐的方式是用标记 <COL>,<COLGROUP>、
<TH>,<TD>和 <TR>的 align属性 。 align的属性值分别为,center（ 居中 ）,left（ 左对齐 ）,right（ 右对齐 ） 和 justify（ 左右调整 ） 。
(2) 垂直对齐的方式则是使用 valign属性,
valign的属性值分别为,top（ 靠单元格顶 ）,bottom
（ 靠单元格底 ）,middle（ 靠单元格中 ） 和 baseline
（ 同行单元数据项位置一致 ） 。
【 例 3-12】 调整表格中数据的位置 。
<HTML>
<HEAD><TITLE>学生名单 </TITLE></HEAD>
<BODY>
<TABLE border=3 align=center width=60% height=200>
<COL width=100 align=center valign=bottom>
<COL width=100 align=left valign=top>
<COL span=2 width=100 align=right valign=middle>
<COL width=200 align=justify valign=top>
<CAPTION>学生名单表 </CAPTION>
<TR><TH>学号 <TH>姓名 <TH>性别 <TH>年龄
<TR><TD>0001<TD>李 萍 <TD>女 <TD>17
<TR><TD>0002<TD>张 勇 <TD>男 <TD>18
</TABLE>
</BODY>
</HTML>
在浏览器中的 显示效果 。
3.2.3 框架
1,框架标记
2,框架属性
3,框架间的链接
1,框架标记框架标记有两个：框架组标记
<FRAMESET>? </FRAMESET> 和框架标记 <FRAME> 。
<FRAMESET>用以划分框架,而每一框架由一个 <FRAME>
标记所标示,<FRAME>标记用来声明其中框架页面的内容,并且必须在 <FRAMESET>范围中使用 。
所有框架标记需要放在一个起始的 HTML文件中,
这个文件只是用来声明框架的定义,记录了框架如何划分,以及框架的各种属性,不会显示任何资料 。
框架的定义的基本语法为：
<FRAMESET>
<FRAME src="URL">
<FRAME src="URL">
</FRAMESET>
(1) 框架组标记
<FRAMESET>标记用来定义一个框架组,其语法格式为：
<FRAMESET rows=x1 cols=x2 border=n
bordercolor=mycolor frameborder=yes|no
framespacing=m>
</FRAMESET>
说明：框架组标记的属性及其说明见表 3-4。
属性名称 说明
rows 设定横向分割的框架数目。
cols 设定纵向分割的框架数目。
border 设定边框的宽度。
bordercolor 设定边框的颜色。
frameborder 设定有 ∕ 无边框。
framespacing 设置各窗口间的空白。
其中 rows和 cols属性的取值可以是像素数 （ x）,
相对于浏览器窗口的百分比数 （ x%） 和自动分配
（ x*） 。
表 3-4 框架组标记的属性及其说明
(2) 框架标记
<FRAME>标记用于给各个框架指定页面的内容,也就是,它将各个框架和包含其内容的那个文件联系在一起 。 <FRAME>是一个单标记,其语法格式为：
<FRAME src="源文件名,html" name="框架名 "
border=n bordercolor=mycolor
frameborder=yes|no marginwidth=x1
marginheight=x2 scrolling=yes|no|auto noresize>
说明：框架标记的属性及其说明见表 3-5。
表 3-5 框架标记的属性及其说明属性名称 说明
src 表示该框架对应的源文件。
name 指定框架名。
border 设定边框的宽度。
bordercolor 设定边框的颜色。
Frameborder 设定有（ yes） ∕无（ no）边框。
marginwidth 设置框架内容与左右边框的空白。
marginheight 设置框架内容与上下边框的空白。
scrolling 设置是（ yes） ∕否 no∕自动（ auto）加入滚动条。
noresize 不允许各窗口改变大小，缺省设置是允许各窗口改变大小的。
其中框架名由字母开头,用下划线开头的名字无效 。 例如：
<FRAME src="aaa1.html" name="rg1">
<FRAME src="../web1/paga.html" name="sub1">
<FRAME src="http://www.china.com/book.html" name="bo">
<FRAME>标记的个数应等于在 <FRAMESET>标记中所定义的框架数,并按在文件中出现的次序按先行后列对框架进行初始化 。 如果 <FRAME>标记数目少于
<FRAMESET>中定义的框架数量,则多余的框架为空 。
注意,由于 <FRAMESET>与 <BODY>标记的作用相同,
所以在 HTML文件中一般不能同时出现,否则会导致无法正常显示框架 。
【 例 3-13】 左右排列多个窗口 。 本例中用到的 html
文件是本章前面建立的例题 。
<HTML>
<HEAD><TITLE>左右排列多个窗口 </TITLE></HEAD>
<FRAMESET cols=30%,20%,50%>
<FRAME src="3_7.htm">
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
【 例 3-14】 上下排列多个窗口 。
<HTML>
<HEAD><TITLE>上下排列多个窗口 </TITLE></HEAD>
<FRAMESET rows=25%,25%,50%>
<FRAME src="3_7.htm">
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
还可以建立纵横排列的多个框架,即框架的嵌套 。
【 例 3-15】 纵横排列的多个窗口 。
<HTML>
<HEAD><TITLE>纵横排列多个窗口 </TITLE></HEAD>
<FRAMESET cols=20%,*>
<FRAME src="3_7.htm">
<FRAMESET rows=40%,*>
<FRAME src="3_8.htm">
<FRAME src="3_9.htm">
</FRAMESET>
</FRAMESET>
</HTML>
在浏览器中 显示效果 。
2,框架属性框架的属性包括边框,颜色,滚动条等,这些属性使框架的外观发生变化,产生不同的艺术效果 。
利用 <FRAMESET>和 <FRAME>标记都可以设置边框的外观,如大小,颜色以及有无边框等 。 两个标记所不同的是,<FRAMESET>标记设置的是整个框架各个边框的属性,而 <FRAME>只能设置它所控制的框架 。
3,框架间的链接在很多网页中,常在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容 。 这些目录是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架 。
使用 <A>的 target属性可以控制目标文件在那个框架内显示 。 当单击热点文本时,目标文件就会出现在
target指定的框架内 。 target属性的值可以是框架名,
其语法格式为：
<A href="目标文件名,html" target="框架名 ">
热点文本 </A>
说明：框架名有四个特殊的值,分别实现 4类特殊的操作 。 见表 3-6。
表 3-6 框架名的四种值取值 说明
target=_blank 链接的目标文件被载入一个新的没有名字的浏览器窗口
target=_self 链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本所在的那个文件
target=_top 链接的目标文件被载入整个浏览器窗口
target=_parent 当框架有嵌套时，链接的目标文件被载入父框架中。否则，
被载入整个浏览器窗口
【 例 3-16】 框架间的链接 。
起始文件 3_16.htm文件的内容为：
<HTML>
<HEAD><TITLE>框架间的链接 </TITLE></HEAD>
<FRAMESET rows=30%,70%>
<FRAME src="3_16_0.htm" name="f1">
<FRAME src="3_16_1.htm" name="f2">
</FRAMESET>
</HTML>
其中 3_16_0.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<H2 align=center><B>第二章例题 </B></H2>
<FONT size=3 color=purple><CENTER>
<A href="3_16_1.htm" target=f2>【 例 2-1】 </A>
<A href="3_16_2.htm" target=f2>【 例 2-2】 </A>
<A href="3_16_3.htm" target=f2>【 例 2-3】 </A>
<A href="3_16_4.htm" target=f2>【 例 2-4】 </A>
<A href="3_16_5.htm" target=f2>【 例 2-5】 </A>
</CENTER></FONT></BODY>
</HTML>
3_16_1.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
【 例 2-1】 简单的 HTML文件。 <P>
<PRE>
<HTML>
<HEAD>
<TITLE>简单的 HTML文件 </TITLE>
</HEAD>
<BODY>
最简单的网页
</BODY>
</HTML>
</PRE>
<DIV align=center>
<A href="..\ch2\2_1.htm">执行 </A>
</DIV>
</BODY>
</HTML>
其他文件的编写参见第二章 。 在浏览器中 显示效果 。
3.2.4 自动刷新页面自动刷新页面就是页面停留几秒钟后自动指向新网页 。 其格式为：
<META http-equiv="Refresh"
content="秒数 ; url=新页面 ">
说明：
① <META>标记必须放置在 <HEAD>...</HEAD>中；
② http-equiv属性值设置为,Refresh” 时,要求显示 URL制定的文件；
③ content属性包含两个值：秒数和 URL,它们之间用,;” 分隔 。 该链接将在指定的时间后被打开 。
【 例 3-17】 自动刷新页面 。
<HTML>
<HEAD>
<META http-equiv="REFRESH"
content="5;url=http://www.chinabest.com/">
<TITLE>搬家了 </TITLE>
</HEAD>
<BODY>
<FONT size=6 color=red>
<P align=center>搬 家 了！ </P></FONT><hr>
我们的网站现在已经搬到 <A href=http://www.chinabest.com/>
http://www.chinabest.com/</A>,5秒钟后自动载入新家。
如果没有自动载入，请单击上面的链接。
</BODY>
</HTML>
在浏览器中的 显示效果 。
3.3 上机练习
【 练习 3-1】 使用列表实现例 3-16中的框架间链接 。
起始文件 lx3_1.htm文件的内容为：
<HTML>
<HEAD><TITLE>框架间的链接 </TITLE></HEAD>
<FRAMESET cols=30%,70%>
<FRAME src=lx3_1_0.htm name=f1>
<FRAME src=3_16_1.htm name=f2>
</FRAMESET>
</HTML>
其中 lx3_1_0.htm文件的内容为：
<HTML>
<HEAD><TITLE>第二章例题 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<H2 align=center><B>第二章例题 </B></H2>
<FONT size=3 color=purple>
<CENTER>
<A href=3_16_1.htm target=f2>【 例 2-1】 </A>
<A href=3_16_2.htm target=f2>【 例 2-2】 </A>
<A href=3_16_3.htm target=f2>【 例 2-3】 </A>
<A href=3_16_4.htm target=f2>【 例 2-4】 </A>
<A href=3_16_5.htm target=f2>【 例 2-5】 </A>
</CENTER>
</FONT>
</BODY>
</HTML>
其他文件内容同例 3-16,在浏览器中 显示效果 。
