HTML表格与表单

三、表格与表单知识回顾HTML文档结构常用的HTML标签链接图片换行分段字体……内容摘要在HTML文档中进行排版布局列表表格框架使用表单及其中的对象列表简介列表用于按逻辑方式对数据分组玫瑰花向日葵兰花苹果桔子水仙芒果水果•苹果•芒果•桔子花卉•水仙•兰花•向日葵•玫瑰花列表类型：无序列表…BODYH1星期中的每一天/H1ULLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/UL/BODY…无序列表也称为“项目列表”…BODYH1星期中的每一天/H1OLLI星期日LI星期一LI星期二LI星期三LI星期四LI星期五LI星期六/OL/BODY…列表类型：有序列表有序列表的属性LITYPE=ILITYPE=iLITYPE=ALITYPE=aOLSTART=n在有序列表中，列表项以自动生成的顺序显示创建表格第一步第三步第二步此时，在“文档”窗口中将插入一个空白表格演示：创建表格的步骤格式化表格使用属性检查器格式化表格。要查看表格属性，首先选择整个表格。然后，可以使用属性检查器为该表格增加行、列和边框，对表格或单元格插入背景图像。演示：格式化表格的步骤文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题使用表格/TITLE/HEADBODYTABLEBORDER=2TRTD姓名/TDTD性别/TDTD分数/TD/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLE/BODY/HTML创建表格TABLE代表表格的开始，border=2表示边框尺寸为2TR表示行，这是表格的第一行，有三列数据，TD代表列表格的第二行，有三列数据表格的第三行，也有三列数据=2CAPTIONalign=top学员档案信息/CAPTIONTRTH姓名/THTH性别/THTH分数/TH/TRTRTDRobert/TDTDM/TDTD80/TD/TR......./TABLE/BODY/HTML表格的标题CAPTION表示表格标题TH表示行或列标题，粗体显示表格的第二行，有三列数据表格的第三行，有三列数据=2align=centerCAPTIONalign=top学员档案信息/CAPTIONTRTH姓名/THTHalign=center性别/THTHalign=right分数/TH/TRTRTDRobert/TDTDalign=centerM/TDTDalign=right80/TD/TR......./TABLE/BODY/HTML表格的对齐方式整个表格居中姓名列默认左对齐性别列居中分数列右对齐合并单元格(跨列)BODYTABLEBORDER=2ALIGN=CENTERCAPTION创建表格/CAPTIONTHCOLSPAN=3第一学期/THTHCOLSPAN=3第二学期/THTRTD数学/TDTD科学/TDTD英语/TDTD数学/TDTD科学/TDTD英语/TDTRTD98/TDTD88/TD....COLSPAN=“n”属性表示跨多少列合并单元格(跨行)BODYTABLEBORDER=1,align=centerCAPTIONb创建表格b/CAPTIONTRTH/THTH/THTH螺母/THTH螺栓/THTH锤子/THTRTDROWSPAN=3第一季度/TDTD一月/TDTD2500/TDTD1000/TDTD1240/TDTRTD二月/TD.....ROWSPAN=“n”属性表示跨多少行=0align=centerwidth=50%CAPTIONalign=top学员档案信息/CAPTIONTRbgcolor=#00FFFFTHalign=left姓名/THTHalign=center性别/THTHalign=right分数/TH/TRTRbgcolor=#FFFF00TDRobert/TDTDalign=centerM/TDTDalign=right80/TD/TRTRbgcolor=#FFFF00TDMary/TDTDalign=centerF/TDTDalign=right18/TD/TR/TABLE表格的背景色和尺寸设置表格的颜色设置：表格的背景色TABLEbgcolor=颜色值行的背景色TRbgcolor=颜色值列的背景色TDbgcolor=颜色值颜色值可以采用RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。表格的尺寸设置：TABLEwidth=n1height=n2例如：TABLEwidth=200height=100表示一个长为200像素，宽为100像素的表格。TABLEwidth=20%height=10%表示一个宽为窗口的20%，高为窗口的10%的表格。1880分数FM性别MaryRobert姓名学员档案信息课堂练习:请编写HTML代码框架广告栏顶部框架(top.htm)商品详细介绍右侧框架(main.htm)商品导航左侧框架(left.htm)为何使用框架在另一个固定部分显示导航部分在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。站点中只有此部分是变化的。进行页面内的页面嵌套可以定义嵌套页面的大小、位置等用法：iframename=“ifra1”scr=“abc.htm”border=“1”/可以通过name属性将链接的显示目标定位到iframe框架内。=“post或get”表单FORMACTIONMETHOD指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全ACTION=“URL”FORMaction=“”method=“post”此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认选择为TEXT。Name此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称TEXT1、TEXT2或选择的任何名称来标识它们。Name属性的作用域是在FORM元素内。Value此属性是可选属性，它指定控件的初始值。但是，如果TYPE为RADIO，则必须指定一个值。Size此属性指定控件的初始宽度。如果TYPE为TEXT或PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。Maxlength此属性用于指定可在TEXT或PASSWORD元素中输入的最大字符数。Checked此属性是Boolean属性，指定按钮是否是打开的。当输入类型为RADIO或CHECKBOX时，使用此属性。文本框、按钮、单选按钮、复选框等都是输入元素。INPUTtype=“?”name=“?”size=”?”value=“?”maxlength=“?”checked=“?”=button1type=submitvalue=提交INPUTname=button2type=resetvalue=重置INPUTname=button3type=buttonvalue=普通按钮•BUTTON（按钮）Type属性：submit：提交按钮reset：重置按钮button：普通按钮=Textname=PIDvalue=size=20maxlength=18•TEXT（文本）密码：INPUTtype=passwordvalue=“”name=“passsize=15TEXTAREAname=“textarea”clos=20rows=5请填写您的工作经历/TEXTAREA性别：INPUTTYPE=radioNAME=”sex”VALUE=”male”男性INPUTTYPE=radioNAME=”sex”VALUE=”male”女性•单选按钮和复选框你喜欢以下哪些明星：brinputtype=Checkboxname=id1