表格，表单

表格

 注意：表格只能向右向下合并，不能向左向上合并

<table border="1" width=""  height=""  cellspacing=""  cellpadding=""
     align=""></table>

border    表格边框

width  和 height  表格的宽高

cellspacing   文字与表格的距离

cellpadding 单元格内的空间

<tr align="" valign=""></tr>

align  水平方向对齐方式

valign   垂直方向对齐方式

合并单元格

            <td colspan="2">7</td>
            <td>8</td>

注意：合并单元格后，后面的td要删除    colspan  指合并行方向的单元格    2 指的是合并两个单元格

属性值是⼀些数字，表示合并单元格的数量 上边线在同⼀⾏的，就算在同⼀⾏

            <td rowspan="2">7</td>
            <td>8</td>

rowspan   列方向单元格

bgcolor   给表格加背景颜色

<caption>表头</caption>

表的大致框架

<table>
    <caption>表头</caption>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表单

<form  action=""  method=""  enctype=""   name="" ></form>

action  将来提交数据的位置

method  提交方式 默认是get  通过地址进行传递数据

name  给整个表单起名字

enctype：属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：

                application/x-www-form-urlencoded（默认的设置，没有文件上传可以不加）

                multipart/form-data (有文件上传)

单行文本框

用户名:<input type="text" name="username" placeholder="请输入用户名" maxlength="15"><br>

type  指的是文本框的类型

name   给文本框起个名称

placeholder     占位符（提示文字）

maxlength   文本框可以输入的最大长度

size    文本框的长度

密码框

密码 :<input type="password" name="pwd" placeholder="请输入密码" maxlength="15"> <br>

多行文本框

<textarea name=""  cols="10" rows="20" id=""></textarea>

    cols  影响多行文本框的列的宽度（总共的宽）

     rows 影响多行文本框行的高度   （总共的高）

单选框

 男<input type="radio"  name=""  value="" checked  />
         女<input type="radio"  name=""  value=""   />

radio  表示单选框

checked 为默认值

注意：单选框name值相同则为同一按钮组； 单选框中被提交的值是value中的值

label 

<label for="man">
                男<input type="radio" name="sex" id="man" />
                
            </label>
            <label for="woman">
                女<input type="radio" name="sex" id="woman" />
                
            </label>

lable 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 

        当点击男和女这个字的时候也会勾兑对应的选项 

   复选框

<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

只能点勾选框才能选中

            <label for="pingpang">
                乒乓球<input type="checkbox" name="hobby[]" value="乒乓球" id="pingpang">
            </label>
            <label for="baskball">
                 篮球<input type="checkbox" name="hobby[]" value="篮球" id="baskball">
            </label>
            <label for="yumaoqiu">
                羽毛球<input type="checkbox" name="hobby[]" value="羽毛球" id="yumaoqiu">
            </label>
            <label for="wangqiu">
                网球<input type="checkbox" name="hobby[]" value="网球" id="wangqiu">
            </label>

    属性值type="checkbox" 

      也能够同构label来实现点文字勾选对应的选项 

多选name 相同时后面跟数组[ ]

下拉菜单  select

            <select name="fenlei" id="" size="1">
                <optgroup label="饮料">
                    <option value="可乐">可乐</option>
                    <option value="">雪碧</option>
                    <option value="">芬达</option>
                    <option value="">东鹏</option>
                </optgroup>
                <optgroup label="零食">
                    <option value="可乐">薯片</option>
                    <option value="">饼干</option>
                    <option value="">面包</option>
                    <option value="">鸡腿</option>
                </optgroup>
            </select>

浏览框   （选择文件）

<input  type="file"   name=""  accept="" />

隐藏域

<input  type= " hidden"   name=""   value="" />

注意：隐藏域不会在页面的显示 隐藏域的值仍会被提交到服务器