html 表单表格模板
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
border:设置边框宽度
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..
a：a,b,c,d,e....
A: A,B,C,D,E....
(30,40,80,90)
circle：圆心的x坐标,圆心的y坐标，圆半径（10,10,10）
rect:左上角的x坐标，左上角的y坐标,右下角的x坐标，右下角的y坐标
target:点击链接后新页面的显示样式和a链接的target意义完全相同
注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
Name:将要对哪一张地图设置热区域
热区域：可供点击的区域范围
img的usemap一定要和map中的name相同
area：设置地图上一个热区域
shape:设置热区域的形状circle圆rect矩形（ploy多边形）
href:点击热区域之后的链接地址
alt和title:鼠标放入到热区域内后的提示信息
coords:热区域的范围坐标(以图片的左上角为0,0开始计算)
2、还是根据需求，判断需要合并几个单元格，那么rowspan(colspan)的值就是几
3、写完以后运行页面，观察哪些行多出单元格
4、将多余的单元格进行手动删除。
概念上的混淆、删除多余的单元格
table:
cellspacing:设置单元格之间的空白0px
// cellpadding:设置单元格内部的数据和单元格边框之间的距离
<dd></dd>
<dt></dt>
<dd></dd>
<dl>
衣服
裤子
衬衣
短袖
连衣裙
电器
电视机
冰箱
洗衣机
其他
拖鞋
工具书
桌椅
Eg:list.html
3】地图标签:用来设置图片中某个区域为热区域，供用户点击操作使用;
格式:
<img src="" usemap="#hello" />
<map name="hello ">
square:方块
disc:实心圆（默认）
Eg:list.html
用户自定义列表:每一组列表项都有一个小标题
<dl>
<dt></dt>列表项子分类标题
<dd></dd>列表项的子列表项
<dd></dd>
<dd></dd>
<dt></dt>列表项子分类标题
<dd></dd>列表项的子列表项
<dd></dd>
</table>
thead:表头标签可省略
tr：表格的行标签
th：表头的单元格标签
tbody:表格的主体标签可省略
td:普通的单元格标签
属性:
Width，height:设置宽度(没有行宽)
1)按照具体的像素进行设置px
2)按照百分比进行设置width="50%"当前被设置的标签是上一级标签宽度的50%
width: px|%，但是不能对<tr>设置宽度
height: px|%, <table>父级标签是<body>,不要使用%
列的宽度：单元格的宽度
行的高度：单元格的高度
Table的width和height:
1、height值设置的相当于一个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，如果内容或者高度达不到设置的这个值，会走动补充到这个高度
tr的height：
1、没设置值时，平均分配总高度
2、有的设置，有的没有设置，先保证基本需求，剩下的分配各设置了值得tr，如果有剩余，再分配给没有设置值得tr
3、表格的总高度不够时，先满足各tr基本需求，会自动延长表格的height,然后满足设置了值得tr
align:设置表格中某些标签的内容的水平位置tbody tr td有效
left:居左
center:居中
right:居右
对<table>标签设置align="center"的情况，是指让表格相对于父级标签居中，而不是表格中所有内容居中
valign:设置表格中某些标签的垂直位置(不能对table设置)
top:居顶部显示
middle:居中显示
bottom:居底部显示
bgcolor:设置某些标签的背景颜色
<area shape="" href="" alt="" title="" coords="x1,y1,x2,y2" target=""/>
<area shape="" href="" alt="" title="" coords="" target=""/>
....
</map>
Usemap:声明将该图片作为一张地图使用
优先级：就近原则
td>tr>tbody>table
合并单元格
rowspan:设置某几行中同列的单元格合并(纵向合并单元格)从上到下合并
colspan:设置某行中的几列单元格合并(横向合并单元格)从左到右合并
值是数字
合并单元格小技巧:
1、根据需求，选中需要操作的td，判断选择是rowspan还是colspan
<thead>
<tr>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</d>
<td>单元格</td>
</tr>
<tr>
</tr>
.....
</tbody>
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..
a：a,b,c,d,e....
A: A,B,C,D,E....
(30,40,80,90)
circle：圆心的x坐标,圆心的y坐标，圆半径（10,10,10）
rect:左上角的x坐标，左上角的y坐标,右下角的x坐标，右下角的y坐标
target:点击链接后新页面的显示样式和a链接的target意义完全相同
注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
Name:将要对哪一张地图设置热区域
热区域：可供点击的区域范围
img的usemap一定要和map中的name相同
area：设置地图上一个热区域
shape:设置热区域的形状circle圆rect矩形（ploy多边形）
href:点击热区域之后的链接地址
alt和title:鼠标放入到热区域内后的提示信息
coords:热区域的范围坐标(以图片的左上角为0,0开始计算)
2、还是根据需求，判断需要合并几个单元格，那么rowspan(colspan)的值就是几
3、写完以后运行页面，观察哪些行多出单元格
4、将多余的单元格进行手动删除。
概念上的混淆、删除多余的单元格
table:
cellspacing:设置单元格之间的空白0px
// cellpadding:设置单元格内部的数据和单元格边框之间的距离
<dd></dd>
<dt></dt>
<dd></dd>
<dl>
衣服
裤子
衬衣
短袖
连衣裙
电器
电视机
冰箱
洗衣机
其他
拖鞋
工具书
桌椅
Eg:list.html
3】地图标签:用来设置图片中某个区域为热区域，供用户点击操作使用;
格式:
<img src="" usemap="#hello" />
<map name="hello ">
square:方块
disc:实心圆（默认）
Eg:list.html
用户自定义列表:每一组列表项都有一个小标题
<dl>
<dt></dt>列表项子分类标题
<dd></dd>列表项的子列表项
<dd></dd>
<dd></dd>
<dt></dt>列表项子分类标题
<dd></dd>列表项的子列表项
<dd></dd>
</table>
thead:表头标签可省略
tr：表格的行标签
th：表头的单元格标签
tbody:表格的主体标签可省略
td:普通的单元格标签
属性:
Width，height:设置宽度(没有行宽)
1)按照具体的像素进行设置px
2)按照百分比进行设置width="50%"当前被设置的标签是上一级标签宽度的50%
width: px|%，但是不能对<tr>设置宽度
height: px|%, <table>父级标签是<body>,不要使用%
列的宽度：单元格的宽度
行的高度：单元格的高度
Table的width和height:
1、height值设置的相当于一个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，如果内容或者高度达不到设置的这个值，会走动补充到这个高度
tr的height：
1、没设置值时，平均分配总高度
2、有的设置，有的没有设置，先保证基本需求，剩下的分配各设置了值得tr，如果有剩余，再分配给没有设置值得tr
3、表格的总高度不够时，先满足各tr基本需求，会自动延长表格的height,然后满足设置了值得tr
align:设置表格中某些标签的内容的水平位置tbody tr td有效
left:居左
center:居中
right:居右
对<table>标签设置align="center"的情况，是指让表格相对于父级标签居中，而不是表格中所有内容居中
valign:设置表格中某些标签的垂直位置(不能对table设置)
top:居顶部显示
middle:居中显示
bottom:居底部显示
bgcolor:设置某些标签的背景颜色
<area shape="" href="" alt="" title="" coords="x1,y1,x2,y2" target=""/>
<area shape="" href="" alt="" title="" coords="" target=""/>
....
</map>
Usemap:声明将该图片作为一张地图使用
优先级：就近原则
td>tr>tbody>table
合并单元格
rowspan:设置某几行中同列的单元格合并(纵向合并单元格)从上到下合并
colspan:设置某行中的几列单元格合并(横向合并单元格)从左到右合并
值是数字
合并单元格小技巧:
1、根据需求，选中需要操作的td，判断选择是rowspan还是colspan
<thead>
<tr>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</d>
<td>单元格</td>
</tr>
<tr>
</tr>
.....
</tbody>