1.表格
表格的完整结构
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
把td改成th,表示重要的单元格,呈现加粗效果,并居中显示
table的属性:
1.border 最外层的边框
2.cellspacing 单元格与单元格之间的间距,默认是2px
3.cellpadding 内容到边框的距离
4.width 表格的宽度(横向)
5.align="left默认/center/right" 对齐
6.bgcolor 背景颜色
7.background 背景图像
tr的属性:改变整行的属性
1.height
2.align 水平对齐
3.valign="top/middle/bottom" 垂直对齐
td的属性:宽和高的改变会影响列和行
1.height
2.width
3.align 水平对齐
4.valign="top/middle/bottom" 垂直对齐
简单的表格结构
<table border="0" cellpsdding="0" cellspacsing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格的高级应用
1.合并单元格
> td属性，水平合并:colspan="3"垂直合并:rowspan="2" 先把不同的内容剪切到一起
2.嵌套
2.form表单
1.双标签form的属性：
name="随便取，英文的就可以"
action="提交后台处理程序" "jsp,aspx,php" "java c# php" "数据库"
method="get/post" get通过地址栏提交数据，且在地址栏上显示信息，不安全，提交的数据量有限制；
post通过action直接提交，不会显示在地址栏上，相对安全，提交信息量较大
target="_blank/_self"
2.表单元素
文本框：<input type="text" name="" value="">
单选框：<input type="radio" name="" value="">选项 要求选项的name值要一样，这样才能单选
复选框：<input type="checkbox" name="" value="">选项 属性中name的值尽量一样，用value获取值 属性值加checked，默认选中
上传文件：<input type="file" name="file">
密码框：<input type="password" name="" value="">
隐藏域：<input type="hidden" name="content">
下拉框：<select name="down">
<option value="" selected>请选择</option>
<option value="1">......</option>
<option value="2" selected>........</option>
<option value="3">........</option>
</select>
selected属性表示默认选择
文本域：<textarea 行rows="5" 列cols="8"></textarea>
对于文本域和文本框的属性readonly表示只读
重置按钮：<input type="reset" value="重置">
提交按钮：<input type="submit" value="提交">
普通按钮：<input type="button" value="普通">
图像域按钮：<input type="image" src="图片地址">
<a href="跳转地址"></a>
3.标签的表现分类
1、块级元素（大标签、大盒子）
div table h1-h6 p ul li ol dl dt dd
“form"这个块元素比较特殊，它只能用来容纳其他块元素。
display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
2、 行内元素（小标签、小盒子）
span strong a i em
3、行内块级元素
img select input textarea
特点：1.块级元素在不同行显示，可以嵌套块级元素及行内元素，
2.行内元素不能嵌套块级元素，可以嵌套行内元素
4.标签的嵌套规则
>1.不能交叉嵌套
2.同特点
3.h1-h6,p,dt只能嵌套行内元素，不能嵌套块级元素
网友评论