HTML第三章 表格和表单 (2).ppt

《HTML第三章 表格和表单 (2).ppt》由会员分享，可在线阅读，更多相关《HTML第三章 表格和表单 (2).ppt（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 表格和表单表格和表单 第二章第二章第二章第二章2 2回顾 如何插入图片在网页中并设置它的宽度、高度和图片边框？如何插入图片在网页中并设置它的宽度、高度和图片边框？在什么地方会用到锚记超链接，如何使用？在什么地方会用到锚记超链接，如何使用？有序列表和无序列表分别是什么标签，列表项放在哪个标签里面？有序列表和无序列表分别是什么标签，列表项放在哪个标签里面？当一个页面中的内容比较多，有滚动条的时候。使用超链接的地方用href=“#目标名称”，在目标位置用name=“目标名称”来使用有序列表;无序列表;列表项放在里面3 3预习检查表格是哪个标签？行用哪个标签表示？列用哪个标签表示？rowspan和c

2、olspan属性分别表示什么？层是那个标签？表格:;行:;列:;rowspan表示单元格跨行;colspan表示单元格跨列；层：预习检查请列举表单中有哪些常用的表单元素？请列举表单中有哪些常用的表单元素？input标签用什么属性去控制元素的类型？标签用什么属性去控制元素的类型？让单选按钮和多选按钮选中需要用到哪个关键字让单选按钮和多选按钮选中需要用到哪个关键字？文本框，密码框，单选框，复选框，下拉框,提交按钮，重置按钮typechecked本章任务制作“用户注册”页面6 6了解表格的作用掌握表格的创建掌握表格布局的方法了解层的作用会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能

3、理解post和get两种提交方式的区别本章目标为什么使用表格表格应用场合论坛门户网站购物网站论坛中应用论坛中应用表格表格门户网站应门户网站应用表格用表格购物网站购物网站应用表格应用表格什么是表格行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像 表格的基本语法 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小 如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 什么是跨行跨列的表格跨跨3列列跨跨3行行下图中的表格哪里用了

4、跨行？哪里用了跨列？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列?跨多行的表格 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan=“n”属性表示跨多少行？属性表示跨多少行？手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔 打印打印 刻录刻录 如何创建跨行跨列的表格 如何设置对其方式 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的

5、对齐方式 小结1编写如下图所示效果对应的html代码第一行第一个第一行第一个格子跨了格子跨了2行行此格子此格子跨了跨了3列列什么是表格的美化修饰背景图片背景图片背景色背景色表格的高度表格的高度表格的宽度表格的宽度文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表用

6、来设置表格边框尺寸大小格边框尺寸大小bordercolor用来设用来设置表格边框颜色置表格边框颜色 如何设置背景 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表表示的一种颜色值，示的一种颜色值，RGB指的是红绿指的是红绿蓝蓝，下图就是，下图就是RGB颜色对照表颜色对照表。如何设置对齐方式 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕

7、打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式 为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边未填充的效果，字与单元格边框之间的距离靠得太近框之间的距离靠得太近 什么是填充属性和间距属性border(边框的厚度边框的厚度)内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何使用填充、间距属性border(边框的厚度边框的厚度)cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何设置表

8、格的填充属性 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 .cellspacing属性用来设属性用来设置表格内框宽度置表格内框宽度 cellpadding属性用来属性用来设置表格内填充距离设置表格内填充距离填充之后填充之后的效果的效果小结2表格的高度、宽表格的高度、宽度、背景图像、度、背景图像、边框和填充属性边框和填充属性行的背景色行的背景色单元格居单元格居中对齐中对齐编写如下图所示效果对应的HTML代码如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页

9、的内容进行整体控制容进行整体控制 如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 如何使用表格进行布局 超值变形金钢超值变形金钢2.5折折!人们为啥对电视吼叫人们为啥对电视吼叫 为什么要用到层2828应用了应用了DIV布局的布局的淘宝网主页淘宝网主页如何实现这样如何实现这样的页面布局？的页面布局？什么是层DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素层只有在CSS样式的配合下才能体现出它的作用2929#top,#bt background-color:#EEE000;#mid background-color:#9990

