HTML
Table表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
在现实生活中，我们经常需要使用表格来表示一些格式化数据
课程表 人名单 成绩单
同样 在网页中我们也需要使用表格，我们用table标签来创建一个表格
-->
<table border="1">
<!-- 在table中使用tr来表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<!-- roespan纵向合并单元格 -->
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">C4</td>
<td>D4</td>
</tr>
</table>
</body>
</html>
长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width='50%' align="center">
<!--
可以将一个表格分为三部分
头部thead
主体tbody
底部tfoot
th表示头部的单元格
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 50%;
border: 1px black solid;
margin: 0 auto;
/* border-spacing:指定边框之间的距离 */
/* border-collapse: collapse 设置边框合并 */
border-collapse: collapse;
}
td{
border: 1px black solid;
height: 100px;
/* 默认情况下元素在td中是垂直居中的，可以通过vertical-align设置 */
vertical-align: middle;
text-align: center;
}
tr:nth-child(2n+1){
background-color: #bfa;
}
/* tbody> tr:nth-child(2n+1){
background-color: #bfa;
} */
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
tr不是table的子元素，无法通过子元素选择器选中tr */
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 */
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>学号</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>女儿国</td>
</tr>
</table>
</body>
</html>
表单（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
表单：
在现实生活中，表单用于提交数据
在网页中也可以使用表单，网页中用于将本地的数据提交给远程的服务器
用form创建一个表单
form的属性
action 表单要提交的服务器的地址
-->
<form action="target.html">
<!--
文本框
-->
文本框<input type="text" name="username">
<br><br>
<!-- 密码框 -->
密码框<input type="password" name="password">
<!--
单选按钮
-像这种选择框,必须要指定一个value属性,value属性最终会u哦为用户填写的值
-checked可以将单选按钮设置为默认选中
-->
<br><br>
单选按钮<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">
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="注册">
</form>
</body>
</html>
表单（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="taget.html" autocomplete="off">
<!--
autocomplete="off"关闭自动补全
readonly将表单设置为只读
disabled 将表单设置为禁用
autofocus 将表单设置为自动获取焦点
-->
<input type="text" name="username">
<br><br>
<input type="text" name="a">
<br><br>
<input type="text" name="b">
<br><br>
<input type="color">
<br>
<input type="email">
<br>
<input type="submit">
<br>
<!-- 重置按钮 -->
<input type="reset">
<br>
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
Q.E.D.