2.1 HTML 简 介
2.2 HTML入门——简单标记的认识及使用
2.3 段落和文字标记
2.4 建 立 超 链 接
2.5 嵌 入 图 片
2.6 列 表 标 记
2.7 表 格
2.8 框 架
2.9 自动刷新页面
2.10 层叠样式表（CSS）
本章主要介绍HTML，HTML（Hyper Text Markup Language，超文本文件的标记语言）是网站制作的基础语言，它是在网上能被所有计算机广泛理解的一种用于出版的语言，即WWW所使用的出版语言就是HTML。通过本章的学习，读者应该掌握以下内容：
2.1 HTML 简 介
1．什么是HTML
HTML是一种标记语言。
2．HTML的功能
（1）出版在线文档
（2）通过超链接检索在线信息
（3）插入图像
（4）建立表格
（5）创建列表
（6）设计表单
（7）制作多媒体
3．HTML的编辑环境
（1）硬件环境
（2）软件环境
2.2 HTML入门—— 简单标记的认识及使用
标记是HTML的基本元素 。
标记分为两种：单一标记和成对标记，如“<head>…</head>” 。
下面将具体介绍一些常用的标记。
1．html标记
语法：
<html>
…
</html>
2．head标记（头部标记）
语法：
<head>
……
</head>
3．title标记（标题标记）
语法：
<title>
标题的文本
</title>
4．body标记
语法：
<body>
…文件主体部分…
</body>
常见的属性如表2-1所示。
例2-1 常用标记的使用。
<html>
<head>
<title>个人主页</title>
</head>
<body bgcolor=yellow text=blue>
最具魅力的个人主页，请欣赏哟！
</body>
</html>
5．注释标记
语法：
<!--注释内容-->
例2-2 注释标记的使用。
<!-- 2-2.htm -->
<html>
<head>
<title>颜色及注释的设定</title>
</head>
<!下面是HTML文件的主体部分，用来设置网页的风格>
<body text=green background="../pic/fengshou.jpg">
这是主体部分，
设置网页背景图片、文本为绿色
<h2 align=center>可爱猫咪</h2>
</body>
</html>
2.3 段落和文字标记
2.3.1 标题字体大小标记
语法：
〈hn〉标题文字〈/hn〉
例2-3 设置标题文字的大小。
<html>
<head>
<title>标题字体大小变化之范例</title>
</head>
<body>
<h1>这是标题文字H1</h1>
<h2>这是标题文字H2</h2>
<h3>这是标题文字H3</h3>
<h4>这是标题文字H4</h4>
<h5>这是标题文字H5</h5>
<h6>这是标题文字H6</h6>
</body>
</html>
2.3.2 对齐方向的控制
语法：
align=对齐方式
例2-4 设置标题文字的对齐方式。
<html>
<head>
<title>标题字的对齐方式</title>
</head>
<body>
<h2 align=right>这个标题字将出现在窗口的右方</h2>
<h2 align=left>这个标题字将出现在窗口的左方</h2>
<h2 align=center>这个标题字将出现在窗口的中间</h2>
</body>
</html>
2.3.3 文本文件标记
语法：
<font size=数字 face=字体名 color=颜色>被设置的文字</font>
例2-5 设置网页中文字的大小、字体、颜色。
<html>
<head>
<title>文字属性的设置</title>
</head>
<body>
<font size=1 face=宋体 color=red >1号字宋体红色 </font>
<font size=2 face=隶书 color=black >2号字隶书黑色 </font>
<font size=3 face=楷体 color=green >3号字楷体绿色 </font>
<font size=4 face=华文彩云 color=crimson >4号字华文彩云深红色 </font>
<font size=5 face=方正姚体 color=lavender >5号字方正姚体淡紫色 </font>
<font size=6 face=方正舒体 color=blue >6号字方正舒体兰色 </font>
<font size=7 face=华文彩云 color=pink >7号字华文彩云粉红色 </font>
</body>
</html>
（1）size属性值从1～7表示文字的大小，取1时文字最小，取7时文字最大；
（2）face属性用来设置字体，如宋体、楷体、隶书、华文彩云和方正姚体等；
（3）color属性用来设置字体颜色 。
2.3.4 段落与换行
1．段落标记
语法：<p>
2．换行标记
语法：文字<br>
例2-6 练习换行与换段标记的使用。
<html>
<head>
<title>段落与换行</title>
</head>
<body>
2.3.5 水平线
语法：
<hr align=对齐方式 size=横线粗细 width=横线长度 color=横线颜色 noshade>
例2-7 设定水平线标记的使用。
<html>
<head>
<title>水平线变化的实例</title>
</head>
<body>
<center><h4>水平线</h4></center>
<hr>
<hr size=5>
<hr size=5 width=75%>
<hr size=15 width=50% align=center>
<hr size=12 width=100% align=right>
<hr noshade>
<hr noshade size=15>
</body>
</html>
2.3.6 特殊引述文件区标记
语法：<blockquote></blockquote>
例2-8 特殊引述文件区标记的使用。
<html>
<head>
<title>特殊引述文件区之使用</title>
</head>
<h2>解读王菲百变唱功</h2>
04年8月京华时报曾刊载过这一段话：
<p>
<blockquote>王菲为"菲比寻常"北京演唱会精选了三十几首各个阶段的代表作,
每首歌曲都包含着王菲与众不同的唱功。
</blockquote>
王菲的音色犹如澄净深蓝的天空，穿透感极强。加上气息的通畅,
使王菲的声音具有特殊的美感，不需要特别地调整呼吸即可发出动听的声音。
</body>
</html>
2.3.7 特殊符号
常用的特殊替换字符如表2-3所示。
2.4 建 立 超 链 接
2.4.1 文件内的链接
1．超链接标记的语法
<a href="#记号名">超链接名称</a>
2．书签标记的语法
<a name="记号名">目标文本</a>
例2-9 链接本网页内的文本。
<html>
<head>
<title>文件内连接的示例</title>
</head>
<body>
<! 给链接文本蝴蝶谷起一个记号名为TAB>
<h2><a name="tab">蝴蝶谷</a></h2>
<h3>台湾有的三种类型的蝴蝶谷</h3>
<ul>
<li><a href="#i1">生态型蝴蝶谷</a>
<li><a href="#i2">越冬型蝴蝶谷</a>
<li><a href="#i3">蝶道型蝴蝶谷</a>
</ul>
<hr>
<h3><a name="i1">生态型蝴蝶谷</a></h3>
因为它的特殊地理，气候等生态因素而形成, 仅适合某种特定蝴蝶生存与繁殖。
<p>
<a href="#tab">回到主目录</a>
<hr>
<h3><a name="i2">越冬型蝴蝶谷</a></h3>
是蝴蝶为了渡过寒冷的冬天而聚集在某一山谷所形成的蝴蝶集团。
<p>
<! 将文本"回到主目录"超链接到上边记号名为"TAB"的"蝴蝶谷"处>
<a href="#tab">回到主目录</a>
<hr>
<h3><a name="i3">蝶道型蝴蝶谷</a></h3>
是蝴蝶依次成列的飞行现象。
<p>
<a href="#tab">回到主目录</a>
</body>
</html>
2.4.2 跨文件、跨网络的链接
语法：
<a href="链接位置">超链接名称</a>
例2-10 绝对路径用法。
<html>
<head>
<title>绝对路径的用法</title>
</head>
<body>
测试绝对路径<BR>
<a href="C:\Inetpub\wwwroot\ASPYCX\chap2\ch2-9.htm">超级链接到蝴蝶谷文件ch2-9.htm</a>
<p>相对路径的测试<br>
<a href="../chap2/ch2-8.htm">超链接到解读王菲百变唱功文件ch2-8.htm</a>
<p>连接服务器的测试<br>
<a href="http://www.xwyz.cn/">北京市宣武一职主页</a>
</body>
</html>
2.5 嵌 入 图 片
2.5.1 嵌入背景图片
1．图片文件的格式
加入网页中的图片，经常使用GIF和JPEG格式。
GIF格式文件普遍用于显示索引颜色图形和图像，最多只能显示256种颜色 。
JPEG格式文件普遍用于显示图片和其他连续色调的图像文档 。
2．设置网页的背景
（1）设置背景色
语法：
<body bgcolor=颜色值>
（2）用图片做背景
语法：
<body background="图文件存储位置与名称">
例2-11 用图片做网页背景。
<html>
<head>
<title>用图片做网页背景</title>
</head>
<body background="..\pic\flower.jpg"> <!--在网页中加入一花的图片-->
<font color=white><h1 align=center color=white>用图片做网页背景</h1></font> <!--这利用FONT主要是改变文
字的颜色-->
<font size=7 face="隶书" color=white>
加入网页中的背景图片，可为GIF格式或JPEG格式。请注意两种
图片的不同特点，根据你网页的需要来选取。但前提是一定注意
将图片做得尽可能的小。
<p>
</font>
</body>
</html>
2.5.2 图片标记
语法：
<img src="图文件存储位置与名称" alt="叙述文字" width=x height=y border=n hspace=h vspace=v align=对齐方式>
说明：
图片标记中的属性说明如表2-4所示。
1．图片大小
在<img>标记的height（图片高度）和width（图片宽度）属性的值可取像素数或取百分数（浏览器窗口）。
例2-12 设定图片大小。
<html>
<head>
<title>设定图片大小</title>
</head>
<body>
<h2 align=center> 图片格式设定</h2>
<!下面分别用宽、高的像素数和百分比来设定图片的大小>
<img alt="丰收" src=../pic/car1.jpg>原图大小
<img alt="丰收" width=20% height=20% src=../pic/car1.jpg>宽20%,高20%，
<img alt="丰收" width=80 height=80 src=../pic/car1.jpg>宽80,高80
</body>
</html>
2．图片的布局
使用< img >标记的align属性来设置图片在网页中的位置，以及图片与文本的排放关系。align属性的取值如表2-5所示。
例2-13 图文环绕。
<html>
<head>
<title>图片与文本的绕排</title>
</head>
<body>
<h2 align=center>图片与文本的绕排</h2>
图片与文本的绕排，这点和Word中的图文绕排一样，如果不设定图片与文本的关系, 图片所在页面是一片空白。利用标记属性，置它们之间
的关系<br>
<img src=..\pic\flower4.jpg align=left>
<p>left---图片居左<br>
<img src=..\pic\flower4.jpg align=right>
<p align=right>right---图片居右
</body>
</html>
3．设置图片与文本之间的空白
为了使整体页面中的图片与文本布局合理、美观、大方，常常在图片与文本之间留下空白，使用<img>标记的hspace和vspace属性即可实现。
例2-14 设置图片与文本之间的空白。
<html>
<head>
<title>设图片与文本之间空白</title>
</head>
<body>
<h2 align=center>设图片与文本之间空白</h2>
<img src=..\pic\flower4.jpg align=left hspace=30 vspace=25>
<p>left---图片居左,设定图片与文本之间的hspace=20 vspace=25<br>
<img src=..\pic\flower4.jpg align=right hspace=15 vspace=20>
<p align=right>right---图片居右,设定图片与文本之间的hspace=15 vspace=20
</body>
</html>
2.5.3 用图片做超链接对象
语法：
<A href=地址><img src=图片文件位置名称></a>
例2-15 用图片作为超链接对象，链接到例2-12制作的页面。
<html>
<head>
<title>图片作为链接热点</title>
</head>
<body>
<h2 align=center> 设置图片作为链接热点</h2>
<a href=..\chap2\ch2-15.htm>
<img src=../pic/pander.jpg>请点击图片将链接到另一页面
</a>
</body>
</html>
2.6 列 表 标 记
2.6.1 有序列表
语法：
<ol type=符号类型 start=n>
<li type=符号类型1>第一列表项</li>
<li type=符号类型2>第二列表项</li>
<li type=符号类型3>第三列表项</li>
<li type=符号类型4>第四列表项</li>
……
</ol>
例2-16 有序列表。
<html>
<head>
<title>有序列表</title>
</head>
<body>
<h1 align=center>中国古典文学</h1>
<h4>这个列表序号默认为阿拉伯数字，从1开始</h4>
<ol>
<li>三国演义
<li>红楼梦
<li>西游记
<li>水浒传</ol>
<h4>这个列表序号指定为大写字母</h4>
<h1 align=center>唐诗</h1>
<ol type=A>
<li>静夜思
<li>望庐山瀑布
<li>采莲曲
<li>望天门山
</ol>
</body>
</html>
2.6.2 无序列表
语法：
<ul type=符号类型 start=n>
<li type=符号类型1>第一列表项
<li type=符号类型2>第二列表项
<li type=符号类型3>第三列表项
<li type=符号类型4>第四列表项
……
</ul>
例2-17 无序列表。
<html>
<head>
<title>无序列表</title>
</head>
<body>
<h1>中国古典四大名著</h1>
使用LI属性分别设无序列表的符号
<ul>
<li type=square>红楼梦
<li type=disc>水浒传
<li type=square >西游记
<li type=circle >三国演义
</ul>
?
<h1>中国现代文学</h1>
在ul内设定无序列表的符号为方块, 只有第三项单独在LI内设, 只对这项起作用。
<ul type=square >
<li>围城
<li>四世同堂
<li type=circle>家、春、秋
<li>阿Q正传
</ul>?
</body>
</html>
2.6.3 定义列表
语法：
<dl>
<dt>…定义单词1…</dt>
<dd>…单词1的说明1…</dd>
<dd>…单词1的说明2…</dd>
<dt>…定义单词2…</dt>
<dd>…单词2的说明1…</dd>
<dd>…单词2的说明2…</dd>
……
</dl>
例2-18 定义列表。
<html>
<head>
<title>定义列表</title>
</head>
<body>
<h1>唐诗</h1>
<dl>
<dt>《采莲曲》</dt>
<dd>唐朝<dd>
<dd>刘方平<dd>
<dt>《望天门山》</dt>
<dd>唐朝<dd>
<dd>李白<dd>
<dt>《清明》</dt>
<dd>唐朝<dd>
<dd>杜牧<dd>
</dl>
</body>
</html>
2.6.4 菜单列表标记
语法：
<menu>
<lh>菜单列表的标题
<li type=符号类型1>第一列表项
<li type=符号类型2>第二列表项
……
<lh>菜单列表的标题
<li type=符号类型3>第一列表项
<li type=符号类型4>第二列表项
……
</menu>
例2-19 菜单列表项。
<html>
<head>
<title>菜单列表</title>
</head>
?
<body>
?
使用lh属性给出标题"中国古典四大名著"和"中国现代文学"
<menu>
<lh><font color=blue face=隶书>中国古典四大名著</font>
<li type=square>红楼梦
<li type=disc>水浒传
<li type=square >西游记
<li type=circle >三国演义<br><br>
<lh><font color=green face=隶书>中国现代文学</font>
<li>围城
<li>四世同堂
<li>家、春、秋
<li>阿Q正传
<li>平凡的世界
<li>十八春
</menu>?
</body>
</html>
2.6.5 列表的嵌套
例2-20 无序列表中嵌套有序和无序列表。
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<h1>下面是一个嵌套的列表</h1>
<!在无序列表中嵌有序列表后又嵌无序列表。>
<ul>
<LI>中国古典四大名著
<ol>
<li>三国演义
<li>红楼梦
<li>西游记
<li>水浒传
</ol>
<LI>唐诗宋词
<ul>
<li type=square>别董大
<li type=disc>九月九日忆山东兄弟
<li type=square >山行
<li type=circle >长歌行
</ul>
</ul>
</body>
</html>
例2-21 有序列表中嵌套二层无序列表。
<html>
<head>
<title>列表嵌套</title>
</head>
<body>
<h1>下面是一个嵌套的列表</h1>
<!在有序列表中嵌套无序列表后又嵌套二层无序列表。>
<ol>
<li>第一层, 第一项
<ul>
<li type=square>第二层, 第一项
<li type=disc>第二层, 第二项
<ul>
<li>第三层, 第一项
<li type=square >第三层, 第二项
</ul>
</ul>
</ol>
</body>
</html>
2.7 表 格
表格是处理数据最常用的一种形式。
2.7.1 表格的结构
语法：
<table align=left│center│right border=n width=x│x% height=y│y%>
<caption>表格标题</caption>
<tr><th>单元格标题1<th>单元格标题2…<th>单元格标题n
<tr><td>单元格文字1<td>单元格文字2…<td>单元格文字n
…
<tr><td>单元格文字1<td>单元格文字2…<td>单元格文字n
</table>
例2-22 表格的框线。
<html>
<head>
<title>表格框线设置</title>
</head>
<body>
<h3 align=center>招生考生表</h3>
<! "<th>"标记后的文字按粗体显示, 且自动居中>
表格属性值：align=center border=3 width=380 height=150
<table align=center border=3 width=380 height=150>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td>清华大学</tr>
</table><p>
表格无框
<table>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
</table><p>
表格属性值：border=5 width=30% height=15%
<table border=5 width=30% height=15%>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
</table><p>
表格属性值：border=10
<table border=10>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
</table><p>
</body>
</html>
例2-23 给表格加标题。
<html>
<head>
<title>给表格加标题</title>
</head>
<body>
<!表格标题利用"caption"的属性值来调整>
<table align=center border=3 width=280 height=100>
<caption> <font color=red face=隶书 size=4>招生考生表</caption>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td>清华大学</tr>
</table><p>
<table align=center border=3 width=280 height=100>
<caption align=right>招生考生表</caption>
<tr><th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td>清华大学</tr>
</table><p>
</body>
</html>
2.7.2 表格字段背景颜色的设定
语法：
<bgcolor=#rrggbb>其中#rrggbb代表“色码表”中的值，（R指红色，G指绿色，B指蓝色），详见第2章表2-2。
例2-24 表格字段背景颜色的设定。
<html>
<head>
<title>表格字段的背景色设定</title>
</head>
<body>
<h3>表格字段的背景色设定</h3>
<table border=3 width=100%>
<tr><th bgcolor=#a0f0ff>学号<th bgcolor=#bb6522>
姓名<th bgcolor=#ff0000>录取学校</tr>
<tr><th bgcolor=#0000ff>001<th bgcolor=#cb55cc>
王红<th bgcolor=#00ffff>北京大学</tr>
<tr><th bgcolor=#7f7f7f>003<th bgcolor=#33aa00>
李菲<th bgcolor=#00567f>清华大学</tr>
</table>
</body>
</html>
2.7.3 表格中的图文件
语法：
<img src=文件位置及名称>
例2-25 表格中的图文件。
<html>
<head>
<title>表格中的图文件</title>
</head>
<body>
<h3>表格中的图文件</h3>
<table border=3>
<tr>
<td><img src=../pic/010.gif>
<td><img src=../pic/011.gif>
<td><img src=../pic/013.gif>
<td><img src=../pic/019.gif>
<td><img src=../pic/020.gif>
<td><img src=../pic/022.gif>
</tr>
</table>
</body>
</html>
2.7.4 跨多行、多列的表项
1．跨多列表项
语法：
<td colspan=x>表项</td>│<tr colspan=x>表项</tr>│<th colspan=x>表项</th>
2．跨多行表项
语法：
<td rowspan=x>表项</td>│<tr rowspan=x>表项</tr>│<th rowspan=x>表项</th>
3．同时跨多行多列的表项
在<th>中同时使用colspan和rowspan属性可制作多重表头。
语法：
<th colspan=y rowspan=x>
例2-26 建立跨多列表项和跨多行表项的表格。
<html>
<head>
<title>表格框线设置</title>
</head>
<body>
跨行
<table align=center border=3 width=380 height=150>
<tr><th colspan=3>录取名单<th >学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td>清华大学</tr>
</table><p>
跨列
<table border>
<tr><th rowspan=4>录取名单<th>学号<th>姓名<th>录取学校</tr>
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
</table><p>
</body>
</html>
例2-27 建立多重表头的表格。
<html>
<head>
<title>表格框线设置</title>
</head>
<body>
<table align=center border=4 width=380 height=150>
<caption><font size=5 color=blue>录取名单
</font></caption>
<tr><th rowspan=2>学号<th rowspan=2>姓名<th colspan=2>录取学校</tr>
<tr><th><img src=../pic/051.gif>普本<th>重本
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td><td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td><td>清华大学</tr>
</table><p>
</body>
</html>
2.7.5 表格中的表格
例2-28 内嵌表格。
<html>
<head>
<title>表格框线设置</title>
</head>
<body>
<table border=2 width=100%>
<caption><font size=5 color=blue>录取名单</font></caption>
<tr><th rowspan=2>学号<th rowspan=2>姓名<th colspan=2>录取学校
<tr><th><img src=../pic/078.gif>普本<th><img src=../pic/051.gif>重本
<tr><th>001<td>武佳<td>北京商学院</tr>
<tr><th>001<td>陈唐<td><td>北京大学</tr>
<tr><th>001<td>王红云<td>北京经济贸易大学</tr>
<tr><th>001<td>李菲<td><td>清华大学</tr>
<tr><table border=5 width=100% >
<tr><th>内嵌表格---普本很少能进入国家211工程
<th>内嵌表格---重本多数进入国家211工程
</table>
</table>
</body>
</html>
2.7.6 表格中的对齐表项
（1）水平对齐方式是用标记<col><th><td>和<tr>的align属性设置。align属性值分别为：center、left和right。
（2）垂直对齐方式则是使用valign属性设置，valign属性值分别为：top（靠单元格上部）、bottom（靠单元格下部）、middle（中间）和baseline（同行单元数据项位置一致）。
例2-29 表格中数据的位置。
<html>
<head>
<title>表格的对齐方式</title>
</head>
<body>
<h3>表格的数据的位置</h3>
<table border>
<caption align=top>招生人数</caption>
<tr><th rowspan=2 valign=middle>大学<th colspan=2><img src=../pic/031.gif>男生</th>
<th colspan=2><img src=../pic/032.gif>女生</th></tr>
<tr><th>18 岁以下<th>18 岁以上<th>18 岁以下
<th>18 岁以上</tr>
<tr><th>政法大学<td align=right>32<td>20<td align=center>55<td align=center >72</tr>
<tr><th>邮电大学<td align=right>50<td>10<td align=center>33<td align=center>21</tr>
</table>
</body>
</html>
2.8 框 架
框架设定主要是使用<frameset>和<frame>两个标记来制作，以达到窗口分割的目的。
2.8.1 框架标记
语法：
<frameset>
<frame src=文件位置及名称>
<frame src=文件位置及名称>
…
</frameset>
1．框架组标记
语法：
< frameset rows=x1 cols=x2 border=n bordercolor=mycolor frameborder=yes│no framespacing=m >
…
</frameset>
2．框架标记
语法：
<frame src="文件位置和名称" name="框架名" border=n bordercolor=mycolor frameborder= yes│no marginwidth=x1 marginheight=x2 scrolling= yes│no│auto noresize >
例2-30 上下排列多个窗口。
<html>
<head>
<title>水平分割</title>
</head>
<!用像素数定义上下分割三次 >
<frameset rows=2,4,1>
<frame name="top" src=../chap2/ch2-25.htm>
<frame name="middle" src=../chap2/ch2-27.htm scrolling="auto">
<frame name="tottom" src=../pic/065.gif>
</frameset>
</html>
例2-31 左右排列多个窗口。
<html>
<head>
<title>垂直分割</title>
</head>
<!用相对于浏览器的百分比定义左右分割的框架结构 >
<frameset cols=30%,70%>
<frame name="left" src=../pic/diann.jpg>
<frame name="right" src=../chap2/ch2-27.htm scrolling="auto">
</frameset>
</html>
例2-32 框架嵌套。
<html>
<head>
<title>垂直分割</title>
</head>
<!用两个框架组标记嵌套实现纵横排列的多个窗口 >
<frameset cols=20%,80%>
<frame name="left" src=../pic/diann.jpg o>
<frameset rows=30%,70%>
<frame name="right" src=../pic/kt2.gif scrolling=no>
<frame name="right" src=../chap2/ch2-28.htm >
</frameset>
</frameset>
</html>
2.8.2 框架属性
（1）窗口边缘宽度用<frameset>标记的border属性设置，窗口边线的设定用frameborder属性来实现。
例2-33 窗口边缘宽度及颜色的设定。
<html>
<head>
<title>窗口边缘宽度及颜色的设定</title>
</head>
<frameset border=30 bordercolor=yellow rows="1,1">
<frame name="top" src="../chap2/ch2-27.htm">
<frame name="bottom" src="../chap2/ch2-26.htm">
</frameset>
</html>
（2）窗口边框范围的设定。
例2-34 窗口边线的设定。
<html>
<head>
<title>窗口边线测试</title>
</head>
<!注意边框线的颜色以区分框架组和框架的边框以及作用范围>
<frameset frameborder=yes bordercolor=red cols="30%,*">
<frame frameborder=yes name="left" src="../chap2/ch2-21.htm">
<frameset rows=1,1>
<frame frameborder=yes bordercolor=blue name="right" src="../chap2/ch2-18.htm">
<frame frameborder=yes bordercolor=blue name="right" src="../chap2/ch2-19.htm">
</frameset>
</html>
2.8.3 框架间的链接
语法：
<a href="目标文件位置及名称.html " target="框架名">链接文件</a>
说明：框架名有4个特殊的值，可实现4类特殊的操作，如表2-10所示。
例2-35 左右框架间的链接。
<html>
<head>
<title>框架链接的变化</title>
</head>
<frameset cols="182,*">
<frame name="contents" src=../chap2/ch2-35-1.htm>
<frame name="main" src=../chap2/ch2-24.htm>
</frameset>
</html>
其中ch2-35-1.htm文件内容为：
<html>
<head>
<title>简单的超级链接</title>
<base target="main">
</head>
<body>
<p><a href="../pic/cat22.gif" target="main">图片显示在右框架窗口中</a>
<p><a href="../pic/cat19.gif" target="_self">文件显示在 (_self) 当前框架中</a>
<p><a href="../pic/cat19.gif" target="_top">图片显示在 (top) 整个浏览器窗口</a>
<p><a href="../pic/cat18.gif" target="_parent">图片显示在 (_parent) 父框架中</a>
<p><a href="../pic/cat22.gif" target="_blank">图片显示在 (_blank) 新的页面窗口中</a>
</body>
</html>
例2-36 上下框架间的链接。
<html>
<head>
<title>垂直分割</title>
</head>
<frameset rows=30%,70%>
<frame name="top" src=../chap2/ch2-16-0.htm>
<frame name="bottom" src=../chap2/ch2-27.htm scrolling="auto">
</frameset>
</html>
2-16-0.htm文件
<html>
<head>
<title>练习超链接</title>
</head>
<body>
<A name="2-16"></A>
<h2 align=center>水果大餐</h2>
<A href=..\chap2\lx1-1.htm target="bottom">【苹果】
</A>      
<A href=..\pic\t2.gif target=_blank>【西红柿】</A>
       