10、00;width:250px;#bt width:120px;第第1个个div标签中的内容标签中的内容第第2个个div标签中的内容标签中的内容第第3个个div标签中的内容标签中的内容层将在学习层将在学习CSS样式时详细介绍样式时详细介绍表单表单的典型应用表单的典型应用注册用户注册用户收集信息收集信息反馈信息反馈信息为网站提供搜索工具为网站提供搜索工具注册用户注册用户收集信息收集信息反馈信息反馈信息表单浏览者输入的数据提交到后台处理的数据提供搜提供搜索工具索工具表单包含的控件单行文本输入单行文本输入框框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(S

11、ELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)表单的结构 HTML页面表单表单子元素1表单子元素2表单子元素n表单页面的基本结构METHOD=“post或或get”ACTIONMETHOD指定提交后，由服务器指定提交后，由服务器上那个处理程序处理上那个处理程序处理指定向服务器提交的方法指定向服务器提交的方法:一般为一般为post或或get方法方法,post方法比较安全方法比较安全 ACTION=“URL”演示示例演示示例1 1：使用：使用 postpost提交方式提交方式 和和 getget提交

12、方式提交方式 表单元素的统一格式 指定元素的类型，可指定元素的类型，可为为TEXT、RADIO、SUBMIT等等控件的控件的名称名称控件的控件的初始值初始值控件的控件的初始初始宽度宽度控件中输入的控件中输入的最多字符个数最多字符个数控件是否控件是否被被选中选中表单元素的逐一介绍文本框基本语法名名  字：字：查看源代码查看源代码单行文本输入框，单行文本输入框，字符宽度为字符宽度为20文本区的宽度文本区的宽度输入元素输入元素的默认值的默认值文本输入框文本输入框表单元素的逐一介绍密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密码框密密  码：码：查看

13、源代码查看源代码密码框，密码框，22个字符宽度个字符宽度表单元素的逐一介绍单选按钮基本语法单选按钮基本语法初始值初始值单选按钮单选按钮默认选中默认选中性别：性别：男男 查看源代码查看源代码设置此单选设置此单选按钮被选中按钮被选中表单元素的逐一介绍复选框基本语法复选框基本语法复选框复选框复选框名复选框名复选框值复选框值 聊天聊天  查看源代码查看源代码设置此复选设置此复选框被选中框被选中列表框基本语法列表框基本语法 说明：说明：size确定列表中可同时看到的行数。确定列表中可同时看到的行数。selected默认被选中的可选项。默认被选中的可选项。表单元素的逐一介绍查

14、看源代码查看源代码出生日期：出生日期： 年年 选择月份选择月份 一月一月 二月二月 月月 日日 设置此输入框最多设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择月份选择月份”选项默认被选中选项默认被选中表单元素的逐一介绍按钮基本语法按钮基本语法按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签 查看源代码查看源代码单击按钮，控件的值单击按钮，控件的值被重置为被重置为value属性属性中指定的初始值中指定的初始值表单元素的逐一介绍多行文本框基本语法多行文本框基本语法 文本框中的内容文本框中的内容 文本框文本框的名字的名字文

15、本框文本框的列数的列数文本框文本框的行数的行数欢迎阅读服务条款协议，欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务淘宝的权利和义务 6行行40个字符宽个字符宽度的多行文字域度的多行文字域查看源代码查看源代码表单元素的逐一介绍复选框基本语法复选框基本语法隐藏域隐藏域隐藏域名隐藏域名隐藏域值隐藏域值 聊天聊天  表单元素的逐一介绍复选框基本语法复选框

16、基本语法文件域文件域文件域名文件域名 上传头像：上传头像：聊天聊天  查看源代码查看源代码小结1编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习答案练习代码练习代码 总结1创建表格最少需要那三个标签？、简述表格的基本结构。用于定义表格，html中的重要标签 定义表格行，用在 中 表格单元格，用在中跨行跨列的表格，用哪两个属性来设置？跨行rowspan=“行数”;跨列colspan=“列数”总结2输出以下格式的内容 效果演示效果演示总结表单中提交数据的方法有那两种及其区别？表单里有哪些常用的表单元素？Get方法和方法和post方法方法文本框，密码框，单选框，复选框，下拉框，文本框，密码框，单选框，复选框，下拉框，重置按钮，提交按钮等重置按钮，提交按钮等4848IT之行，始于足下之行，始于足下