html表单表格模板

1、歹U表、表单、表格HTML的剩余标签1】列表标签：有序列表：每个列表项的前面都有个有序的序列号，这样列表列表项内容列表项内容列表项内容 type :设置列表项序列号的样式1:1,2,3,4,5.a：a,b,c,d,e.A: A,B,C,D,E.i: i,ii,iii,iv,v.如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5Eg:list.html无序列表：每个列表项的前面都有一个特定符号，这样的列表 格式：列表项列表项列表项Type:circle 空心圆square:方块disc:实心圆（默认）Eg:list.html用户自定义列表：每一组列表项都有一个小标题列表项子分类

2、标题列表项的子列表项列表项子分类标题列表项的子列表项衣服裤子衬衣短袖连衣裙电器电视机冰箱洗衣机其他拖鞋工具书桌椅Eg:list.html3】地图标签：用来设置图片中某个区域为热区域，供用户点击操作使用；格式：Usemap:声明将该图片作为一张地图使用Name:将要对哪一张地图设置热区域热区域：可供点击的区域范围img 的 usemap 一定要禾口 map中的 name相同area：设置地图上一个热区域shape设置热区域的形状 circle圆rect矩形 （ploy多边形）href:点击热区域之后的链接地址alt和title:鼠标放入到热区域内后的提示信息coords:热区域的范围坐标(以图片

3、的左上角为0,0开始计算)(30,40,80,90)rect:左上角的x坐标，左上角的y坐标，右下角的x坐标，右下角的y坐标(10,10,10)circle :圆心的x坐标，圆心的y坐标，圆半径target:点击链接后新页面的显示样式和a链接的target意义完全相同注意：如果某个area标签中的坐标和其他区域发生了重叠，会优先采用最先出现的area标签。浏览器会忽略超过图像边界范围之外的坐标。eg:map.html4】居中标签：就是将某些内容强制居中一般很少人使用居中的内容eg:我是老大，你认为呢!表格eg:map.html5】table标签：1、数据的显示2、简单的页面布局(重点) 格式：

4、Table tr td表头单元格 单元格单元格单元格单元格单元格单元格 thead:表头标签可省略tr：表格的行标签th：表头的单元格标签tbody:表格的主体标签可省略td:普通的单元格标签属性：Width , height:设置宽度（没有行宽）1）按照具体的像素进行设置px2）按照百分比进行设置width=50%当前被设置的标签是上一级标签宽度的50%width: px|% ，但是不能对设置宽度 height: px|%,父级标签是,不要使用%列的宽度：单元格的宽度 行的高度：单元格的高度Table 的 width 和 height:1、height值设置的相当于一个最小值，也就是当表格中

5、的内容或者行高总值超过这个 设置值时，会自动延长表格的height值，如果内容或者高度达不到设置的这个值，会走动补充到这个高度没设置值时，平均分配总高度有的设置，有的没有设置，先保证基本需求，剩下的分配各设置了值得tr，如果有剩余，再分配给没有设置值得tr表格的总高度不够时，先满足各tr基本需求，会自动延长表格的height，然后满tr 的 height:1、2、3、足设置了值得tralign:设置表格中某些标签的内容的水平位置tbody tr td有效left:居左center:居中right:居右对标签设置 align=center的情况，是指让表格相对于父级标签居中，而不是表格中所有内容

6、居中valig n:设置表格中某些标签的垂直位置 top: 居顶部显示middle:居中显示bottom:居底部显示bgcolor:设置某些标签的背景颜色优先级：就近原则tdtrtbodytable合并单元格rowspa n:设置某几行中同列的单元格合并colspa n:设置某行中的几列单元格合并值是数字合并单元格小技巧：1根据需求，选中需要操作的td,判断选择是2、还是根据需求，判断需要合并几个单元格，那么3、写完以后运行页面，观察哪些行多出单元格4、将多余的单元格进行手动删除。概念上的混淆、删除多余的单元格（不能对table设置）（纵向合并单元格）从上到下合并（横向合并单元格）从左到右合并

7、rowspan 还是 colspanrowspan（colspan）的值就是几table:cellspaci ng:设置单元格之间的空白Opx/ cellpaddi ng:设置单元格内部的数据和单元格边框之间的距离border:设置边框宽度bordercolor:设置边框的颜色（ie9以下有效，FF,谷歌，opera都有效）eg:table.html6】form表单1）表单:帮助服务器收集客户端信息的一种机制vform action=提交到的页面” method=提交的方法表单控件action:数据最后所提交的页面绝对路径/相对路径method:数据提交服务器时的提交方法post geteg:

8、form.html2）表单控件：表单用于用户填写信息的控件1、文本控件：用于用户填写较少信息，且可以显示用户填写信息的控件（注册时，用户名填写） 格式：type:设置控件样式textn ame:用于表单收集信息的一种标示符，也就是控件的名称/ id:控件唯一的标示（是为JS预留的功能）class：给CSS预留的属性value:文本框中的默认值placeholder :提示信息size :文本框中能输入的最多字符数（in put框的长度）数字或者pxeg:form.html2、密码框：只是用户输入的内容看不到eg:用户名:密 码：eg:form.html3、单选按钮组：由多个单选按钮组成的按钮组

9、，只能选中其中一个，这种按钮组input type=radio name= value= checked标示符name值必须相同,value不能相同；name:为了保证传递服务器数据只有一个，所以 value：是用提交服务器时，该标签被提交的数据 checked:默认按钮组中的那个按钮被选中eg:性另U: 男 女 保密 使用方法一：所有表单控件eg:form.htmlname值不能相同！ ! !4、复选按钮组递服务器中，要将格式： 标示eg:选课： 语文 in put type=checkbox n ame=classes in put type=checkbox n ame=classes

10、in put type=checkbox n ame=classes in put type=checkbox n ame=classes 数学 value=3 历史 value=4 政治 value=5 物理 value=6 化学注意：一eg:form.html 美术 定要在name属性后面添加5）下拉列表框： 格式： 下拉列表项 下拉列表项 下拉列表项 下拉列表项 下拉列表项 multiple:允许用户选中多个下拉列表项optgroup: 设置下拉分类标示地址: 山东省 江苏省 上海市 用法二、给列表项分类搜索： 从高至M氐 从低到高 从远至U近 从近至U远 用法三、 老师: 李老师 王老师 张老师 eg:form.html6）文本域：可以输入多行数据的表单控件内容rows:设置文本域可以输入的行数cols:设置的文本域输入的列数（一行可以输入多少个字符）（不是PX）eg:个人介绍：我是个帅哥eg:form.html7）隐藏域： eg:form.html8）上传控件：