WEB 第二章.ppt

第2章 表格、表单和框架 内 容 提 要 使用HTML，可以设计更复杂的网页元素，例如表格、表单以及框架等。 表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局。 表单是控件的容器，客户端提交给服务器端的信息通常放置在控件里，是设计网页必不可少的元素。 框架可以将网页内容有效地进行划分，使不同的区域显示不同的内容。 2.1 表格 一个完整的表格由一对 标签来定义。 每个表格均有若干个单元行（由一对 标签定义）组成。 每个单元行由若干个单元格（由一对 标签定义）组成。 表格内的具体信息放置在单元格中。 单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。 单元格内容 单元格内容 … … 标签的常用属性如表所示。 从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用 、 、 标签来表示。 表头和表尾一张表格只能有一个，而一张表格可以有多个主体。 对于大型的表格来说，应该使 出现在 的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外， 、 、 标签内部都必须使用 标签。 使用 、 、 对表格进行结构划分的好处是可以先显示 的内容，而不必等整个表格下载完成后才能显示。 无论 、 、 的顺序如何改变， 的内容总是在表的最前面， 的内容总是在表的最后面。 table1.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd meta http-equiv Content-Type content text/html; charset UTF-8 表格使用示例1-规则表格 table border 1 align center 学生信息表 学号 姓名 性别 td colspan 3 align center 这里是表尾 0001 王明明 男 … table1.html的显示结果如图所示。 与表格相关的元素或标签如表所示。 对于不规则的单元格来说，有的单元格需要跨越多行或跨越多列， 以及 标签有colspan和rowspan两个属性。 colspan指当前单元格水平方向跨越的单元格数，值为一正整数，代表此单元格水平延伸的单元格数，或跨越的列数。 rowspan指的是当前单元格垂直方向跨越的单元格，值为一正整数，代表此单元格垂直延伸的单元格数，或跨行数。 table3.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd meta http-equiv Content-Type content text/html; charset UTF-8 表格使用示例3-不规则表格 table border 2 width 300 bordercolorlight #FF9600 bordercolordark #FF00EE cellpadding 0 cellspacing 0 1 td rowspan 3 此单元格跨三行 2 3 4 5 6 7 td colspan 2 此单元格跨两列 table3.html的显示结果如图所示。 2.2 表单 表单是一个容器，用来收集客户端要提交到服务器端的信息。 客户端将信息填写在表单中的控件中。当单击表单中的提交按钮时，表单中包含的控件的信息就会被提交给表单的action属性所指定的处理程序。 表单的使用非常广泛，是网页上用于输入信息的区域，例如向文本框中输入文字，在选项框里进行选择等。 从表单的设计到服务器返回处理结果的流程包括： 通过表单控件来设计表单； 通过浏览器将表单呈现给客户端； 客户端填写相关的信息，并单击表单中的提交按钮，将表单提交给处理程序； 服务器处理完表单后，将生成的结果返回给客户端浏览器； 1． 标签 在HTML中使用一对 标签来设计表单，其格式如下： form name “…” action “…” method “post/get” target “…” enctype “…” onsubmit “…” onreset “…” accept “…” accept-charset “…” 表单中包含的控件或文字 其中： name 指的是表单的名字。 action 指的是处理表单或者接收表单信息的url。 method 指的是表单提交的方法，默认值为get。 target 指的是目标窗口。 enctype 属性可选，指的是提交数据的格式，可以指定客户端提交到服务器端的数据的编码类型。 onsubmit 指的是表单提交时调用的脚本语句或函数。 onreset 指的是表单重