Html常用标签（表格、表单）

表格

表格的格式

   <table>
        <tr>     //定义行
            <td> 单元格内容</td>     //定义列
        </tr>
    </table>

表格标签

<table></table>     //定义一个表格

<tr></tr>    //行标签，必须放在<table></table> 标签中

<th></th>：单元格标签，表示列标题，文字自动加粗并居中，必须放在<tr></tr>标签中

<td></td>：单元格标签(列)，必须放在<tr></tr>标签中

1、table标签内属性：

(1)border：设置边框尺寸大小
(2)cellspacing：表示单元格之间的距离
(3)cellpadding：单元格内容和边框线之间的距离
(4)width:表格宽度
(5)height:表格高度
(6)bordercolor:设置表格边框颜色
(7)background:设置表格背景图片

2、行标签中属性：

(1)align:水平对齐方式(left、center、right)
(2)bgcolor:行的背景色

3、列标签中属性：

width:列宽

4、语义标签（读代码时便于区分代码的头部和主体，对表格的显示不起作用）

    <thead></thead>    //表示表格的头部
	   
	<tbody></tbody>    //表示表格的主体
	   
	<tfoot></tfoot>    //表示页脚
	   

例如：

    <table border="1" cellspacing=1 cellpadding='5'>     
        <tr bgcolor="pink">
            <th width="100">姓名</th>   //列标题
            <th width="100">性别</th>
            <th width="100">年龄</th>
            <th width="100">民族</th>
        </tr>
        <tr align="center" bgcolor="yellow">
            <td>赵丽颖</td>   //列的内容
            <td>女</td>
            <td>25</td>
            <td>汉</td>
        </tr>

        <tr align="center" bgcolor="pink">
            <td>任嘉伦</td>
            <td>男</td>
            <td>28</td>
            <td>汉</td>
        </tr>
    </table>

5、合并单元格

(1)单元格跨列：colspan=“列数”
(2)单元格跨行：rowspan=“行数”

例如：

    <table border="1" cellspacing=1 cellpadding='5'>
        <tr bgcolor="pink">
            <th rowspan="3">跨行单元格</th>     //第一个列标题跨3行
            <th width="100">账号</th>   
            <th width="100">昵称</th>
            <th width="100" colspan="2" >操作</th>    //此列表题跨2列，一个列表题下面可以写进两列内容
        </tr>

        <tr align="center" bgcolor="yellow">
            <td>021123</td>
            <td>星子</td>
            <td>
                <a href="#">删除</a>
            </td>
            <td>
                <a href="#">修改</a>
            </td>
        </tr>

        <tr align="center" bgcolor="yellow">
            <td>098762</td>
            <td>小软糖</td>
            <td>
                <a href="#">删除</a>
            </td>
            <td>
                <a href="#">修改</a>
            </td>
        </tr>
    </table>

表单

什么是表单

1、表单的作用
（1）信息的收集
（2）数据验证
（3）在线考试
（4）调查问卷

2、表单的构成：
（1）提示性文字：提示用户如何进行操作
（2）表单域：是一个容器，包含若干表单控件
（3）表单控件：具体的功能项（按钮、下拉列表、输入框等）
3、表单域：

    <form action="远程服务器的URL" method="信息的提交方式" name="表单名">
        提示性文字：表单控件		   
    </form>

表单控件

1、input：输入框。有value属性，该属性的值会提交给远程服务器。
（1）单行文本框：<input type="text" id="" value="" placeholder="提示信息">

    <form action="#" method="GET">
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名">
    </form>

（2）密码框：<input type="password" placeholder="请输入密码">

    <label">密&nbsp;&nbsp;&nbsp;码：</label>
    <input type="password" placeholder="请输入密码">

（3）数字输入框：<input type="number">

    <label>年&nbsp;&nbsp;&nbsp;龄：</label>
    <input type="number" max="120" min="1">  //规定了数字的范围

(4)日期输入框：<input type="date">

    <label>日&nbsp;&nbsp;&nbsp;期:</label>
    <input type="date">

(5)颜色输入框：<input type="color">

    <label>颜&nbsp;&nbsp;&nbsp;色：</label>
    <input type="color">

(6)文件选择框：通常用于上传文件。<input type="file">

    <input type="file">

（7）单选按钮：<input type="radio" name="按钮名称" checked> ，checked表示默认选择

    <label>性&nbsp;&nbsp;&nbsp;别：</label>
    <input type="radio" name="sex" id="r1" value="1" checked>
    <label for="r1">男</label>  
    //设置id，使用label for="r1",将单选按钮与“男”这个字组合起来
    //设置name，name都为sex，将两个单选按钮设为互斥，不能同时选择 
    <input type="radio" name="sex" id="r2" value="0" >   
    <!-- //此处的value：将数据上传到服务器 -->
    <label for="r2">女</label>

(8)复选按钮：<input type="checkbox">

    <label>爱&nbsp;&nbsp;&nbsp;好：</label>
    <input type="checkbox" value="游泳" id="ch1">
    <label for="ch1">游泳</label>  //将复选按钮与“游泳”组合起来
    <input type="checkbox" value="爬山" id="ch2">
    <label for="ch2">爬山</label>
    <input type="checkbox" value="上网" id="ch3">
    <label for="ch3">上网</label>

（9）提交按钮：<input type="submit" value="按钮上显示的文字">，点击之后将数据提交给远程服务器， 必须放在<form></form>中有效

    <input type="submit" value="提交">
    <!-- 此处的value为：显示控件内的内容 -->

(10)重置按钮：<input type="reset" value="按钮上显示的文字">，用于清空表单中的内容，必须放在<form></form>中有效

    <input type="reset" value="重置">

(11)普通按钮：<input type="button" value="按钮上显示的文字">

    <input type="button" value="普通按钮">

2、select:下拉列表
用法：

    <select>
		 <option value="值1">选项1</option>
	     <option value="值2">选项2</option>
		 <option value="值3">选项3</option>
		 <option value="值4">选项4</option>
    </select>

    <label>毕业院校：</label>
    <select>
        <option>请选择</option>
        <option value="1">西安交通大学</option>
        <option value="2">西安工业大学</option>
        <option value="3">西安电子科技大学</option>
    </select>

3、textarea：文本域(多行文本输入框)
，<textarea rows="行数" cols="列数"/>

    <label>备&nbsp;&nbsp;&nbsp;注：</label>
    <textarea cols="30" rows="10"></textarea>

整体效果：