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>