一、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>