第2章,表格、表单和框架,-2-,掌握表格标签的结构组成及使用 掌握表格常用属性的设置 了解表格的嵌套 掌握表格的使用技巧 掌握表单的基本结构组成 掌握常用表单域的使用 掌握常用表单按钮的使用 掌握框架的结构组成及使用,目标,-3-,表格,表格标签的基本结构： 标签来创建表格，标签内包含了表名和表格本身内容的代码。 表示行，行由若干单元格构成。 标签定义了一个单元格，嵌套于标签之中。 多个单元格结合在一起构成了行，多个行结合在一起就构成了一个表格。 示例：2.D.1 TableEG1.html,表格是网页制作中使用最多的技术之一。表格可以清晰直观的展现数据之间的关系。, 单元格内容 单元格内容 ,-4-,表格相关标签,HTML中有10个与表格相关的标签 标签：定义一个表格。 标签：定义一个表格标题，必须紧随table标签之后，且每个表格只能包含一个标题，通常这个标题会居中显示于表格上部。 标签：定义表格内的表头单元格。th元素内部的文本通常会呈现为粗体。 标签：在表格中定义一行。 标签：定义表格中的一个单元格，包含在标签中。 标签：定义表格的表头。 标签：定义一段表格主体（正文），使用标签，可以将表格中的一行或几行合成一组，从而将表格分为几个单独的部分，一个标签就是表格中的一个独立的部分，不能从一个跨越到另一个中。 标签：定义表格的页脚（脚注）。 标签：定义表格中针对一个或多个列的属性值。只能在表格或colgroup标签中使用此标签。 标签：定义表格列的分组。通过此标签可以对列进行组合以便进行格式化，此标签只能用在标签内部。标签来创建表格，标签内包含了表名和表格本身内容的代码 示例：2.D.2 TableEG2.html,-5-,表格属性,使用表格属性可以设置表格的外观 示例：2.D.3 TableEG3.html,-6-,表单,表单由三部分组成： 表单标签 表单域 表单按钮 示例：代码2-1 FormEG.html,HTML表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。,-7-,表单标签,表单标签 表单标签（）用于声明表单，定义采集数据的范围，同时包含了处理表单数据的应用程序以及数据提交到服务器的方法。 action：指定处理表单中用户输入数据的URL method：指定向服务器传递数据的HTTP方法，主要有Get和Post两种 方法，默认值是Get enctype：指定了数据发送时的编码类型 target：用于指定在浏览器中哪个frame中显示服务器的响应HTML, ,-8-,文本框和多行文本框,文本框 文本框是一种用来输入内容的表单对象，通常被用来填写简单的内容，如姓名、地址等。 语法格式如下： 多行文本框 多行文本框（文本域）是一种用来输入较长内容的表单对象。 语法格式如下：,-9-,密码框和隐藏框,密码框 密码框是一种用于输入密码的特殊文本域。当访问者输入文字时，文字会被星号或其它符号代替，从而隐藏输入的真实文字。 语法格式如下： 隐藏域 隐藏域是用来收集或发送信息的不可见元素，网页的访问者无法看到隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交。 语法格式如下：,-10-,复选框和单选框,复选框 复选框允许在待选项中选中一个以上的选项。每个复选框都是一个独立的元素。 语法格式如下： 单选框 单选框只允许访问者在待选项中选择唯一的一项。该控件用于一组相互排斥的值，组中每个单选按钮控件的名字相同，用户一次只能选择一个选项。 语法格式如下：,-11-,文件上传框、下拉选择框,文件上传框 文件上传框用于让用户上传自己的文件，文件上传框与其他文本域类似，但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 语法格式如下： 下拉选择框 下拉选择框可以让浏览者快速、方便、正确的选择一些选项，同时可以节省页面空间，它通过标签实现，该标签用于显示可供用户选择的下拉列表。 语法格式如下：, . . ,-12-,表单按钮,表单按钮主要分为：提交按钮 、复位按钮和普通按钮 提交按钮 提交按钮用来将输入的表单信息提交到服务器。 复位按钮 复位按钮用来重置表单。 普通按钮 普通按钮通常用来响应javascript事件（如onclick），用来调用相应的javascript函数来实现各种功能。 综合案例：2.D.4 register.html,-13-,框架,框架优点如下 ： 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，从而减少了数据的传输，加快了网页下载速度。 方便制作导航栏。 示例：, 标题 ,框架（Frame）就是浏览器窗口的一个区域，在这个区域中可以显示一个单独的页面，而不影响另一个框架中的显示内容 。,-14-,框架结构,基本结构 通过标签来定义如何划分框架，通过设置的“cols/rows”属性来确定的列/行数以及所占窗口的比例。 而每个引入的页面通过框架标签定义，的src属性用于设置所引用网页的路径。 frameset常用属性,cols和rows中值的个数对应要分割的的个数，即有几个值就有几个 。,-15-,使用框架,混合框架 可根据设计需要，混合使用和标签设置区域相互独立的复杂页面。 示例：2.D.5 HunHeFrame.html 导航框架 导航框架（导航栏）是在网页框架的中加入name属性，表示该的名称，然后通过超链接来标识URL，并用target指定的名称。 示例：2.D.6 NavFrameEG.html 内联框架 内联框架的本质是在一个页面中嵌入一个框架窗口来显示另一个页面的内容。内联框架使用标签来定义。 示例：2.D.7 NeiLianFrameEG.html,-16-,表格是HTML的高级控件之一。表格可以清晰明了的展现数据之间的关系，便于对比分析 HTML中与表格有关的10个标签是：、 表单由表单标签、表单域、表单按钮组成 创建表单最关键的是掌握三个要素即表单控件、action属性和method属性 向服务器传递数据的HTTP方法，主要有Get和Post两种方法，默认值是Get 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，用于采集用户输入或选择的数据 表单按钮主要分为三类：提交按钮、重置按钮和普通按钮 使用框架可以把浏览器窗口划分成多个相互独立的区域 HTML框架既可以横向分割也可以纵向分割 使用框架技术可以方便的实现页面导航功能,小结,谢 谢！,