html表格及表单
一、html表格
表格由<table>来定义，其中表格有若干行，用<tr>来表示，行又分为若干单元格，用<td>来表示。
<table>的属性有：width宽度，height高度，border边框，cellpadding边距，cellspacing间距，align水平方向
<tr>的属性有：height高度，width宽度
<td>、<th>(表头)的属性有：height高度，align水平方向，valign垂直方向，bgcolor背景颜色
合并单元格：colspan水平合并（向右合并），rowspan垂直合并（向下合并）
表格标题：<caption>
例如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <table border="1" cellpadding="0" cellspacing="0"> 10 <caption>学生信息表</caption> 11 <tr> 12 <th width="100">学生编号</th> 13 <th width="100">姓名</th> 14 <th width="100">性别</th> 15 <th width="100">年龄</th> 16 </tr> 17 <tr align="center"> 18 <td>1001</td> 19 <td>张三</td> 20 <td>男</td> 21 <td>21</td> 22 </tr> 23 <tr align="center"> 24 <td>1002</td> 25 <td>李四</td> 26 <td>女</td> 27 <td>22</td> 28 </tr> 29 <tr align="center"> 30 <td>1003</td> 31 <td>王五</td> 32 <td>男</td> 33 <td>23</td> 34 </tr> 35 </table> 36 </body> 37 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <table border="1" cellpadding="0" cellspacing="0"> 10 <caption>中国高等教育查询结果</caption> 11 <tr height="35"> 12 <th width="100">姓名</th> 13 <td colspan="4" width="450">孙孙孙</td> 14 <td rowspan="4" width="100"> 15 <img src="1.jpg" alt="" width="100" height="140"> 16 </td> 17 </tr> 18 <tr height="35"> 19 <th>性别</th> 20 <td width="140">男</td> 21 <th width="100">出生日期</th> 22 <td width="140" colspan="2">1983年6月13日</td> 23 </tr> 24 <tr height="35"> 25 <th>入学时间</th> 26 <td>2002年9月1日</td> 27 <th>毕业时间</th> 28 <td colspan="2">2006年7月1日</td> 29 </tr> 30 <tr height="35"> 31 <th>学历类型</th> 32 <td>普通</td> 33 <th>学历层次</th> 34 <td colspan="2">本科</td> 35 </tr> 36 <tr height="35"> 37 <th>毕业院校</th> 38 <td colspan="3">景德镇陶瓷学院</td> 39 <th width="100">院校所在地</th> 40 <td>江西省</td> 41 </tr> 42 <tr height="35"> 43 <th>专业名称</th> 44 <td colspan="3">工程设计</td> 45 <th>学习形式</th> 46 <td>普通全日制</td> 47 </tr> 48 <tr height="35"> 49 <th>证书编号</th> 50 <td colspan="3"> 1040 8120 0605 0016 15</td> 51 <th>毕结业结论</th> 52 <td>毕业</td> 53 </tr> 54 </table> 55 </body> 56 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <table width="100%" border="0" cellpadding="0" cellspacing="0"> 10 <tr height="100"> 11 <td> 12 <table border="0" cellpadding="0" cellspacing="0" width="100%"> 13 <tr height="100"> 14 <td bgcolor="red"> 15 <table width="70%" align="center" border="0" cellpadding="0" cellspacing="0"> 16 <tr height="100"> 17 <td bgcolor="#ccc"></td> 18 </tr> 19 </table> 20 </td> 21 </tr> 22 <tr height="50"> 23 <td bgcolor="blue"> 24 <table height="50" border="0" cellpadding="0" cellspacing="0"> 25 <tr> 26 <td width="10%" bgcolor="#111"></td> 27 <td width="10%" bgcolor="#ccc"></td> 28 <td width="10%" bgcolor="rgba(164,54,56,1.00)"></td> 29 <td width="10%" bgcolor="rgba(78,198,204,1.00)"></td> 30 <td width="10%" bgcolor="rgba(172,69,70,1.00)"></td> 31 <td width="10%" bgcolor="rgba(63,187,193,1.00)"></td> 32 <td width="10%" bgcolor="rgba(179,53,207,1.00)"></td> 33 <td width="10%" bgcolor="rgba(44,120,65,1.00)"></td> 34 <td width="10%" bgcolor="rgba(205,39,41,1.00)"></td> 35 <td width="10%" bgcolor="rgba(11,99,43,1.00)"></td> 36 <td width="10%" bgcolor="rgba(44,147,98,1.00)"></td> 37 </tr> 38 </table> 39 </td> 40 </tr> 41 </table> 42 </td> 43 </tr> 44 <tr height="200"> 45 <td bgcolor="yellow"></td> 46 </tr> 47 <tr height="500"> 48 <td> 49 <table width="75%" border="0" cellpadding="0" cellspacing="0" align="center"> 50 <tr height="500"> 51 <td> 52 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 53 <tr height="300"> 54 <td> 55 <table width="100%" border="0" cellpadding="0" cellspacing="0"> 56 <tr height="300"> 57 <td width="33%" bgcolor="rgba(240,126,128,1.00)"></td> 58 <td width="33%" bgcolor="rgba(106,47,48,1.00)"></td> 59 <td width="33%" bgcolor="rgba(147,11,249,1.00)"></td> 60 </tr> 61 </table> 62 </td> 63 </tr> 64 <tr height="200"> 65 <td bgcolor="rgba(49,228,21,1.00)"></td> 66 </tr> 67 </table> 68 </td> 69 <td> 70 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 71 <tr height="250"> 72 <td bgcolor="rrgba(179,90,92,1.00)"></td> 73 </tr> 74 <tr height="250"> 75 <td bgcolor="rrgba(103,159,51,1.00)"></td> 76 </tr> 77 </table> 78 </td> 79 <td> 80 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 81 <tr height="200"> 82 <td bgcolor="rgba(201,205,24,1.00)"></td> 83 </tr> 84 <tr height="300"> 85 <td bgcolor="rgba(46,100,247,1.00)"></td> 86 </tr> 87 </table> 88 </td> 89 </tr> 90 </table> 91 </td> 92 </tr> 93 <tr height="50"> 94 <td bgcolor="black"> 95 <table width="100%" border="0" cellpadding="0" cellspacing="0"> 96 <tr height="50"> 97 <td bgcolor="rgba(78,198,204,1.00)"></td> 98 <td bgcolor="rgba(172,69,70,1.00)"></td> 99 <td bgcolor="rgba(63,187,193,1.00)"></td> 100 <td bgcolor="rgba(179,53,207,1.00)"></td> 101 <td bgcolor="rgba(44,120,65,1.00)"></td> 102 <td bgcolor="rgba(205,39,41,1.00)"></td> 103 <td bgcolor="rgba(11,99,43,1.00)"></td> 104 <td bgcolor="rgba(44,147,98,1.00)"></td> 105 </tr> 106 </table> 107 </td> 108 </tr> 109 <tr height="50"> 110 <td bgcolor="black"></td> 111 </tr> 112 </table> 113 </body> 114 </html>
二、html表单
表单使用表单标签<form>来设置
1.输入元素：多数情况下，表单的输入元素多用<input>来表示，其中输入类型是由类型属性（type）来定义的。
例如：
<form action="后台地址" method="(提交方式)get是默认/post"> 账号：<input type="text"> 密码：<input type="password"> </form>
2.表单元素主要有以下几类：
a.文本类型：文本框text，密码框password，隐藏域hidden，多行文本textarea
b.选择类型：单选radio，多选checkbox，下拉select
c.按钮类型：普通按钮button，提交按钮submit，重置按钮reset
d.其他：文件file，图片image，时间date，颜色color，邮件email
3.表单元素的写法：
a.通用写法
<input type="类型">
b.特殊写法
<textarea name="" id="" cols="30" rows="10"></textarea>
c.下拉菜单
<select name="" id=""> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select>
4.实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <form action=""> 10 <input type="hidden"><br> 11 账号：<input type="text"><br> 12 密码：<input type="password"><br> 13 性别：<input type="radio" name="sex">男 14 <input type="radio" name="sex">女<br> 15 兴趣：<label><input type="checkbox">吃饭</label> 16 <label><input type="checkbox">睡觉</label> 17 <label><input type="checkbox">打游戏</label> 18 <label><input type="checkbox">看电影</label><br> 19 民族：<select name="" id=""> 20 <option value="">汉族</option> 21 <option value="">回族</option> 22 <option value="">满族</option> 23 </select><br> 24 个人介绍：<textarea name="" id="" cols="30" rows="10"></textarea><br> 25 26 <input type="button" value="普通按钮"><br> 27 <input type="submit"> 28 <input type="reset"> 29 </form> 30 31 </body> 32 </html>
5.特殊知识点
a.<label>标签，主要增加用户体验度，体现在使用<checkbox>多选的时候，不用精确的点到选择框，而是点到名称就可以选择。
有两种使用方法
<label><input type="checkbox">吃饭</label>
<input id="shuijiao" type="checkbox"> <label for="shuijiao">睡觉</label>
b.id和class，id是唯一的，一个元素只能有一个。class可以定义多个值并且应用到多个标签上。class的多个值用空格分开。
<input class="b" type="checkbox">吃饭 <input id="shuijiao" class="b c" type="checkbox"> <label for="shuijiao">睡觉</label>
