《课HTML语言》PPT课件.ppt

1、第2课 HTML语言介绍（二） 2.1 课前指导 2.2 课堂教学 2.3 上机练习 2.4 课后作业,2.1 课前指导 列表（LIST）通常用于列举相关的信息条目，提供一种有组织的易于浏览的阅览格式，以及用于描述一个分布的过程。 表格（TABLE）将文本和图片按行、列排列，它和列表一样，有利于表达信息。值得注意的是，表格往往在主页中用来建立主页的框架，使整个页面更规则地放置图片和空白，并使条目清晰。 框架（FRAMES）是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，每个区域显示一个HTML文件。利用框架结构可以在页面中同时浏览多个页面。,表单在HTML页面中起着重要作用，它是与用户

2、交互信息的主要手段。 一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交”按钮，所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。,2.2 课堂教学 2.2.1 列表标记 2.2.2 表格 2.2.3 框架 2.2.4 表单 2.2.5 特技 2.2.6 自动刷新页面 2.2.6 网页设计基本原则,2.2.1 列表标记 1. 无序列表标记 2. 有序列表标记 3. 定义列表标记 4. 列表的嵌套,1. 无序列表标记 无序列表中每一个表项的前面是

3、项目符号（如、等）。建立无序列表使用标记和表项标记。格式为： 第一个列表项 第二个列表项 ,说明： type属性指定每个表项左端的符号类型，取值有：disc（实心圆点）、circle（空心圆点）、square（方块） 在后指定符号的样式，可设定直到；在后指定符号的样式，可以设置从该起直到。 标记是单标记。即一个表项的开始，就是前一个表项的结束。 从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。,在浏览器中的显示效果。,【例2-1】无序列表应用示例。 无序列表 中国文学 中国古典文学 红楼梦 三国演义 水浒传 西游记 中

4、国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,2. 有序列表标记 通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式为： 表项1 表项2 说明： 属性type指定符号的类型见表2-1。,表2-1 属性type指定符号的类型, 在后指定符号的样式，可设定到表项指定新的符号。 在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。,在浏览器中的显示效果。,【例2-3】有序列表应用示例。 有序列表 中国文学 中国古典文学 红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城

5、 四世同堂 家.春.秋 编辑部的故事 ,3. 定义列表标记 用定义列表表示单词或语句，使之具有交互凹进的特点。定义列表使用标记、和。往往用于定义单词，用于定义语句。由定义的项目会自动换行左对齐，但项目之间没有空行。格式为： 定义单词1 单词1的说明 定义单词2 单词2的说明 与标记一样，、也为单标记。,4. 列表的嵌套 列表嵌套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。 【例2-4】无序列表中套无序列表。 无序列表中套无序列表 “无序列表中套无序列表”示例 中国古典文学 红楼梦 三国演义 水浒传 西游记 ,在浏览器中的显示效果

6、。,中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,在浏览器中的显示效果。,【例3-5】有序列表与无序列表的嵌套。 有序列表与无序列表的嵌套 有序列表与无序列表的嵌套示例 中国古典文学 红楼梦 三国演义 水浒传 西游记 中国近现代文学 阿Q正传 围城 四世同堂 家.春.秋 编辑部的故事 ,2.2.2 表格 1. 表格标记 2. 给表格加上标题 3. 跨多行、多列的表项,1. 表格标记 表格的标记为，行的标记为，表头的标记为,列的标记为。其中，是单标记，一行的结束是新一行的开始。表项内容写在后或与之间。则必须成对使用。格式为： 表头1表头2表头n 表项1表项2表项n 表项1

7、表项2表项n ,表2-2 标记的属性,说明： 在浏览器中显示时，标记的文字按粗体显示，属于“表头”，标记的文字按正常字体显示，属于表项。 表格的整体外观由标记的属性决定，见表2-2。, 也可以将表头标记加在第一列。 对于表格的宽度，如果为像素数，则为绝对宽度。如果为百分数，则为相对于浏览器窗口宽度的比例，也就是100%时表格宽等于窗口的宽度。不管是绝对宽度还是相对宽度，数值太小不足以显示表格中的内容时，会自动以最小的宽度显示。,在浏览器中的显示效果。,【例2-6】建立有框线和无框线简单表格。 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 0002常小雨88

