表格
table標(biāo)簽（表格）篷店、tr標(biāo)簽（行）、td標(biāo)簽（標(biāo)準(zhǔn)單元格）臭家、caption標(biāo)簽（標(biāo)題）船庇、th標(biāo)簽（表頭單元格）吭产。
為了更深一層對表格進(jìn)行語義化，HTML引入了thead鸭轮、tbody和tfoot這三個標(biāo)簽臣淤。這三個標(biāo)簽把表格分為三部分：表頭、表身窃爷、表腳邑蒋。
標(biāo)簽 說明
table 表格
caption 標(biāo)題
thead 表頭（語義劃分）
tbody 表身（語義劃分）
tfoot 表尾（語義劃分）
tr 行
th 表頭單元格
td 表格單元格
<table>
<caption>考試成績表</caption>
<thead>
<tr>
<th>姓名</th>
<th>語文</th>
<th>英語</th>
<th>數(shù)學(xué)</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小紅</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
表格樣式美化
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 6px;
color: blue;
}
</style>
給表格添加邊框，設(shè)置字體顏色按厘，
以及給單元格設(shè)置一些padding
練習(xí)制作商品表格
表單
表單就是收集用戶信息的医吊，就是讓用戶填寫的、選擇的逮京。
<div> <h3>歡迎注冊本網(wǎng)站</h3>
<form> 所有的表單內(nèi)容卿堂，都要寫在form標(biāo)簽里面</form>
</div>
form是英語表單的意思，form中間可以添加文本框懒棉、密碼框草描、單選按鈕、復(fù)選框策严、下拉列表穗慕、按鈕、文本域等內(nèi)容
1.文本框
<input type="text" value="默認(rèn)值" />
2.密碼框
<input type="password"/>
3.單選按鈕
<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女
input的type的值如果是radio就是單選按鈕妻导。
需要注意的是必須要有相同的name屬性逛绵，單選按鈕才能互斥。
label標(biāo)簽
<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label>
input元素要有一個id倔韭，然后label標(biāo)簽就有一個for屬性术浪，和id相同，就表示綁定了寿酌，這個label和input就有綁定關(guān)系了胰苏。點擊label標(biāo)簽中的文字就可以選擇相應(yīng)的單選框
4.復(fù)選框
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
復(fù)選框，最好也是有相同的name（便于服務(wù)器端收集用戶選中的信息）份名。
5.下拉列表
<select>
<option>吃飯</option>
<option>睡覺</option>
<option>打豆豆</option>
</select>
select就是“選擇”，
select標(biāo)簽和ul妓美、ol僵腺、dl一樣，都是組標(biāo)簽
option“選項”壶栋。
6.文本域
<textarea cols="20" rows="10"></textarea>
cols屬性表示columns“列”辰如，
rows屬性表示rows“行”。
值就是數(shù)字贵试，表示行數(shù)和列數(shù)琉兜。標(biāo)簽對兒中間的文字是默認(rèn)出現(xiàn)在文本框的文字凯正，一般不需要寫字。
7.按鈕
普通按鈕
<input type="button" value="我是一個普通按鈕" />
button就是英語“按鈕”的意思豌蟋。value的“值”就是按鈕上面顯示的文字廊散。
提交按鈕
<input type="submit" />
submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字梧疲。這個按鈕點擊允睹，表單會提交到服務(wù)器。
重置按鈕
<input type="reset" />
reset就是“復(fù)位”“重置”的意思幌氮，可以重置前面各個表單元素中填寫的值缭受。
只讀和禁用
<input name="name" type="text" value="張三" readonly="readonly">
<input type="submit " disabled="disabled" value="保存" >
練習(xí)制作調(diào)查問卷
項目實戰(zhàn)
制作商品搜索表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="reset.css" rel="stylesheet">
<style>
.search{
width: 409px;
margin: 0 auto;
margin-top: 60px;
height: 40px;
}
.search .input{
width: 300px;
height: 36px;
border: 3px solid red;
font-size: 20px;
}
.search .btn{
vertical-align: top;
height: 44px;
width: 100px;
margin-left: -3px;
border: 0px solid black;
background-color: red;
color: white;
font-size: 18px;
font-weight: bold;
letter-spacing: 6px;
}
</style>
</head>
<body>
<div class="search">
<form>
<input type="text" class="input" placeholder="書名">
<input type="button" value="搜索" class="btn">
</form>
</div>
</body>
</html>
課后作業(yè)
1.制作搜索框（表單樣式）
2.制作個人信息（ 表單）
3.制作課程表（表格）
