表格
table標(biāo)簽（表格）、tr標(biāo)簽（行）、td標(biāo)簽（標(biāo)準(zhǔn)單元格）、caption標(biāo)簽（標(biāo)題）、th標(biāo)簽（表頭單元格）。
為了更深一層對(duì)表格進(jìn)行語(yǔ)義化，HTML引入了thead、tbody和tfoot這三個(gè)標(biāo)簽。這三個(gè)標(biāo)簽把表格分為三部分：表頭、表身、表腳。
標(biāo)簽 說(shuō)明
table 表格
caption 標(biāo)題
thead 表頭（語(yǔ)義劃分）
tbody 表身（語(yǔ)義劃分）
tfoot 表尾（語(yǔ)義劃分）
tr 行
th 表頭單元格
td 表格單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<table>
<caption>考試成績(jī)表</caption>
<thead>
<th>姓名</th>
<th>語(yǔ)文</th>
<th>英語(yǔ)</th>
<th>數(shù)學(xué)</th>
</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>
</body>
</html>
效果圖
表格樣式美化
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
}
th,td{
padding: 6px;
color: blue;
}
</style>
效果圖
表單
表單就是收集用戶信息的，就是讓用戶填寫(xiě)的、選擇的。
<form> 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面</form>
<from action="xx"></form>
xx是服務(wù)器的域名或者網(wǎng)址是要提交到服務(wù)器的內(nèi)容
1.文本框
<input type="text" value="默認(rèn)值" >
<input type="text" value="name" placeholder="請(qǐng)輸入用戶名">
placeholder提示信息，當(dāng)開(kāi)始輸入信息時(shí)消失
2.密碼框
<input type="password"/>
3.單選按鈕
<input type="radio" name="命名">男
<input type="radio" name="命名">女
input的type的值如果是radio就是單選按鈕。
需要注意的是必須要有相同的name屬性，單選按鈕才能互斥。
也就是說(shuō)name要設(shè)置的一樣，才能實(shí)現(xiàn)選擇男或者選擇女
<input type="radio" name="命名" checked="checked"/>男
默認(rèn)選擇男
label標(biāo)簽
<input type="radio" name="sex" id="man" >
<label for="man">男</label>
input元素要有一個(gè)id，然后label標(biāo)簽就有一個(gè)for屬性，和id相同，就表示綁定了，這個(gè)label和input就有綁定關(guān)系了。點(diǎn)擊label標(biāo)簽中的文字就可以選擇相應(yīng)的單選框
（只要選中了男這個(gè)字就可以選擇這個(gè)按鈕
）
4.復(fù)選框
<input type="checkbox" name="aihao"/> 睡覺(jué)
<input type="checkbox" name="aihao"/> 吃飯
復(fù)選框，最好也是有相同的name（便于服務(wù)器端收集用戶選中的信息）。
5.下拉列表
<select>
<option>吃飯</option>
<option>睡覺(jué)</option>
<option>打豆豆</option>
</select>
select就是“選擇”，
select標(biāo)簽和ul、ol、dl一樣，都是組標(biāo)簽
option“選項(xiàng)”。
6.文本域
<textarea cols="20" rows="10"></textarea>
cols屬性表示columns“列”，
rows屬性表示rows“行”。
值就是數(shù)字，表示行數(shù)和列數(shù)。標(biāo)簽對(duì)兒中間的文字是默認(rèn)出現(xiàn)在文本框的文字，一般不需要寫(xiě)字。
7.按鈕
(1)普通按鈕
<input type="button" value="我是一個(gè)普通按鈕" />
button就是英語(yǔ)“按鈕”的意思。value的“值”就是按鈕上面顯示的文字。
(2)提交按鈕
<input type="submit" />
submit就是英語(yǔ)“提交”的意思。這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“提交”文字，可以寫(xiě)value=""。這個(gè)按鈕點(diǎn)擊，表單會(huì)提交到服務(wù)器。
(3)重置按鈕
<input type="reset" />
reset就是“復(fù)位”“重置”的意思，可以重置前面各個(gè)表單元素中填寫(xiě)的值。
只讀和禁用
<input name="name" type="text" value="張三" readonly="readonly">
<input type="submit " disabled="disabled" value="保存" >
練習(xí)制作調(diào)查問(wèn)卷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電子產(chǎn)品調(diào)查表</title>
<style>
h1
{
color:#800080;
}
h1 span
{
color:red;
}
div
{
margin: 10px;
}
textarea
{
margin-left: 10px;
}
</style>
</head>
<body>
<h1><span>American Metric</span> 電子產(chǎn)品調(diào)查表</h1>
<form>
<div>
請(qǐng)輸入您的姓名：<input type="text">
</div>
<div>
請(qǐng)輸入您的購(gòu)買(mǎi)日期：<input type="text">年
<select>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>日
</div>
<div>
請(qǐng)輸入您的電子郵件地址：<input type="text">
</div>
<div>
您是否查看過(guò)我們的在線產(chǎn)品目錄？
<input type="radio" name="yes">是
<input type="radio" name="yes">否
</div>
<div>
如果查看過(guò)，您對(duì)哪些產(chǎn)品有興趣購(gòu)買(mǎi)？ （選擇提供的產(chǎn)品）
</div>
<div>
<input type="checkbox"> 大屏幕電視機(jī)
<input type="checkbox"> 音頻設(shè)備
<input type="checkbox"> 視頻設(shè)備
<input type="checkbox"> 相機(jī)
</div>
<div>
在填寫(xiě)訂單之前，您還有什么問(wèn)題、意見(jiàn)或建議？
</div>
<textarea cols="40" rows="6">您的輸入：</textarea>
<div>
<input type="submit">
<input type="reset">
</div>
</form>
</body>
</html>
給每一個(gè)標(biāo)簽都放在div里是因?yàn)榭梢元?dú)立的一行的顯示內(nèi)容