<A href=..\pic\t3.gif target=_self >【香蕉】</A>  
     
<A href=..\pic\t4.gif target=_top>【胡萝卜】</A>  
     
<A href=..\pic\t5.gif target=_parent>【鸭梨】</A>  
 
<p>
</body>
</html>
2.9 自动刷新页面
语法：
<meta http-equiv=Refresh content=秒数；url=新页面>
例2-37 自动刷新页面。
<html>
<head>
<title>自动刷新页面</title>
<META http-equiv="Refresh" content=5;url=../chap2/ch2-24.htm>
</head>
<body>
<font size=5 color=blue ><img src=../pic/07.gif>这是个自动刷新的页面, 5秒后自动跳到另一页面!</font>
</body>
</html>
2.10 层叠样式表（CSS）
CSS就是一种叫作样式表（Stylesheet）的技术，也有人称之为层叠样式表（Cascading StyleSheet）。
例2-38 CSS简单应用。
<html> <head> <style type="text/css"> <!-- h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC} h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66} -->
</style> </head> <body> <h2>你好！朋友，欢迎光临ASP的教学区。</h2> <h1>Hello，everybody，welcome in ASP!</h1> </body> </html>
要使超链接的文字不出现下划线：
<style type="text/css"> <!-- a:link { text-decoration: none} a:active { text-decoration: none } a:visited { text-decoration: none } --> </style>
例2-39 修改例2-36，使超链接的文字不出现下划线。
<html>
<head>
<title>练习超链接</title>
<style type="text/css">
<!--
a:link { text-decoration: none}
a:active { text-decoration: blink }
a:visited { text-decoration: none }
-->
</style>
?
</head>
<body>
<A name="2-16"></A>
<h2 align=center>水果大餐</h2>
<A href=..\chap2\lx1-1.htm>【苹果】</A>      
<A href=..\pic\t2.gif>【西红柿】</A>        
<A href=..\pic\t3.gif>【香蕉】</A>        
<A href=..\pic\t4.gif>【胡萝卜】</A>        
<A href=..\pic\t5.gif>【鸭梨】</A>    
<center>
<img src=../pic/t-02.jpg>
</center>
<p>
<A href=#2-16>rc</A>
</body>
</html>
: 科技