8、8285 0006李 刚68.59079.3 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 0002常小雨888285 0006李 刚68.59079.3 ,表2-3 标记的属性,2. 给表格加上标题 用标记给表格加标题，其格式为： 标题 说明：标记应包含在标记之间，其属性说明见表2-3。,在浏览器中的显示效果。,【例2-7】给表格加上标题。 学生成绩统计表 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 学生成绩统计表 学号姓 名英语高等数学平均分数 0001黄德荣9298.595.3 学生成绩统计表 学号姓 名英语高等数学平均分数

9、0001黄德荣9298.595.3 ,3. 跨多行、多列的表项 使用、标记的colspan和rowspan属性，可以分别制作跨多列（合并列）和跨多行（合并行）的表格。 (1) 跨多列表项 跨多列表项的格式为： 表项 | 表项 | 表项 其中，x表示合并的列数。,(2) 跨多行表项 跨多行表项的格式为： 表项 | 表项 | 表项 其中，y表示合并的行数。 (3) 同时跨多列多行表项 在中同时使用colspan和rowspan属性可制作多重表头。格式为： 其中，rowspan设置表头跨过x行，colspan设置表头跨过y列。,在浏览器中的显示效果。,【例2-8】分别建立跨多列表项和跨多行表项的表格

10、。 计算机系 姓 名性别年龄 张大强男18 王永芳女17 计算机系姓 名性别年龄 张大强男 18 王永芳女 17 ,在浏览器中的显示效果。,【例2-9】建立多重表头的表格。 成绩 学生成绩表 学号姓名成绩 英语高等数学总分数 0001黄德荣8093173 0002王丽蓉90100190 0003赵晓丽7286158 0004白淑霞8692178 0005李萍萍9269161 ,2.2.3 框架 1. 框架标记 2. 框架属性 3. 框架间的链接,1. 框架标记 框架标记有两个：框架组标记和框架标记。用以划分框架，而每一框架由一个标记所标示，标记用来声明其中框架页面的内容，并且必须在范围中使用。

11、 所有框架标记需要放在一个起始的HTML文件中，这个文件只是用来声明框架的定义，记录了框架如何划分，以及框架的各种属性，不会显示任何资料。,框架的定义的基本语法为： (1) 框架组标记 标记用来定义一个框架组，其语法格式为： ,说明：框架组标记的属性及其说明见表2-4。,。,表2-4 框架组标记的属性及其说明,其中rows和cols属性的取值可以是像素数（x）、相对于浏览器窗口的百分比数（x%）和自动分配（x*）,(2) 框架标记 标记用于给各个框架指定页面的内容，也就是，它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，其语法格式为： 说明：框架标记的属性及其说明见表2-5。,表2

12、-5 框架标记的属性及其说明,其中框架名由字母开头，用下划线开头的名字无效。例如： ,标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。 注意，由于与标记的作用相同，所以在HTML文件中一般不能同时出现，否则会导致无法正常显示框架。,【例2-13】左右排列多个窗口。 左右排列多个窗口 在浏览器中显示效果。,【例2-14】上下排列多个窗口。 上下排列多个窗口 在浏览器中显示效果。,还可以建立纵横排列的多个框架，即框架的嵌套。 【例2-15】纵横排列的多个窗口。 纵横排列多个窗口 在浏览器中显示效果。,2.

13、 框架属性 框架的属性包括边框、颜色、滚动条等，这些属性使框架的外观发生变化，产生不同的艺术效果。 利用和标记都可以设置边框的外观，如大小、颜色以及有无边框等。两个标记所不同的是，标记设置的是整个框架各个边框的属性，而只能设置它所控制的框架。,3. 框架间的链接 在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 使用的target属性可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在target指定的框架内。target属性的值可以是框架名，其

