第3课__HTML语言介绍(二)

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. 无序列表标记 无序列表中每一个表项的前面是项目符号（如、等）。建立无序列表使用标记和表项标记。格式为： 第一个列表项 第二个列表项 ,说明： type属性指定每个表项左端的符号类型，取值有：disc（实心圆点）、circle（空心圆点）、square（方块） 在后指定符号的样式，可设定直到；在后指定符号的样式，可以设置从该起直到。 标记是单标记。即一个表项的开始，就是前一个表项的结束。 从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。,【例3-1】无序列表应用示例。, 无序列表 中国文学 中国古典文学 红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,2. 菜单列表标记 菜单列表比无序列表更紧凑，它往往用于列出几个相关网页的索引，以便通过超链接来很快选取感兴趣的内容。它用标记替代，并引入来定义菜单列表的标题。格式为： 菜单列表的标题 第一个列表项 第二个列表项 菜单列表的标题 第一个列表项 第二个列表项 ,在浏览器中显示时，除定义的标题前没有项目符号外，其他与定义的列表项相同。 【例3-2】在例3-1中使用菜单列表。, 菜单列表 中国文学 中国古典文学红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,3. 有序列表标记 通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式为： 表项1 表项2 说明： 属性type指定符号的类型见表3-1。,表3-1 属性type指定符号的类型, 在后指定符号的样式，可设定到表项指定新的符号。 在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。,【例3-3】有序列表应用示例。, 有序列表 中国文学 中国古典文学 红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,4. 定义列表标记 用定义列表表示单词或语句，使之具有交互凹进的特点。定义列表使用标记、和。往往用于定义单词，用于定义语句。由定义的项目会自动换行左对齐，但项目之间没有空行。格式为： 定义单词1 单词1的说明 定义单词2 单词2的说明 与标记一样，、也为单标记。,5. 列表的嵌套 列表嵌套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。 【例3-4】无序列表中套无序列表。, 无序列表中套无序列表 “无序列表中套无序列表”示例 中国古典文学 红楼梦 三国演义 水浒传 西游记 ,中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,【例3-5】有序列表与无序列表的嵌套。, 有序列表与无序列表的嵌套 有序列表与无序列表的嵌套示例 中国古典文学 红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,3.2.2 表格 1. 表格标记 2. 给表格加上标题 3. 跨多行、多列的表项 4. 表格的分组显示 5. 对齐表项,1. 表格标记 表格的标记为，行的标记为，表项的标记为。其中，是单标记，一行的结束是新一行的开始。表项内容写在后或与之间。则必须成对使用。格式为： 表头1表头2表头n 表项1表项2表项n 表项1表项2表项n ,说明： 在浏览器中显示时，标记的文字按粗体显示，属于“表头”，标记的文字按正常字体显示，属于表项。 表格的整体外观由标记的属性决定，见表3-2。,表3-2 标记的属性, 也可以将表头标记加在第一列。 对于表格的宽度，如果为像素数，则为绝对宽度。如果为百分数%，则为相对于浏览器窗口宽度的比例，也就是100%时表格宽等于窗口的宽度。不管是绝对宽度还是相对宽度，数值太小不足以显示表格中的内容时，会自动以最小的宽度显示。,【例3-6】建立有框线和无框线简单表格。, 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 0002常小雨888285 0006李 刚68.59079.3 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 0002常小雨888285 0006李 刚68.59079.3 ,在浏览器中的显示效果。,2. 给表格加上标题 用标记给表格加标题，其格式为： 标题 说明：标记应包含在标记之间，其属性说明见表3-3。,表3-3 标记的属性,【例3-7】给表格加上标题。, 学生成绩统计表 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 ,在浏览器中的显示效果。,3. 跨多行、多列的表项 使用、标记的colspan和rowspan属性，可以分别制作跨多列（合并列）和跨多行（合并行）的表格。 (1) 跨多列表项 跨多列表项的格式为： 表项 | 表项 | 表项 其中，x表示合并的列数。,(2) 跨多行表项 跨多行表项的格式为： 表项 | 表项 | 表项 其中，y表示合并的行数。 (3) 同时跨多列多行表项 在中同时使用colspan和rowspan属性可制作多重表头。格式为： 其中，rowspan设置表头跨过x行，colspan设置表头跨过y列。,【例3-8】分别建立跨多列表项和跨多行表项的表格。, 计算机系 姓 名性别年龄 张大强男18 王永芳女17 计算机系姓 名性别年龄 张大强男 18 王永芳女 17 ,在浏览器中的显示效果。,【例3-9】建立多重表头的表格。, 成绩 学生成绩表 学号姓名成绩 英语高等数学总分数 0001黄德荣8093173 0002王丽蓉90100190 0003赵晓丽7286158 0004白淑霞8692178 0005李萍萍9269161 ,在浏览器中的显示效果。,4. 表格的分组显示 复杂表格是对表格的行、列、表项的对齐方式进行设置。 (1) 按行分组 表格的行从上到下可以分为表头、表体和表尾。分别使用标记、来定义。这种定义方法不但可以实现设置表头，而且可以将表格的行分组。,格式为： 题头 表尾 表体1 表体n 可以定义多个表体部分，每个部分定义多行信息，每行的格式与一般表格中的一样，在同一个中，所有各行的列数必须相同。、标记可以是单标记。 在浏览器中显示时，表头、表尾以及各个表体之间都用边框来分隔。,【例3-10】按行分组制作表格。, 学 号姓 名性 别年 龄 0001 王霞女17 0002 张丽女16 ,在浏览器中的显示效果。,(2) 按列分组 用列组标记和列标记，可以改变列的一些性质，如列的宽度等。其格式为： 说明： 使用标记可设定列组中的列数以及各列的属性，标记可以设定一列的属性，它可以放在中使用，也可单独用于定义列组以外列的属性，但它不能构造列组。 span的值x大于0，表示从左数起，指定列组（或所含列）的列数，缺省为1列。width的值y表示该列组各列的宽度，可以为像素数、%数（占整个表格的百分比）或n*（自动分配，为当前列的1/n）。,【例3-11】按列分组制作表格，设置列宽。, 学生 学生名单 姓名性别年龄 王慧女20 李洪男21 学生名单 学号姓名性别年龄 0001李萍女17 0002张勇男18 ,在浏览器中的显示效果。,5. 对齐表项 在缺省下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。 (1) 水平对齐的方式是用标记、和的align属性。align的属性值分别为：center（居中）、left（左对齐）、right（右对齐）和justify（左右调整）。 (2) 垂直对齐的方式则是使用valign属性，valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）和baseline（同行单元数据项位置一致）。,【例3-12】调整表格中数据的位置。, 学生名单 学生名单表 学号姓名性别年龄 0001李 萍女17 0002张 勇男18 ,在浏览器中的显示效果。,3.2.3 框架 1. 框架标记 2. 框架属性 3. 框架间的链接,1. 框架标记 框架标记有两个：框架组标记和框架标记。用以划分框架，而每一框架由一个标记所标示，标记用来声明其中框架页面的内容，并且必须在范围中使用。 所有框架标记需要放在一个起始的HTML文件中，这个文件只是用来声明框架的定义，记录了框架如何划分，以及框架的各种属性，不会显示任何资料。,框架的定义的基本语法为： (1) 框架组标记 标记用来定义一个框架组，其语法格式为： ,说明：框架组标记的属性及其说明见表3-4。,其中rows和cols属性的取值可以是像素数（x）、相对于浏览器窗口的百分比数（x%）和自动分配（x*）。,表3-4 框架组标记的属性及其说明,(2) 框架标记 标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，其语法格式为： 说明：框架标记的属性及其说明见表3-5。,表3-5 框架标记的属性及其说明,其中框架名由字母开头，用下划线开头的名字无效。例如： ,标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。 注意，由于与标记的作用相同，所以在HTML文件中一般不能同时出现，否则会导致无法正常显示框架。,【例3-13】左右排列多个窗口。本例中用到的html文件是本章前面建立的例题。 左右排列多个窗口 在浏览器中显示效果。,【例3-14】上下排列多个窗口。 上下排列多个窗口 在浏览器中显示效果。,还可以建立纵横排列的多个框架，即框架的嵌套。 【例3-15】纵横排列的多个窗口。 纵横排列多个窗口 在浏览器中显示效果。,2. 框架属性 框架的属性包括边框、颜色、滚动条等，这些属性使框架的外观发生变化，产生不同的艺术效果。 利用和标记都可以设置边框的外观，如大小、颜色以及有无边框等。两个标记所不同的是，标记设置的是整个框架各个边框的属性，而只能设置它所控制的框架。,3. 框架间的链接 在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 使用的target属性可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在target指定的框架内。target属性的值可以是框架名，其语法格式为： 热点文本 ,说明：框架名有四个特殊的值，分别实现4类特殊的操作。见表3-6。,表3-6 框架名的四种值,【例3-16】框架间的链接。 起始文件3_16.htm文件的内容为：, 框架间的链接 ,其中3_16_0.htm文件的内容为：, 第二章例题 第二章例题 【例2-1】 ,3_16_1.htm文件的内容为：, 第二章例题 执行 ,其他文件的编写参见第二章。在浏览器中显示效果。,3.2.4 自动刷新页面 自动刷新页面就是页面停留几秒钟后自动指向新网页。其格式为： 说明： 标记必须放置在.中； http-equiv属性值设置为“Re