【2】HTML表格表单

单元格中数据的对齐方式

Align = left
Align = center
Align = right
Valign = top
Valign = middle
Valign = bottom

合并单元格

水平合并在 或 标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如COLSPAN=3表示跨3列。

垂直合并在 或 标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如ROWSPAN=3表示跨3行。

表格总结

表格的基本结构
表格标记table的属性
    border/width属性
    cellspacing/cellpadding属性
 行标记tr的属性
     algin属性
     valgin属性
    height属性
单元格td的属性
     colspan属性   水平合并
    rowspan属性  垂直合并
    algin属性
     valgin属性
    width/height属性

表 单

表单在网页中主要负责数据采集功能

表单的组成
表单标签  <form action=“表单提交地址”method=“post/get”>
                这里面包含了所有的表单控件
            </form>

Get与post的区别：

• GET请求的数据会被浏览器缓存起来，用户名和密码将明文出现在URL上，其他人可以查到历史浏览记录，数据不太安全. Get传输的数据有大小限制因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了，不同的浏览器对URL的长度的限制是不同的. Get请求的参数会跟在url后进行传递，请求的数据会附在URL之后，以?分割URL和传输数据，参数之间以&相连,％XX中的XX为该符号以 16进制表示的ASCII，如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密
• Post没有限制提交的数据。Post比Get安全.则用get，因为使用get，参数会显示在地址，对于敏感数据和不是中文字符的数据，则用post.

表单元素

输入标签：   <input   type=“值”/>
         值： text        单行文本框，只能输入一行文本
            password    密码框
            radio       单选框
            checkbox    复选框
            file            文件域
            submit      提交按钮
            reset           重置按钮
            button      普通按钮（一般按钮）

1. name属性

   

<input type="radio" name="sex"   />男
<input type=“radio” name=“sex”  /> 女
注意： Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称

1. checked属性

   

申请产品：<input  type=“checkbox”  checked=“checked”/>实木

1. value属性

   

 <input  type=“submit”  value=“提交 ”/>
 <input  type=“submit”  value=“取消 ”/> 

下拉菜单<select></select>：

主要用于在有限的空间里设置多个选项。

<select>
        <option value=“”>请选择</option>
     <option value=“1” selected=“selected”>1949 </option>
</select>

主要用于输入较长的文本信息

<textarea  rows=“5” cols=“30”>     </textarea>

标签的表现分类

标签元素分类

块级元素block; div p h1-h6 table form…

内联元素inline; a span …

内联块inline-block; img input select…

标签的及特点－－块级的特点

1、独占一行，默认情况下，其宽度自动填满其父元素宽度

2、可以设置宽和高，设置了宽度还是独占一行

3、可以设置margin和padding属性

4、对应的相关display属性:block

5、可以互相转换display:inline变成行内元素

6、可以嵌套块级元素及行内元素

标签的及特点－－行内的特点

1、不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

2、不可以设置宽和高，设置了宽度还是独占一行

3、水平方向的内外都产生边距效果但竖直方向的内外边距却不会产生边距效果

4、对应的相关display属性:inline

5、可以互相转换display:block变成行块级元素

6、不可以嵌套块级元素

标签嵌套规则

1、不能交叉嵌套

2、块级元素嵌套行内元素或者块级元素

3、行内元素不能嵌套块级元素

4、块级元素不能放在

里面

5、有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt

表格
        1、表格的完整结构

        <table>
            <thead>
                <tr>
                    <td></td>
                    <td></td>                                       <td></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>                                       <td></td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>                                       <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>                                       <td></td>
                </tr>
            </tfoot>
        </table>

table的属性:
    border:
    cellspacing:单元格与单元格之间的间距  默认2px
    cellpadding:内容到边框的距离
    width:表格的宽度
    align:left/center/right
    bgcolor:背景颜色
    background:背景图像
tr的属性
    height:
    align:水平 left  center right
    valign:垂直  top middle bottom
    bgcolor:
    background:
td的属性
    width:
    height:
    align:
    valign:
    bgcolor:
    backgrouond:

简单的表格结构
    <table border="0" cellpadding="0" cellspacing="0" >
        <tr>
            <th>文字</th>
            <th>文字</th>
            <th>文字</th>
        </tr>
        <tr>
            <td>文字</td>
            <td>文字</td>
            <td>文字</td>
        </tr>
        <tr>
            <td>文字</td>
            <td>文字</td>
            <td>文字</td>
        </tr>
    <table> 

表格的高级应用
    合并单元格
        水平合并:colspan="3"  col:列
        垂直合并:rowspan="2"  row:行

    表格布局页面（表格嵌套表格）

form表单t
    <form>
    </form>

    form属性：
    name = "myform"
    action<动作>="提交到后台处理程序" （jsp aspx php 后面对应三个扩展名）  （java c# php） "数据库"
    method<方法>="get|post"
        get|post区别
        get:通过地址栏提交数据 在地址栏会显示信息  不安全  数据有限制

        post: 安全 提交数据量大

    target="_blank| _self"

    表单元素来演示属性
    表单元素
        文本框<input type = "text" name ="" value=""/>
        密码框<input type = "password" name ="" value=""/>
        提交按钮<input type = "submit"value="登录|提交"/>
        单选按钮:<input type="radio" name="" value=""/>男    checked   选中
        复选框:<input type="checkbox" name="" value=""/>     checked   选中
        上传文件:<input type="file" name="file"/>
        隐藏域：<input type="hidden" name="content" value=""/>
        下拉框:<select name="">
                <option value=""></option>     selected   选中
            </select>
        文本域：
            <textarea rows="5" cols="30"><textarea>    readonly   只读