《网页设计》课程教学资源（PPT课件讲稿）第三讲 HTML标记第三部分

复习 ◆上一节我们在熟悉了HTML文档结构标 记的基础上,进一步学习了网页的文本 排版标记:对文本可以设置字体、颜色 大小、设置标题、设置对齐方式、将其 换行、设置段落、设置文本滚动等,通 过合理设置各个标记的属性参数,从而 得到非常漂亮的文字外观效果 大家一起来回顾

复习  上一节我们在熟悉了HTML文档结构标 记的基础上，进一步学习了网页的文本 排版标记：对文本可以设置字体、颜色、 大小、设置标题、设置对齐方式、将其 换行、设置段落、设置文本滚动等，通 过合理设置各个标记的属性参数，从而 得到非常漂亮的文字外观效果。 大家一起来回顾……

提出问题: ◆我们使用对文本进行排版的HTML标记 来灵活控制网页文本得到非常漂亮的外 观,但是对于文本具体显示在哪,就不 是很好控制(上次课就有同学提出问题: 想把两个段落并列显示,行吗?) 怎么办? ◆网页上只有文字太单调了,怎么插入图 人片实现图文并茂呢? ◆上次课有同学完成了两个网页,想建立 这两个网页的联系,如何实现呢? 下面我们将要学习的内容就可以 解决这些问题!

 我们使用对文本进行排版的HTML标记 来灵活控制网页文本得到非常漂亮的外 观，但是对于文本具体显示在哪，就不 是很好控制（上次课就有同学提出问题： 想把两个段落并列显示，行吗？）----- 怎么办？  网页上只有文字太单调了，怎么插入图 片实现图文并茂呢？  上次课有同学完成了两个网页，想建立 这两个网页的联系，如何实现呢？ 下面我们将要学习的内容就可以 解决这些问题！ 提出问题：

第三讲:HTML标记第三部分 主要内容: 介绍表格标记 二、举例说明使用表格标记创建网页表格 介绍插入图片标记 多四、介绍超级链接标记 五、小结 六、作业

第三讲：HTML标记第三部分 主要内容： 一、介绍表格标记 二、举例说明使用表格标记创建网页表格 三、介绍插入图片标记 四、介绍超级链接标记 五、小结 六、作业

要解决第一个问题,最好、最快、最简 单的办法是使用表格。 说起表格,相信大家都不陌生,用表格 来表现内容有突出的优点: 表格是所有编辑方式中最简单灵活的 Y2、表格表现内容直观明了、整齐漂亮 所以,在许多优秀的网页设计中大量巧 类A妙地应用表格设计。表格已成为对文本 和图形进行布局的强有力的工具。 掌握好表格的应用,对设计网页有很大 的帮助

要解决第一个问题，最好、最快、最简 单的办法是使用表格。 说起表格，相信大家都不陌生，用表格 来表现内容有突出的优点： 1、表格是所有编辑方式中最简单灵活的。 2、表格表现内容直观明了、整齐漂亮。 所以，在许多优秀的网页设计中大量巧 妙地应用表格设计。表格已成为对文本 和图形进行布局的强有力的工具。 掌握好表格的应用，对设计网页有很大 的帮助

、表格标记 1、 TABLE标记 标记的格式: <table 定义表格的行列及内容 tabl 标记说明: TABLE标记标志着一个表格的 多人开始和结束,表格的所有定义都包含在 这对标记之间。该标记有一些参数,用 于定义整个表的位置、背景、边框等 align, background, bgcolor, border cellpadding, cellspacing, width, height等

1、TABLE标记 标记的格式： 定义表格的行列及内容 标记说明：TABLE标记标志着一个表格的 开始和结束，表格的所有定义都包含在 这对标记之间。该标记有一些参数，用 于定义整个表的位置、背景、边框等。 如align, background, bgcolor, border, cellpadding, cellspacing, width, height等。 一、表格标记

参数说明: border设置表格的边界宽度, 单位为像素,如果设置次参数为“0°时, 则表格不显示边界; cellpadding设置单 元格内容到边界的距离,单位为像; cellspacing设置单元格与单元格之间的 距离单位为像素; width设置整个表格 的宽度默认情况下单位为像素,也可 以使用百分比单位(百分比是表格宽度 和浏览器显示宽度的百分比); height 设置整个表格的高度,默认情况下单位 为像素,也可以使用百分比单位

参数说明： border设置表格的边界宽度, 单位为像素，如果设置次参数为“0”时， 则表格不显示边界；cellpadding 设置单 元格内容到边界的距离，单位为像； cellspacing 设置单元格与单元格之间的 距离,单位为像素；width 设置整个表格 的宽度, 默认情况下单位为像素，也可 以使用百分比单位（百分比是表格宽度 和浏览器显示宽度的百分比）；height 设置整个表格的高度, 默认情况下单位 为像素，也可以使用百分比单位

表格标记 2、 CAPTION标记 标记的格式: caption 定义表格的标题内容 标记说明: CAPTION标记是专门设置表格的标 题内容及表格标题的位置,可以由ag属性 来设置,其位置分别有表格的上方和表格的下 方。设置标题位于表格的上(下)方的格式 为:…

2、CAPTION标记 标记的格式： 定义表格的标题内容 标记说明： CAPTION标记是专门设置表格的标 题内容及表格标题的位置，可以由align属性 来设置,其位置分别有表格的上方和表格的下 方。 设置标题位于表格的上（下）方的格式 为： … … 表格标记

表格标记 3、TH标记 表头 内容 标记的格式: 商品电脑手机 表头内容 价格80002500 the 多八标记说明:TH标记表明了表格的表头开始 和结束。该标记有一些参数:如 lalign, background, bgcolor

3、TH标记 标记的格式： 表头内容 标记说明：TH标记表明了表格的表头开始 和结束。该标记有一些参数：如align, background, bgcolor, 等。 表格标记 商品 电脑 手机 价格 8000 2500 表头 内容

表格标记 4、TR标记 标记的格式: 第n行 多标记说明:TR标记表明了表格的一行开始 和结束。该标记有一些参数:如 lalign, background, bgcolor

4、TR标记 标记的格式： 第n行…. 标记说明：TR标记表明了表格的一行开始 和结束。该标记有一些参数：如align, background, bgcolor, 等。 表格标记

表格标记 5、TD标记 标记的格式: 表格单元的内容 </td 多标记说明:TD标记指定表格单元的内容, 表格的行标记TR应该在TD标记之前, 换句话说,这对TD标记是放在TR标记 之间

5、TD标记 标记的格式： 表格单元的内容 标记说明：TD标记指定表格单元的内容， 表格的行标记TR应该在TD标记之前， 换句话说，这对TD标记是放在TR标记 之间。 表格标记