表格標簽：
table 一般用於信息展示
tr行
td文本單元格
th標題單元格（文本加粗）
table屬性：
cellspacing:單元格間距，一般設置為0
cellpadding:文字到邊框的距離
border:表格和單元格的邊框
align:表格居中
td/th屬性：
rowspan:縱向合並單元格
colspan:橫向合並單元格
表格單元格也可以通過css來設置相應的風格：
width寬度
height高度
text-align:center文本居中，左右居中
vertical-align：上下居中
border-collapse:等同cellspacing,單元格間距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<h2 align="center">總結過去，開啟新未來</h2>
<table border="1px" width="800px" height="600px" cellspacing="0" cellpadding="20" align="center">
<tr style="text-align-last: left;">
<td>姓名</td>
<th></th>
<td>性別</td>
<th></th>
<td>出生年月</td>
<th></th>
</tr>
<tr style="text-align-last: left;">
<td>民族</td>
<th></th>
<td>籍貫</td>
<th></th>
<td>專業</td>
<th></th>
</tr>
<tr style="text-align-last: left;">
<td>電話</td>
<th colspan="5"></th>
</tr>
<tr>
<th colspan="6">工作/學習經歷</th>
</tr>
<tr>
<td colspan="2">公司名稱/學校名稱<br />(按時間順序)</td>
<td>職務</td>
<td>工作年限</td>
<td colspan="2">轉行/學習原因</td>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th colspan="6">興趣愛好</th>
</tr>
</table>
</body>
</html>
form表單：
作用：
收集用戶輸入數據提交服務器
form標簽屬性：
action：提交數據的服務器地址
method：提交方式get（不安全，數據量小）；post（安全，數據量大）
input標簽：用於文本輸入框
input屬性：
name用於后台服務器識別傳入的數據類型，如是用戶名還是密碼
placeholder給用戶提示，文本框輸入數據自動消失
lable標簽和input標簽組合使用，for屬性和input的id屬性相關聯---->
作用是點擊對應文本，會改變輸入框的狀態
type類型：
- text文本類型
- password密碼類型
- radio單選（前提name屬性名一致）
- checkbox復選（checked默認選中的選項）
- file選擇磁盤中文件（圖片）
- submit提交（value=‘提交’）
- reset重置（value=‘重置’）
- button普通按鈕（value='獲取/設置…’）
select選擇框（列表框）
option：
selected默認選中的
disabled不能選中的（灰色）
<label>籍貫：
<select style="width: 120px;height: 25px;" name="">
<option value="" disabled="">北京</option>
<option value="" selected="">湖北</option>
<option value="">湖南</option>
</select>
</label>
textarea文本區域（多行文本框）
<lable style="text-align: left;vertical-align: top;" for="">個人描述：
<textarea name="" rows="" cols="" style="width: 240px;height: 100px;"></textarea>
</lable>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單</title>
<style type="text/css">
#m{
width: 440px;
height: 500px;
background-color: #F2F2F2;
margin: auto;
}
#h{
width: 400px;
height: 70px;
margin: auto;
border-bottom: 1px solid darkgray;
}
#h h3{
float: left;
}
#n{
height: 400px;
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="m">
<div id="h">
<h3>注冊表單</h3>
</div>
<div id="n">
<form action="">
<lable for=""> 姓名：
<input width="240px" height="24px" type="text" name="" id="" value=""/>
</lable>
<br /><br />
<lable for="">密碼：
<input width="240px" height="24px" type="password" name="" id="" value=""/>
</lable>
<br />
<br />
<lable for="">性別：
<input type="radio" name="gender" id="" value=""/>男
<input type="radio" name="gender" id="" value=""/>女
</lable>
<br />
<br />
<lable for="">愛好：
<input type="checkbox" name="love" id="" value=""/>唱歌
<input type="checkbox" name="love" id="" value=""/>跑步
<input type="checkbox" name="love" id="" value=""/>游泳
</lable>
<br />
<br />
<lable for="">照片：
<input type="file" name="" id="" value="" />
</lable>
<br />
<br />
<lable style="text-align: left;vertical-align: top;" for="">個人描述：
<textarea name="" rows="" cols="" style="width: 240px;height: 100px;"></textarea>
</lable>
<br />
<br />
<label>籍貫：
<select style="width: 120px;height: 25px;" name="">
<option value="" disabled="">北京</option>
<option value="" selected="">湖北</option>
<option value="">湖南</option>
</select>
</label>
<br />
<br />
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
</div>
</form>
</div>
</body>
</html
