项目二 HTML 结构标签的使用（课件）《电子商务网页设计与制作》（中国劳动保障出版社）

02 html 结构标签的使用 96 96 任务 1 制作计算机树形列表网页 任务 2 制作 3C 电子商务网站首页 97 项目二 html 结构标签的使用 97 制作计算机树形列表网页 任务 1 98 98 ● 1. 掌握 ul 无序列表标签、ol 有序列表标签和 dl 定义列表标签的用法。 ● 2. 掌握列表标签的嵌套用法。 99 项目二 html 结构标签的使用 99 本任务主要通过嵌套使用ul 无序列表标签来完成树形列表网页的制作，网页完成效果如图所示。 100 树形列表网页效果 项目二 html 结构标签的使用 100 101 步骤一： 新建 html 文件，在 body 标签中加入 <h4></h4>，并在 h4 标签中加入标题内容“我的电脑文件列表”，代码和网页效果如图所示。 加入标题标签网页 项目二 html 结构标签的使用 101 102 步骤二： 在标题标签下方加入无序列表标签 ul，这里注意，只需要一个列表项，所以只用写一组“<li></li>”，如图所示。 加入无序列表网页 项目二 html 结构标签的使用 102 103 步骤三： 在“ <li></li>”里“我的电脑”文字下方加入一组新的无序列表标签 ul，这里注意，需要写两个盘符列表项，所以写两组“<li></li>”，如图所示。 加入嵌套 ul 标签网页 1 项目二 html 结构标签的使用 103 104 步骤四： 在“本地磁盘（C:）”和“本地磁盘（D:）”文字的下方重复步骤三中的操作，这里注意，在“本地磁盘（C:）”下方的 ul 标签中加入两组“ <li></li>”，在“本地磁盘（D:）”下方的 ul标签中加入三组“<li></li>”，列表项中文字信息添加如图所示。 项目二 html 结构标签的使用 104 105 加入嵌套 ul 标签网页 2 项目二 html 结构标签的使用 105 106 步骤五： 保存文件后使用浏览器打开网页文件，网页效果如图所示。 树形列表网页效果 项目二 html 结构标签的使用 106 107 一、无序列表 无序列表是网页中最常见的列表，之所以称为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常以并列的形式呈现。定义无序列表的基本语法格式如下。 项目二 html 结构标签的使用 107 108 在上述语法中，<ul></ul> 用于定义无序列表，<li></li> 嵌套在 <ul></ul> 中，用于描述具体的列表项，每对 <ul></ul> 中至少包含一对 <li></li>。 下面通过一个案例来演示无序列表的应用，如图所示。 无序列表的应用 项目二 html 结构标签的使用 108 109 无序列表的 type 属性可以取不同的值，用于指定不同的列表项符号，见表。 无序列表的 type 属性值 项目二 html 结构标签的使用 109 110 二、有序列表 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列，例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下。 项目二 html 结构标签的使用 110 111 在上述语法中，<ol></ol> 用于定义有序列表，<li></li> 为具体的列表项，和无序列表类似，每对 <ol></ol> 中也至少包含一对 <li></li>。 下面通过一个案例来演示有序列表的应用，如图所示。 有序列表的应用 项目二 html 结构标签的使用 111 112 从上图中可以看出，有序列表默认的列表项为阿拉伯数字，并且按照 1、2、3…的顺序排列。 有序列表的 type 属性可以取不同的值，用于指定不同的排序编号，见表。 有序列表的 type 属性举例及说明 项目二 html 结构标签的使用 112 113 三、定义列表 定义列表常用于对术语或名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下。 项目二 html 结构标签的使用 113 114 在上面的语法中，<dl></dl> 用于指定定义列表，<dt></dt> 和 <dd></dd> 并列嵌入 <dl> </dl> 中，其中，<dt></dt> 用于指定列表项标题，<dd></dd> 用于指定列表项内容。一对<dt></dt> 可以对应多对 <dd></dd>。 下面通过一个案例来演示定义列表的应用，如图所示。 定义列表的应用 项目二 html 结构标签的使用 114 115 上图中定义了一个定义列表，其中 <dt></dt> 内为列表项标题“物联网”，其后紧跟着三对 <dd></dd>，为“物联网”列表项的具体内容。 运行上图中的代码，效果如图所示。 定义列表网页效果 项目二 html 结构标签的使用 115 制作 3C 电子商务网站首页 任务2 116 116 ● 1. 掌握表格的创建方法。 ● 2. 掌握 table 标签、tr 标签、td 标签、th 标签的用法。 ● 3. 熟练使用表格相关标签制作网页。 117 项目二 html 结构标签的使用 117 本任务主要通过使用表格相关标签的嵌套，来完成 3C 电子商务网站首页的制作，最终网页效果如图所示。 118 3C 电子商务网站首页效果 项目二 html 结构标签的使用 118 119 步骤一： 新建一个 html 文件，在 body 标签中创建一个宽度为 1 300 像素、边框为 1、单元格之间没有间距且内容居中的表格，表格 3 行 1 列，代码如图所示。 项目二 html 结构标签的使用 119 120 创建表格的基本结构 项目二 html 结构标签的使用 120 121 步骤二： 设置表格第一行 tr 标签的高度为 50 像素，背景颜色为蓝色，然后在表格中写入 5 组超链接 <a></a>，中间的空隙用空格标签“ &nbsp;”来填充，每组 a 标签中加入文字信息，文字信息统一通过 font 标签的 color 属性设置为白色“ white”，第一个文字信息“首页”通过size 属性值设置为“5”，使它的字体变大。代码如图所示，网页效果如图所示。 表格写入第一行代码后的网页效果 项目二 html 结构标签的使用 121 122 表格的第一行代码 项目二 html 结构标签的使用 122 123 步骤二： 设置表格的第二行即第二个 tr 标签，通过分析网页设计图可知需要在这一行的唯一列中嵌套一个 3 行 7 列的子表格，且子表格第一行需要跨 7 列，设置子表格第一行的高度为 50像素；第二行的第 1 列需要跨 2 行，设置高度为 250 个像素；第三行的高度也设置为 250 像素。代码如图 2-2-5 所示，网页效果如图所示。 表格的第二行代码 项目二 html 结构标签的使用 123 124 表格的第二行代码 表格写入第二行代码后的网页效果 项目二 html 结构标签的使用 124 125 步骤四： 表格的第三行即第三个 tr 标签，在其唯一列中放上一张图片，代码如图 所示。 表格的第三行代码 项目二 html 结构标签的使用 125 126 一、表格的创建 表格的开始是 <table>，结束是 </table>，即所有的表格内容都位于 <table></table> 之间。要想创建一个完整的表格，除了要有表格标签外，还需要有行标签 tr 和单元格标签 td。创建表格的具体语法格式如下 项目二 html 结构标签的使用 126 127 对上述语法的具体解释如下。 1. <table></table> 用于定义一个表格。 2. <tr></tr> 用于定义表格中的一行，必须嵌套在 <table></table> 中，在 <table></table>中一般包含多对 <tr></tr>。 3. <td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中，一对 <tr></tr> 中一般包含多对 <td></td>。 项目二 html 结构标签的使用 127 128 下面来举例创建一个表格，如图所示。 创建表格 项目二 html 结构标签的使用 128 129 创建表格 项目二 html 结构标签的使用 129 130 二、table 标签的属性 html 语言为 table 标签提供了一系列属性，用于控制表格的显示样式，见表。 table 标签的属性、含义及常用属性值 项目二 html 结构标签的使用 130 131 1. border 属性 在 table 标签中，border 属性会为每个单元格应用边框。如果 border 的属性值改变，那么单元格的边框就会改变。默认情况下 border 的属性值为 1，如果想去掉边框，则需设置border 的属性值为 0。 为了更好地理解 border 属性的用法，现将上图中 table 标签的 border 属性值设置为10，即将代码 <table border="1"> 更改为 <table border="10">。 项目二 html 结构标签的使用 131 132 保存 html 文件，刷新页面，效果如图所示。 从图可以看出，表格的外边框变宽了，内边框没有发生变化。其实，在出现的双线边框中，外边框为表格 table 的边框，内边框为单元格 td 的边框。也就是说，table 标签的border 属性值改变的是外边框宽度，内边框宽度仍然为 1 像素。 设置 border="10" 后的网页效果 项目二 html 结构标签的使用 132 133 2. cellspacing 属性 cellspacing 属性用于设置单元格与单元格之间的空白间距，默认值为 2 像素。现将上图中 table 标签的 cellspacing 属性值设置为 20，即将代码 <table border="1"> 更改为<table border="10" cellspacing="20">。 保存 html 文件，刷新页面，效果如图所示。 设置 cellspacing="20" 后的网页效果 项目二 html 结构标签的使用 133 134 3. cellpadding 属性 cellpadding 属性用于设置单元格内容与单元格边框之间的空白间距，默认为 1 像素。现将上图中的 table 标签应用 cellpadding="10"，即将代码 <table border="1"> 更改为 <table border="10" cellspacing="20" cellpadding="10">。 保存 html 文件，刷新页面，效果如图所示。 设置 cellpadding="10" 后的网页 项目二 html 结构标签的使用 134 135 4. width 与 height 属性 默认情况下，表格的宽度和高度都是靠其自身的内容来撑开的，如果想要更改表格的尺寸，就需要设置其宽度和高度的属性。下面对图中的表格设置宽度和高度，即将代码<table border="1"> 更改为： 项目二 html 结构标签的使用 135 136 设置表格的宽、高后网页效果 项目二 html 结构标签的使用 136 137 5. align 属性 align 属性用于设置表格在网页中的水平对齐方式，其可选属性值为 left、center、right。当对 table 标签应用 align 属性时，可以控制表格在页面中的水平对齐方式，但单元格中的内容不受 align 属性的影响。 6. bgcolor 属性 通过 table 标签中的 bgcolor 属性，可以为表格指定一个背景颜色。 项目二 html 结构标签的使用 137 138 7. background 属性 通过 table 标签中的 background 属性，可以为表格指定一个背景图像。 保存 html 文件，刷新页面，效果如图所示。 为表格添加背景图像后的网页效果 项目二 html 结构标签的使用 138 139 三、tr 标签的属性 前面已经介绍过了 table 标签的相关属性，通过对 table 标签应用各种属性，可以控制表格的整体显示样式。如果想单独设置表格中某一行的样式，就需要对 tr 标签应用属性，其属性、含义及属性值见表。 tr 标签的属性、含义及属性值 项目二 html 结构标签的使用 139 140 上表中列出了 tr 标签的常用属性，其中大部分属性与 table 标签的属性用法相同。下面通过图所示案例来演示 tr 标签的常用属性效果。 行标签 tr 的应用 项目二 html 结构标签的使用 140 141 行标签 tr 的应用 项目二 html 结构标签的使用 141 142 行标签 tr 的应用 项目二 html 结构标签的使用 142 143 作为初学者，学习 tr 标签的属性时需要注意以下几点。 1. tr 标签无宽度属性 width，其宽度取决于表格标签 table 的宽度。 2. 可以对 tr 标签应用 valign 属性，用于设置行中内容的垂直对齐方式。 3. 虽然可以对 tr 标签应用 background 属性，但是在 tr 标签中此属性存在兼容问题，建议不要使用此属性。 项目二 html 结构标签的使用 143 144 四、td 标签的属性 在网页制作过程中，通过为单元格标签 td 定义属性，可以单独对某一个单元格设置样式，具体见表。 td 标签的属性、含义及属性值 项目二 html 结构标签的使用 144 145 下面对 td 标签 colspan 属性和 rowspan 属性的用法做具体演示，如图所示。 td 标签 colspan 属性和 rowspan 属性的应用 项目二 html 结构标签的使用 145 146 td 标签 colspan 属性和 rowspan 属性的应用 项目二 html 结构标签的使用 146 147 td 标签 colspan 属性和 rowspan 属性的应用 项目二 html 结构标签的使用 147 148 五、th 标签及其属性 th 是 table heading 的简写，意为表格标题（也称表格表头）。th 标签与 td 标签的区别在于：th 标签的表头一般位于表格的第一行，且 th 标签控制的文本默认显示为粗体。 下面在上图的基础上对代码进行修改，用于演示 th 标签的使用方法，将第 10 ～ 15行代码更改如下。 项目二 html 结构标签的使用 148 149 保存 html 文件，刷新页面，效果如图所示。 从图中可看出，通过 th 标签定义的表头文本默认显示为粗体。 设置了表头的表格网页 项目二 html 结构标签的使用 149 150 六、font 标签的属性 html 语言为 font 标签提供了一系列属性，用于规定文本的字体、字体大小、字体颜色等，具体见表。 font 标签的属性、含义及属性值 项目二 html 结构标签的使用 150 151 上表中列出了 font 标签的常用属性，为了加深对这些属性的理解，下面通过一个案例来演示 tr 标签的常用属性效果，如图所示。 font 标签的常用属性 项目二 html 结构标签的使用 151 152 保存 html 文件，刷新页面，效果如图所示。 font 标签的常用属性效果 项目二 html 结构标签的使用 152 $$