1、表格和表单,第二章,2,回顾,如何插入图片在网页中并设置它的宽度、高度和图片边框？在什么地方会用到锚记超链接，如何使用？有序列表和无序列表分别是什么标签，列表项放在哪个标签里面？,当一个页面中的内容比较多，有滚动条的时候。 使用超链接的地方用href=“#目标名称”，在目标位置用 name=“目标名称”来使用,有序列表;无序列表;列表项放在里面,3,预习检查,表格是哪个标签？行用哪个标签表示？列用哪个标签表示？rowspan和colspan属性分别表示什么？层是那个标签？,表格:;行:;列:;,rowspan表示单元格跨行;colspan表示单元格跨列；,层：,预习检查,请列举表单中有哪些常用
2、的表单元素？input标签用什么属性去控制元素的类型？让单选按钮和多选按钮选中需要用到哪个关键字？,文本框，密码框，单选框，复选框，下拉框,提交按钮，重置按钮,type,checked,本章任务,制作“用户注册”页面,6,了解表格的作用 掌握表格的创建 掌握表格布局的方法 了解层的作用会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别,本章目标,为什么使用表格,表格应用场合 论坛 门户网站 购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,什么是表格,行,列,单元格,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,
3、表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,如何创建表格,移动联通铁通IBM 惠普华硕,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列?,跨多行的表格,早上菜谱 食物鸡蛋饮料牛奶甜点开心粉,rowspan =“n” 属性表示跨多少行？,手机充值、IP卡 办公设备、文具各种卡的总汇铅笔彩笔打印刻录,如何创建跨行跨列的表格,如何设置对其方式,笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,align属性用来设置表格、行、列的对齐方式,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,什么是
4、表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框,品牌商城笔记本电脑办公设备、文具、耗材惠普华硕打印机刻录盘,width用来设置表格的宽度 height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,如何设置背景,笔记本电脑办公设备、文具、耗材 ,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。,如何设置对齐方式,笔记本电脑办公设备、文具、耗材惠普华硕打印机刻
5、录盘,align属性用来设置表格、行、列的对齐方式,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距), ,如何设置表格的填充属性,笔记本电脑办公设备、文具、耗材. ,cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离,填充之后的效果
6、,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局,超值变形金钢2.5折! 人们为啥对电视吼叫 ,为什么要用到层,28,应用了DIV布局的淘宝网主页,如何实现这样的页面布局？,什么是层,DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素 层只有在CSS样式的配合下才能体现
7、出它的作用,29,#top,#bt background-color:#EEE000; #midbackground-color:#999000;width:250px;#bt width:120px; 第1个div标签中的内容 第2个div标签中的内容 第3个div标签中的内容,层将在学习CSS样式时详细介绍,表单,表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具,注册用户,收集信息,反馈信息,表单,提供搜索工具,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBM
8、IT),多行文本框(TEXTAREA),密码框(PASSWORD),表单的结构,HTML页面,表单,表单子元素1,表单子元素2,表单子元素n,表单页面的基本结构,METHOD =“post或get”,ACTION,METHOD,指定提交后，由服务器上那个处理程序处理,指定向服务器提交的方法: 一般为post或get方法, post方法比较安全,ACTION = “URL”, ,演示示例1：使用 post提交方式 和 get提交方式,表单元素的统一格式, ,指定元素的类型，可为TEXT、RADIO、SUBMIT等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中
9、,表单元素的逐一介绍,文本框基本语法 ,名字： ,查看源代码,单行文本输入框，字符宽度为20,文本区的宽度,输入元素的默认值,文本输入框,表单元素的逐一介绍,密码框基本语法 ,密码区宽度,初始密码,密码框, 密码：,查看源代码,密码框，22个字符宽度,表单元素的逐一介绍,单选按钮基本语法 ,初始值,单选按钮,默认选中, 性别：男 ,查看源代码,设置此单选按钮被选中,表单元素的逐一介绍,复选框基本语法 ,复选框,复选框名,复选框值,聊天 ,查看源代码,设置此复选框被选中,列表框基本语法, 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。,表单元素的逐一介绍,查看
10、源代码,出生日期：日,设置此输入框最多只能输入四个符号,设置“选择月份”选项默认被选中,表单元素的逐一介绍,按钮基本语法 ,按钮名称,按钮类型可为button、submit,按钮上的标签,查看源代码,单击按钮，控件的值被重置为value属性中指定的初始值,表单元素的逐一介绍,多行文本框基本语法文本框中的内容 ,文本框的名字,文本框的列数,文本框的行数, 欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 ,6行40个字符宽度的多行文字域,查看源代码,表单元素的逐一介绍,复选框基
11、本语法 ,隐藏域,隐藏域名,隐藏域值,聊天 ,表单元素的逐一介绍,复选框基本语法 ,文件域,文件域名,上传头像：聊天 ,查看源代码,小结1,编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？,TEXT,PASSWORD,RADIO,TEXTAREA,SUBMIT,RESET,SELECT,CHECKBOX,练习答案,练习代码,总结1,创建表格最少需要那三个标签？、 简述表格的基本结构。用于定义表格，html中的重要标签定义表格行，用在 中表格单元格，用在中 跨行跨列的表格，用哪两个属性来设置？跨行rowspan=“行数”;跨列colspan=“列数”,总结2,输出以下格式的内容,效果演示,总结,表单中提交数据的方法有那两种及其区别？表单里有哪些常用的表单元素？,Get方法和post方法,文本框，密码框，单选框，复选框，下拉框，重置按钮，提交按钮等,48,IT之行，始于足下,
