表格和表单

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只能嵌套行内元素，不能嵌套块级元素