14、语法格式为： 热点文本 ,表2-6 框架名的四种值,说明：框架名有四个特殊的值，分别实现4类特殊的操作。见表2-6。,【例2-16】框架间的链接。 起始文件2_16.htm文件的内容为：, 框架间的链接 ,其中2_16_0.htm文件 的内容为：, 第二章例题 第二章例题 【例2-1】 ,2.2.4 表单 表单最常用的功能是用来获取用户数据。 用HTML设计表单常用的标记是：、等标记。,表单标记 标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。基本语法如下： ,其中： action：用于设定处理表单数据程序url的地址，例如采用电子邮件方式时，用action=“mail

15、to:”。 method：指定数据传送到服务器的方式，有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时，则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。,name：用于设定表单的名称。 onreset和onsubmit：主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。 target：指定输入数据结果显示在那个窗口，这需要与标记配合使用。,2) 表单输入标记 此标记在表单中使用频繁，大部分表单内容需要用到此标记。语

16、法如下： ,其中： align：用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠 上(top），还是靠底（bottom）。 name：设定当前变量名称。,type决定输入数据的类型。其选项较多，各项的意义是： text：表示输入单行文本； password:表示输入数据为密码，用星号表示； checkbox：表示复选框； radio：表示单选框； submit：表示提交按钮，数据将被送到服务器； reset：表示清除表单数据，以便重新输入； file：表示插入一个文件； hidden：表示隐藏按钮； image：表示插入一个图像； button：表示普通按钮；

17、,value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值； src：是针对type=image的情况来说的，设定图像文件的地址； checked：表示选择框中，此项被默认选中； maxlength：表示在输入单行文本的时候，最大输入字符个数； size：用于设定单行文本框的显示空间的大小； onclick：表示在按下输入时调用指定的子程序； onselect：表示当前项被选择时调用指定的子程序。,3) 下拉菜单标记 用标记可以在表间中插入一个下拉菜单，它需与标记联用，因为下拉菜单中的每个选项要用标记来定义。标记的语法如下： ,其中： name：设定下拉式菜单的名称； size：设

18、定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=1）； multiple：设定为可以进行多选。,4) 选项标记 该标记为下拉菜单中一个选项，语法： 其中： selected：表示当前项被默认选中； value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。,下拉列表框举例： 年龄 1825 18 2535 3545 ,5) 多行文本输入标记 这是一个建立多行文本输入框的专用标记，其语法如下： 其中： name：文本框名称； cols：宽度；,rows：高度（行数）； wrap：换行控制； off：不自动换行； hard：自动硬回车换行，换行标记一同被传送

19、到服务器中去； soft：自动软回车换行，换行标记不会传送到服务器中去。 表单所涉及的标记较多，参数也较复杂，而在实际制作表单时就是这些标记的组合应用。一般的表单不可能涉及所有参数，选择参数时尽量用默认值，不设定一个不用的参数。,2.2.5 特技 利用HTML中的特殊标记，可以实现简单的特技，如会移动的文字。 (1)语法 例如： 从右向左移动的文字,(2)属性 （a）方向 #=left, right 例如： 从右向左移！ 从左向右移！,（b）方式 #=scroll, slide, alternate 例如： 一圈一圈绕着走！ 只走一次！ 来回走！,（c）循环 #=次数，若未指定则循环不止(in

20、finite) 例如： 只走3趟！ 我只走3趟！ 我只走3趟！,（d）延时 以毫秒为单位在字幕设置开始移动前的延迟时间。 （e）移动速度 设置字幕文本移动的增量像素值。 例如： 走一步，停一停！ 我走得好快哟！,（3）外观设置 （a）对齐方式(Align)： #=top, middle, bottom 为对齐上沿、中间、下沿。 例如： 我会移动啦！ ,（b）底色 例如： 我会移动啦！ （c）背景面积 例如： 我会移动啦,（d）空白 例如： 啦啦啦，我会移动耶！大家好！,2.2.6 自动刷新页面 自动刷新页面就是页面停留几秒钟后自动指向新网页。其格式为： 说明： 标记必须放置在.中； http-equiv属性值设置为“Refresh”时，要求显示URL制定的文件； content属性包含两个值：秒数和URL