1、使用表格和表单,第四章,2,用 HTML 代码创建表格 创建表单 使用框架,目标,3,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,4,使用表格姓名性别分数RobertM80.,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,5,学员档案信息姓名性别分数RobertM80.,表格的标题,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,6,学员档案信息姓名性别分数RobertM80.,表格的对齐方式
2、,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,7,合并单元格(跨列),创建表格 第一学期 第二学期数学科学英语数学科学英语989580958788 ,COLSPAN=“n” 属性表示跨多少列,8,合并单元格(跨行),创建表格螺母螺栓锤子第一季度 一月 2500 1000 1240二月 3000 2500 4000.,ROWSPAN=“n” 属性表示跨多少行,9,学员档案信息姓名性别分数RobertM80MaryF18,表格的背景色和尺寸设置,表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#F
3、F0000, 或是一些预定义色彩名称：red ，blue，yellow等。,表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。,10,表单输入元素-7,课堂练习:请编写HTML代码,11,表单,12,METHOD =“post或get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法: 一般为post或get方法, post方法比较安全,ACTION = “URL”,13,表单输入元素-1,文本框、按钮、单选按钮、复选框等都是输入元素。 ,14,表单输入元素-2,BUTTON（按
4、钮）,15,表单输入元素-3,身份证号,TEXT（文本）,密 码： ,请填写您的工作经历,16,表单输入元素-4,性别：男性 女性,单选按钮和复选框,你喜欢以下哪些明星： 酒井法子 郑秀文 BonJovi,17,HTML输入元素-5,2004 年欧锦赛 预测“最佳球员” Ronaldo Beckham Zidane 预测大赛亚军 巴西 法国 阿根廷 预测谁将成为 2004 年欧锦赛冠军？,阅读代码，请问网页中的显示结果？,18,表单输入元素-6,下拉菜单,谁是 2002 年世界杯冠军？西班牙 法国 巴西 德国 ,列表选项,19,表单输入元素-7,课堂练习:请编写HTML代码,20,框架,框架主
5、要用于把浏览器窗口分为若干个区域，每个区域可以分别显示不同的网页。 通过构建站内网页之间的相互关系，使用框架技术可以实现页面之间的导航，方便浏览者浏览。 框架的基本结构是由标记与标记组成的。 标记不可以包含在标记中，否则标记将无法正常使用。 一个页面文档中不能同时使用和标记。,21,左右分割窗口,使用cols属性，可以在水平方向将浏览器分割成多个窗口。 设置宽度值方式有两种：一种是整数设置，单位为像素；另一种则是页面的百分比。,22,上下分割窗口,使用rows属性，可以在竖直方向将浏览器分割成多个窗口。 设置宽度值方式有两种：一种是整数设置，单位为像素；另一种则是页面的百分比。,23,设置框架
6、的宽度和颜色,border属性设置框架的边框宽度Bordercolor设置框架的边框颜色 ,24,设置框架边框的显示,frameboder属性用于设置是否显示边框。frameborder属性： no/0 隐藏边框 yes/1 显示边框(默认值),25,设置框架内源文件的位置,此标记没有结束标记。 Src属性用于设置框架内HTML文档的位置。 Name属性用于指定框架的名称。为超链接时，可以通过此名称设置所链接页面的打开窗口。,26,设置框架的边距,设置框架窗口内显示的内容与上下、左右边框的距离。高度、宽度值为整数，使用的单位为像素。 Noresize属性禁止对框架窗口大小调整。,27,设置框架
7、窗口的滚动条,Scrolling属性用来设置框架内滚动条是否显示。Scrolling属性值： Yes 显示滚动条，即使内容没有超出框架也会显示滚动条，此时滚动条没有作用。 No 不显示滚动条，即使内容超出框架，也不会显示滚动条。 Auto 根据框架中的内容自动判断是否显示滚动条。,28,内嵌框架,内嵌框架运用内置框架的概念在标记中嵌入标记。标记可以创建一个内嵌框架，将其插入到网页的任意位置中。内嵌框架的大小不能调整。,29,设置内嵌框架内容和名称, Src属性可在内嵌框架内载入HTML文件。 Name属性可以设置内嵌框架的名称。,30,设置内嵌框架的对齐属性,利用align属性可设置框架在页面
8、中的对齐方式。Align属性 left center right,31,设置内嵌框架边框的显示,使用frameborder属性可以设置是否显示内嵌框架的边框。frameborder属性 0 隐藏边框 1 显示边框(默认值),32,设置内嵌框架的高、宽度,height属性可以设置内嵌框架的高度 width属性可以设置内嵌框架的宽度设置值的方式有两种：整数设置单位为像素；另一种是百分比。,33,设置内嵌框架的边距,在内嵌框架的窗口内设置显示内容与上下、左右边框的距离。该数值的设置值为整数，单位为像素。,34,设置内嵌框架窗口的滚动条,使用scrolling属性可以设置内嵌框架的滚动条是否显示。sc
9、rolling属性值 Yes 显示滚动条，即使内容没有超出框架也会显示滚动条，此时滚动条没有作用。 No 不显示滚动条，即使内容超出框架，也不会显示滚动条。 Auto 根据框架中的内容自动判断是否显示滚动条。,35,总结 4-1, 表格标题数据1 数据2 数据11 数据22,跨行的单元格： 数据11 跨列的单元格： 数据22 ,表格的一般语法：,36,总结 4-2, 文本框 密码框 文本域 单选按钮男性复选框酒井法子,表单的一般语法：,37,总结 4-3, 选项1 选项2 .,38,总结 4-4,框架,顶部窗口显示广告 top.htm,显示详细内容 main.htm,左侧窗口显示 导航链接 left.htm,
