1.表格
owspan 縱向的合并單元格
colspan 橫向的合并單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
在現(xiàn)實(shí)生活中，我們經(jīng)常需要使用表格來(lái)表示一些格式化數(shù)據(jù)：
課程表、人名單、成績(jī)單....
同樣在網(wǎng)頁(yè)中我們也需要使用表格，我們通過(guò)table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格
-->
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有幾個(gè)tr就有幾行 -->
<tr>
<!-- 在tr中使用td表示一個(gè)單元格，有幾個(gè)td就有幾個(gè)單元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 縱向的合并單元格 -->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan 橫向的合并單元格
-->
<td colspan="2">C4</td>
</tr>
</table>
</body>
</html>
2. 長(zhǎng)表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table border="1" width='50%' align="center">
<!--
可以將一個(gè)表格分成三個(gè)部分：
頭部 thead
主體 tbody
底部 tfoot
th 表示頭部的單元格
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計(jì)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計(jì)</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.表格的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: 指定邊框之間的距離 */
/* border-spacing: 0px; */
/* border-collapse: collapse; 設(shè)置邊框的合并 */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 100px;
/* 默認(rèn)情況下元素在td中是垂直居中的 可以通過(guò) vertical-align 來(lái)修改*/
vertical-align:middle;
text-align: center;
}
/*
如果表格中沒(méi)有使用tbody而是直接使用tr，
那么瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody，并且將tr全都放到tbody中
tr不是table的子元素
*/
tbody > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 將元素設(shè)置為單元格 td */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>學(xué)號(hào)</td>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>28</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女兒國(guó)</td>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>28</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女兒國(guó)</td>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>28</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女兒國(guó)</td>
</tr>
</table>
</body>
</html>
4. 表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
表單：
- 在現(xiàn)實(shí)生活中表單用于提交數(shù)據(jù)
- 在網(wǎng)頁(yè)中也可以使用表單，網(wǎng)頁(yè)中的表單用于將本地的數(shù)據(jù)提交給遠(yuǎn)程的服務(wù)器
- 使用form標(biāo)簽來(lái)創(chuàng)建一個(gè)表單
-->
<!--
form的屬性
action 表單要提交的服務(wù)器的地址
-->
<form action="target.html">
<!--
文本框
注意：數(shù)據(jù)要提交到服務(wù)器中，必須要為元素指定一個(gè)name屬性值
-->
文本框 <input type="text" name="username">
<br><br>
<!--
密碼框
-->
密碼框 <input type="password" name="password">
<br><br>
<!--
單選按鈕
- 像這種選擇框，必須要指定一個(gè)value屬性，value屬性最終會(huì)作為用戶的填寫(xiě)的值傳遞給服務(wù)器
- checked 可以將單選按鈕設(shè)置為默認(rèn)選中
-->
單選按鈕 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!--
多選框
-->
多選框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">選項(xiàng)一</option>
<option selected value="ii">選項(xiàng)二</option>
<option value="iii">選項(xiàng)三</option>
</select>
<br><br>
<!--
提交按鈕
-->
<input type="submit" value="注冊(cè)">
</form>
</body>
</html>
5. 表單2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="target.html">
<!--
autocomplete="off" 關(guān)閉自動(dòng)補(bǔ)全
readonly 將表單項(xiàng)設(shè)置為只讀，數(shù)據(jù)會(huì)提交
disabled 將表單項(xiàng)設(shè)置為禁用，數(shù)據(jù)不會(huì)提交
autofocus 設(shè)置表單項(xiàng)自動(dòng)獲取焦點(diǎn)
-->
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- <input type="color"> -->
<br><br>
<!-- <input type="email"> -->
<br><br>
<input type="submit">
<!-- 重置按鈕 -->
<input type="reset">
<!-- 普通的按鈕 -->
<input type="button" value="按鈕">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
