表格
在web的歷史中昔汉，HTML的表格發(fā)揮了巨大作用懈万。最初創(chuàng)建表格就是為了以表格的形式顯示數(shù)據(jù)，后來變成了一個(gè)極受歡迎的布局工具。
但是有了CSS以后会通，CSS在布局網(wǎng)頁方面實(shí)際上會(huì)更加出色口予，所以現(xiàn)在我們使用表格的作用只有一個(gè)，就是用來表示格式化的數(shù)據(jù)涕侈。
HTML中的表格可以很復(fù)雜沪停，但是通常情況下我們不需要?jiǎng)?chuàng)建過于復(fù)雜的表格。
table tr td th
使用table標(biāo)簽創(chuàng)建一個(gè)表格驾凶。
tr表示表格中的一行牙甫。
tr中可以編寫一個(gè)或多個(gè)th和td。
th表示表頭调违。
td表示表格中的一個(gè)單元格窟哺。
caption thead tbody tfoot
caption表示表格的標(biāo)題
thead表示表格的頭部
tbody表示表格的主體
tfoot表示表格的底部
合并單元格
合并單元格指將兩個(gè)或兩個(gè)以上的單元格合并為一個(gè)單元格。
合并單元格可以通過在th或td中設(shè)置屬性來完成技肩。
橫向合并：colspan
縱向合并：rowspan
表格的樣式
之前學(xué)習(xí)的很多屬性都可以用來設(shè)置表格的樣式且轨，比如color可以用來設(shè)置文本的顏色。padding可以用來設(shè)置內(nèi)容和表格邊框的距離虚婿。
text-align：設(shè)置文本的垂直對齊旋奢。
vertical-align：設(shè)置文本的垂直對齊。
可選值：top然痊，baseline至朗，middle，bottom
border-spacing:邊框間距
border-collapse:邊框合并
- collapse：合并邊框
- separate：不合并邊框
長表格
有一些情況下表格是非常的長的剧浸，這時(shí)就需要將表格分為三個(gè)部分锹引，表頭，表格的主體唆香，表格底部
在HTML中為我們提供了三個(gè)標(biāo)簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個(gè)標(biāo)簽的作用嫌变，就來區(qū)分表格的不同的部分，他們都是table的子標(biāo)簽躬它，都需要直接寫到table中腾啥，tr需要寫在這些標(biāo)簽當(dāng)中
thead中的內(nèi)容，永遠(yuǎn)會(huì)顯示在表格的頭部
tfoot中的內(nèi)容冯吓，永遠(yuǎn)都會(huì)顯示表格的底部
tbody中的內(nèi)容倘待，永遠(yuǎn)都會(huì)顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會(huì)自動(dòng)在表格中添加tbody
并且將所有的tr都放到tbody中桑谍，所以注意tr并不是table的子元素延柠，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
<body>
<table>
頭部
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計(jì)</th>
</tr>
</thead>
中間
<tbody>
<tr>
<td>2017.03.01</td>
<td>500</td>
<td>300</td>
<td>2000</td>
</tr>
底部
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計(jì)</td>
<td>100</td>
</tr>
</tfoot>
表格的布局
以前表格更多的情況實(shí)際上是用來對頁面進(jìn)行布局的，但是這種方式早已被CSS所淘汰了
表格的列數(shù)由td最多的那行決定
表格是可以嵌套锣披，可以在td中在放置一個(gè)表格
<body>
<table border="1" width="50%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr height="100px">
<td width="20%"></td>
</tr>
<tr height="100px">
<td width="20%"></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
[圖片上傳失敗...(image-14dc85-1536678295447)]
完善clearfix
解決父子元素的外邊距重疊
.box1:before{
content: "";
/*display:table可以將一個(gè)元素設(shè)置為表格顯示*/
display: table;
}
解決父元素高度塌陷
.clearfix:after{
content: "";
display: block;
clear: both;
}
經(jīng)過修改后的clearfix是一個(gè)多功能的樣式贞间，既可以解決高度塌陷贿条，又可以確保父元素和子元素的垂直外邊距不會(huì)重疊
合并并解決兼容性
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
表單
表單的作用就是用來將用戶信息提交給服務(wù)器的
比如：百度的搜索框 注冊 登錄這些操作都需要填寫表單
-
使用form標(biāo)簽創(chuàng)建一個(gè)表單
form標(biāo)簽中必須指定一個(gè)action屬性，該屬性指向的是一個(gè)服務(wù)器的地址
當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對應(yīng)的地址<form action="demo075_target.html">
使用form創(chuàng)建的僅僅是一個(gè)空白的表單增热，我們還需要向form中添加不同的表單項(xiàng)
-
在表單中可以使用fieldset來為表單項(xiàng)進(jìn)行分組整以，可以將表單項(xiàng)中的同一組放到一個(gè)fieldset中
<fieldset> <!-- 在fieldset可以使用legend子標(biāo)簽，來指定組名 --> <legend>用戶信息</legend> -
使用input來創(chuàng)建一個(gè)文本框峻仇，它的type屬性是text
如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中公黑，還必須給表單項(xiàng)指定一個(gè)name屬性
name表示提交內(nèi)容的名字<input type="text" name="aaa"> 用戶填寫的信息會(huì)附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器
url地址?查詢字符串
-格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值，該值將會(huì)作為文本框的默認(rèn)值顯示-
在html中還為我們提供了一個(gè)專門用來選中表單中的提示文字的label標(biāo)簽label for="um"
該標(biāo)簽可以指定一個(gè)for屬性摄咆，該屬性的值需要指定一個(gè)表單項(xiàng)的id值<label for="um">用戶名</label> <!-- value是默認(rèn)值凡蚜，提示信息用：placeholder="用戶名/郵箱/手機(jī)號(hào)" --> <input id="um" type="text" name="username" value="我是value"><br><br> -
密碼框type="password"
使用input創(chuàng)建一個(gè)密碼框，它的type屬性值是password<label for="pwd">密碼</label> <input id="pwd" type="password" name="password"><br><br> -
單選按鈕type="radio"
- 使用input來創(chuàng)建一個(gè)單選按鈕吭从，它的type屬性使用radio
- 單選按鈕通過name屬性進(jìn)行分組朝蜘，name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項(xiàng)，還必須指定一個(gè)value屬性涩金，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器
如果希望在單選按鈕或者是多選框中指定默認(rèn)選中的選項(xiàng)谱醇，則可以在希望選中的項(xiàng)中添加checked="checked"屬性
性別<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
-
多選框
- 使用input創(chuàng)建一個(gè)多選框，它的type屬性使用checkbox
愛好<input type="checkbox" name="hobby" value="zq">足球 <input type="checkbox" name="hobby" value="lq">籃球 <input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球 <input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球 -
下拉列表
- 使用select來創(chuàng)建一個(gè)下拉列表
下拉列表的name屬性需要指定給select步做，而value屬性需要指定給option
- 使用select來創(chuàng)建一個(gè)下拉列表
可以通過在option中添加selected="selected"來將選項(xiàng)設(shè)置為默認(rèn)選中
當(dāng)為select添加一個(gè)multiple="multiple"副渴，則下拉列表變?yōu)橐粋€(gè)多選的下拉列表
<select name="start">
<!--
在select中可以使用optgroup對選項(xiàng)進(jìn)行分組
同一個(gè)optgroup中的選項(xiàng)是一組
可以通過label屬性來指定分組的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option標(biāo)簽來創(chuàng)建一個(gè)一個(gè)列表項(xiàng) -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="zjl">周杰倫</option>
</optgroup>
</select>
<br><br>
-
使用textarea創(chuàng)建一個(gè)文本域
自我介紹<textarea name="info"></textarea> <br><br> -
提交按鈕可以將表單中的信息提交給服務(wù)器
使用input創(chuàng)建一個(gè)提交按鈕，它的type屬性值是submit
在提交按鈕中可以通過value屬性來指定按鈕上的文字<input type="submit" value="注冊" /> -
創(chuàng)建一個(gè)重置按鈕全度，點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值
<input type="reset"> -
創(chuàng)建一個(gè)單純的按鈕煮剧，這個(gè)按鈕沒有任何功能，只能被點(diǎn)擊
<input type="button" value="按鈕"> -
除了使用input将鸵，也可以使用button標(biāo)簽來創(chuàng)建按鈕
這種方式和使用input類似轿秧，只不過由于它是成對出現(xiàn)的標(biāo)簽，使用起來更加的靈活<button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按鈕</button>
