表格、表单和框架基础知识讲义.pptVIP

第2章 表格、表单和框架 第一页，共十八页。 掌握表格标签的结构组成及使用 掌握表格常用属性的设置 了解表格的嵌套 掌握表格的使用技巧 掌握表单的基本结构组成 掌握常用表单域的使用 掌握常用表单按钮的使用 掌握框架的结构组成及使用 目标 * 第二页，共十八页。 表格 表格标签的基本结构： table标签来创建表格，table标签内包含了表名和表格本身内容的代码。 tr表示行，行由若干单元格构成。 td标签定义了一个单元格，嵌套于tr标签之中。 多个单元格结合在一起构成了行，多个行结合在一起就构成了一个表格。 示例：2.D.1 TableEG1.html 表格是网页制作中使用最多的技术之一。表格可以清晰直观的展现数据之间的关系。 table tr td单元格内容/td td单元格内容/td !-- 更多单元格 -- /tr !-- 更多行 -- /table * 第三页，共十八页。 表格相关标签 HTML中有10个与表格相关的标签 table标签：定义一个表格。 caption标签：定义一个表格标题，必须紧随table标签之后，且每个表格只能包含一个标题，通常这个标题会居中显示于表格上部。 th标签：定义表格内的表头单元格。th元素内部的文本通常会呈现为粗体。 tr标签：在表格中定义一行。 td标签：定义表格中的一个单元格，包含在tr标签中。 thead标签：定义表格的表头。 tbody标签：定义一段表格主体（正文），使用tbody标签，可以将表格中的一行或几行合成一组，从而将表格分为几个单独的部分，一个tbody标签就是表格中的一个独立的部分，不能从一个tbody跨越到另一个tbody中。 tfoot标签：定义表格的页脚（脚注）。 col标签：定义表格中针对一个或多个列的属性值。只能在表格或colgroup标签中使用此标签。 colgroup标签：定义表格列的分组。通过此标签可以对列进行组合以便进行格式化，此标签只能用在table标签内部。table标签来创建表格，table标签内包含了表名和表格本身内容的代码 示例：2.D.2 TableEG2.html * 第四页，共十八页。 表格属性 使用表格属性可以设置表格的外观 示例：2.D.3 TableEG3.html 表格属性 说明 border 设置表格边框 bgcolor 设置表格背景颜色 background 设置表格背景图片 width 表格的宽度，单位用像素或百分比 height 表格的高度，单位用像素或百分比 align 对齐方式，有left（左对齐）、right（右对齐）和center（居中对齐） cellspacing 设置单元格之间的距离 cellpadding 设置单元格内的内容与边框的距离 colspan 单元格水平合并，值为合并的单元格的数目 rowspan 单元格垂直合并，值为合并的单元格的数目 * 第五页，共十八页。 表单 表单由三部分组成： 表单标签 表单域 表单按钮 示例：代码2-1 FormEG.html HTML表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 * 第六页，共十八页。 表单标签 表单标签 表单标签（form/form）用于声明表单，定义采集数据的范围，同时包含了处理表单数据的应用程序以及数据提交到服务器的方法。 action：指定处理表单中用户输入数据的URL method：指定向服务器传递数据的HTTP方法，主要有Get和Post两种 方法，默认值是Get enctype：指定了数据发送时的编码类型 target：用于指定在浏览器中哪个frame中显示服务器的响应HTML form action=url method=get/post enctype=mime target=... ...... /form * 第七页，共十八页。 文本框和多行文本框 文本框 文本框是一种用来输入内容的表单对象，通常被用来填写简单的内容，如姓名、地址等。 语法格式如下： 多行文本框 多行文本框（文本域）是一种用来输入较长内容的表单对象。 语法格式如下： input type=text name=... size=... maxlength=... value=... / textarea name=... cols=... rows=... wrap=.../textarea * 第八页，共十八页。 密码框和隐藏框 密码框 密码框是一种用于输入密码的特殊文本域。当访问者输入文字时，文字会被星号或其它符号代替，从而隐藏输入的真实文字。 语法格式如下： 隐藏域 隐藏域是用来收集或发送信息的不可见元素