复习
?上一节我们在熟悉了 HTML文档结构标
记的基础上，进一步学习了网页的文本
排版标记：对文本可以 设置字体, 颜 色,
大 小,设置标题、设置对齐方式、将其
换行、设置段落、设置文本滚动等，通
过合理设置各个标记的属性参数，从而
得到非常漂亮的文字外观效果。
大家一起来回顾 ……
?我们使用对文本进行排版的 HTML标记
来灵活控制网页文本得到非常漂亮的外
观，但是对于文本具体显示在哪，就不
是很好控制（上次课就有同学提出问题：
想把两个段落并列显示，行吗？） -----
怎么办？
?网页上只有文字太单调了，怎么插入图
片实现图文并茂呢？
?上次课有同学完成了两个网页，想建立
这两个网页的联系，如何实现呢？
下面我们将要学习的内容就可以
解决这些问题！
提出问题：
第三讲,HTML标记第三部分
主要内容：
一、介绍表格标记
二、举例说明使用表格标记创建网页表格
三、介绍插入图片标记
四、介绍超级链接标记
五、小结
六、作业
要解决第一个问题，最好、最快、最简
单的办法是使用表格。
说起表格，相信大家都不陌生，用表格
来表现内容有突出的优点：
1、表格是所有编辑方式中最简单灵活的。
2、表格表现内容直观明了、整齐漂亮。
所以，在许多优秀的网页设计中大量巧
妙地应用表格设计。表格已成为对文本
和图形进行布局的强有力的工具。
掌握好表格的应用，对设计网页有很大
的帮助。
1,TABLE标记
标记的格式：
<table >
定义表格的行列及内容
</table>
标记说明,TABLE标记标志着一个表格的
开始和结束，表格的所有定义都包含在
这对标记之间。该标记有一些参数，用
于定义整个表的位置、背景、边框等。
如 align,background,bgcolor,border,
cellpadding,cellspacing,width,height等。
一、表格标记
参数说明,border设置表格的边界宽度,
单位为像素，如果设置次参数为,0”时，
则表格不显示边界； cellpadding 设置单
元格内容到边界的距离，单位为像；
cellspacing 设置单元格与单元格之间的
距离,单位为像素； width 设置整个表格
的宽度,默认情况下单位为像素，也可
以使用百分比单位（百分比是表格宽度
和浏览器显示宽度的百分比）； height
设置整个表格的高度,默认情况下单位
为像素，也可以使用百分比单位。
2,CAPTION标记
标记的格式：
<caption >
定义表格的标题内容
</caption>
标记说明,CAPTION标记是专门设置表格的标
题内容及表格标题的位置，可以由 align属性
来设置,其位置分别有表格的上方和表格的下
方。 设置标题位于表格的上（下）方的格式
为,<caption align=top> …</caption>
<caption align=bottom> …</caption>
表格标记
3,TH标记
标记的格式：
<th >
表头内容
</th>
标记说明,TH标记表明了表格的表头开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
商品 电脑 手机
价格 8000 2500
表头
内容
4,TR标记
标记的格式：
<tr >
第 n行 ….
</tr>
标记说明,TR标记表明了表格的一行开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
5,TD标记
标记的格式：
<td >
表格单元的内容
</td>
标记说明,TD标记指定表格单元的内容，
表格的行标记 TR应该在 TD标记之前，
换句话说，这对 TD标记是放在 TR标记
之间。
表格标记
定义表格：需要将这几个表格标记组合起来使用，
才能完成一个完整的表格。 下面的代码设置了
一个两行三列的表格。
<html>
<head>
<title>表格 </title>
</head>
<body bgcolor=yellow>
<table align=center width=“268” height=“191” border=“5”
cellpadding=“2” cellspacing=“2”>
<caption align=top>表格标题 </caption>
二、表格标记举例说明
<tr>
<th>表头 </th><td width=“120”>第一行第二列 </td>
<td width=“120”>第一行第三列 </td>
</tr>
<tr>
<th>表头 </th> <td width=“120”>第二行第二列 </td>
<td width=“120”>第二行第三列 </td>
</tr>
</table>
</body>
</html>
1,IMG标记
标记的格式：
<img src=“URL” align=“对齐方式” >
标记说明,IMG标记表示插入一个图像。该标
记一定要和 src一起使用，用 src参数告诉要插
入的图像的地址和文件名。
提示,如果要插入的图像文件与页面同在一个
文件夹中，此时路径名可以省略，只需输入
图像的文件名；如果不同在一个文件夹内，
路径名不能省略。
三、插入图片标记
2,A标记
标记的格式：
<a href=“URL” > 超级链接文本内容或图像 </a>
标记说明,A标记表示建立一个链接。该标记一定
要和 href一起使用，用 href参数告诉要链接的文
件的地址和文件名。
提示,如果要链接的文件与设计的页面同在一个
文件夹中，此时路径名可以省略，只需输入链接
的文件名；如果不同在一个文件夹内，路径名不
能省略。
四、超级链接标记
五、本节小结
本节介绍了第三部分的 HTML标记的表
格标记和其它标记。
要求：
1、熟练掌握 HTML表格标记的功能、熟
练使用表格标记创建各种不同类型的
表格。
2、熟悉 HTML插入图片标记和超级连接
标记。 能熟练应用它们。
3、熟练使用学过的简单的 HTML标记编
写网页。
六、作业
1、上机操作：用我们学过的超文本标
识语言编写 3个网页。它包括文本
（要有滚动的字幕）、图文并茂、表
格等内容。并把这三个网页链接起来。
2、复习掌握今天的相关内容。
?上一节我们在熟悉了 HTML文档结构标
记的基础上，进一步学习了网页的文本
排版标记：对文本可以 设置字体, 颜 色,
大 小,设置标题、设置对齐方式、将其
换行、设置段落、设置文本滚动等，通
过合理设置各个标记的属性参数，从而
得到非常漂亮的文字外观效果。
大家一起来回顾 ……
?我们使用对文本进行排版的 HTML标记
来灵活控制网页文本得到非常漂亮的外
观，但是对于文本具体显示在哪，就不
是很好控制（上次课就有同学提出问题：
想把两个段落并列显示，行吗？） -----
怎么办？
?网页上只有文字太单调了，怎么插入图
片实现图文并茂呢？
?上次课有同学完成了两个网页，想建立
这两个网页的联系，如何实现呢？
下面我们将要学习的内容就可以
解决这些问题！
提出问题：
第三讲,HTML标记第三部分
主要内容：
一、介绍表格标记
二、举例说明使用表格标记创建网页表格
三、介绍插入图片标记
四、介绍超级链接标记
五、小结
六、作业
要解决第一个问题，最好、最快、最简
单的办法是使用表格。
说起表格，相信大家都不陌生，用表格
来表现内容有突出的优点：
1、表格是所有编辑方式中最简单灵活的。
2、表格表现内容直观明了、整齐漂亮。
所以，在许多优秀的网页设计中大量巧
妙地应用表格设计。表格已成为对文本
和图形进行布局的强有力的工具。
掌握好表格的应用，对设计网页有很大
的帮助。
1,TABLE标记
标记的格式：
<table >
定义表格的行列及内容
</table>
标记说明,TABLE标记标志着一个表格的
开始和结束，表格的所有定义都包含在
这对标记之间。该标记有一些参数，用
于定义整个表的位置、背景、边框等。
如 align,background,bgcolor,border,
cellpadding,cellspacing,width,height等。
一、表格标记
参数说明,border设置表格的边界宽度,
单位为像素，如果设置次参数为,0”时，
则表格不显示边界； cellpadding 设置单
元格内容到边界的距离，单位为像；
cellspacing 设置单元格与单元格之间的
距离,单位为像素； width 设置整个表格
的宽度,默认情况下单位为像素，也可
以使用百分比单位（百分比是表格宽度
和浏览器显示宽度的百分比）； height
设置整个表格的高度,默认情况下单位
为像素，也可以使用百分比单位。
2,CAPTION标记
标记的格式：
<caption >
定义表格的标题内容
</caption>
标记说明,CAPTION标记是专门设置表格的标
题内容及表格标题的位置，可以由 align属性
来设置,其位置分别有表格的上方和表格的下
方。 设置标题位于表格的上（下）方的格式
为,<caption align=top> …</caption>
<caption align=bottom> …</caption>
表格标记
3,TH标记
标记的格式：
<th >
表头内容
</th>
标记说明,TH标记表明了表格的表头开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
商品 电脑 手机
价格 8000 2500
表头
内容
4,TR标记
标记的格式：
<tr >
第 n行 ….
</tr>
标记说明,TR标记表明了表格的一行开始
和结束。该标记有一些参数：如 align,
background,bgcolor,等。
表格标记
5,TD标记
标记的格式：
<td >
表格单元的内容
</td>
标记说明,TD标记指定表格单元的内容，
表格的行标记 TR应该在 TD标记之前，
换句话说，这对 TD标记是放在 TR标记
之间。
表格标记
定义表格：需要将这几个表格标记组合起来使用，
才能完成一个完整的表格。 下面的代码设置了
一个两行三列的表格。
<html>
<head>
<title>表格 </title>
</head>
<body bgcolor=yellow>
<table align=center width=“268” height=“191” border=“5”
cellpadding=“2” cellspacing=“2”>
<caption align=top>表格标题 </caption>
二、表格标记举例说明
<tr>
<th>表头 </th><td width=“120”>第一行第二列 </td>
<td width=“120”>第一行第三列 </td>
</tr>
<tr>
<th>表头 </th> <td width=“120”>第二行第二列 </td>
<td width=“120”>第二行第三列 </td>
</tr>
</table>
</body>
</html>
1,IMG标记
标记的格式：
<img src=“URL” align=“对齐方式” >
标记说明,IMG标记表示插入一个图像。该标
记一定要和 src一起使用，用 src参数告诉要插
入的图像的地址和文件名。
提示,如果要插入的图像文件与页面同在一个
文件夹中，此时路径名可以省略，只需输入
图像的文件名；如果不同在一个文件夹内，
路径名不能省略。
三、插入图片标记
2,A标记
标记的格式：
<a href=“URL” > 超级链接文本内容或图像 </a>
标记说明,A标记表示建立一个链接。该标记一定
要和 href一起使用，用 href参数告诉要链接的文
件的地址和文件名。
提示,如果要链接的文件与设计的页面同在一个
文件夹中，此时路径名可以省略，只需输入链接
的文件名；如果不同在一个文件夹内，路径名不
能省略。
四、超级链接标记
五、本节小结
本节介绍了第三部分的 HTML标记的表
格标记和其它标记。
要求：
1、熟练掌握 HTML表格标记的功能、熟
练使用表格标记创建各种不同类型的
表格。
2、熟悉 HTML插入图片标记和超级连接
标记。 能熟练应用它们。
3、熟练使用学过的简单的 HTML标记编
写网页。
六、作业
1、上机操作：用我们学过的超文本标
识语言编写 3个网页。它包括文本
（要有滚动的字幕）、图文并茂、表
格等内容。并把这三个网页链接起来。
2、复习掌握今天的相关内容。
