HTML：表格、布局标签
1、表格的结构
2、<table>标记
<table width="600px" height="500px" border="1" cellspacing="10">
width：宽度
height：高度
border：边框线的粗细
cellspacing：单元格之间的间距
3、<thead>：表头
<tbody>：表体
4、<tr>标记：行
<tr>不需要定义外观
5、<th>：表头中的单元格
<td>：表体中的单元格
6、单元格（th、td）的文本对齐
align：水平对齐，可能的值有left、center和right
valign：垂直对齐，可能的值有top、middle和bottom
7、单元格合并
合并列：
<th>地址</th>
<th>地址</th>
<th>地址</th>
第一步：先删除多余的单元格
<th>地址</th>
第二步：设置单元格要跨多少列
<th colspan="3">地址</th>
合并行：
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
第一步：找到要合并的单元格（粗体部分）
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
第二步：只留下第一个，后面的删除
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<th>姓名</th>
</tr>
第三步：使用rowspan跨行
<tr>
<th rowspan="2">学号</th>
<th>姓名</th>
</tr>
<tr>
<th>姓名</th>
</tr>
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table width="600px" height="400px" border="1" cellspacing="10">
<thead>
<!-- 第一行 -->
<tr>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">性别</th>
<th rowspan="2">职务</th>
<th colspan="3">地址</th>
</tr>
<!-- 第二行 -->
<tr>
<th>省份</th>
<th>城市</th>
<th>街道</th>
</tr>
</thead>
<tbody>
<!-- 第一行 -->
<tr>
<td align="center">001</td>
<td align="center">王二</td>
<td align="center">男</td>
<td align="center">农民</td>
<td align="center">中国</td>
<td align="center">湖南</td>
<td align="center">岳阳</td>
</tr>
<!-- 第二行 -->
<tr>
<td align="center">002</td>
<td align="center">王二</td>
<td align="center">男</td>
<td align="center">农民</td>
<td align="center">中国</td>
<td align="center">湖南</td>
<td align="center">岳阳</td>
</tr>
<!-- 第三行 -->
<tr>
<td align="center">003</td>
<td align="center">王二</td>
<td align="center">男</td>
<td align="center">农民</td>
<td align="center">中国</td>
<td align="center">湖南</td>
<td align="right" valign="bottom">岳阳</td>
</tr>
</tbody>
</table>
</body>
</html>
8、什么时候使用div？
给页面定义模块（版块）时使用DIV
DIV是块级标签，独占一行
9、什么时候使用span？
span往往侧重于对内容进行修饰，是一个典型的行级标签。
改变标记的行级或块级类型：display：block|inline
10、无序列表
<ul type="disc|circle|square">
<li></li>
<li></li>
<li></li>
</ul>
11、有序列表
<ol typle="a|A|1|i|I">
<li></li>
<li></li>
<li></li>
</ol>
12、表单form
一个页中可以有多个表单，表单不能嵌套
一个典型的表单结构：
<form>
用户名：<input type="text">
密码：<input type="password">
<input type="button" value="登陆">
</form>
13、表单域
每个表单域都有name属性和value属性
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选按钮
<input type="button"> 按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
<input type="file"> 文件域
列表框
select的两种效果
下拉列表框
<select>
<option>长沙</option>
<option>株洲</option>
<option>湘潭</option>
</select>
普通列表框
<select multiple="multiple" size="10">
<option>长沙</option>
<option>株洲</option>
<option>湘潭</option>
</select>
multiple：可以多选
size：一次显示的最大项目数
文本区
<textarea rows="5" col="60"></textarea>
14、表单域的默认值
<input type="text" value="张三"> 文本框
<input type="password" value="admin"> 密码框
<input type="radio" checked="checked"> 单选按钮
<input type="checkbox" checked="checked"> 复选按钮
<input type="button" value="提交"> 按钮
<input type="submit" value="提交"> 提交按钮
<input type="reset" value="提交"> 重置按钮
<input type="file"> 文件域
<select>
<option>长沙</option>
<option selected="selected">株洲</option>
<option>湘潭</option>
</select>
<textarea rows="5" col="60">我是帅哥</textarea>
15、案例，请完成下列的效果
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<form>
<table cellspacing="5">
<tr>
<td>姓名</td>
<td><input></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td>星座</td>
<td>
<input type="radio" name="star">金牛座
<input type="radio" name="star">巨蟹座
<input type="radio" name="star">白龙座
</td>
</tr>
<tr>
<td>属相</td>
<td>
<select>
<option>鼠</option>
<option>牛</option>
<option>虎</option>
<option>兔</option>
<option>龙</option>
<option>蛇</option>
<option>马</option>
<option>羊</option>
<option>猴</option>
<option>鸡</option>
<option>狗</option>
<option>猪</option>
</select>
</td>
</tr>
<tr>
<td>幸运数字</td>
<td>
<input type="checkbox">0
<input type="checkbox">1
<input type="checkbox">2
<input type="checkbox">3
<input type="checkbox">4
<input type="checkbox">5
<input type="checkbox">6
<input type="checkbox">7
<input type="checkbox">8
<input type="checkbox">9
</td>
</tr>
<tr>
<td>今日运程</td>
<td>
<textarea rows="5" cols="60"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>