<!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">
<!--align使整个表格在网页中心
在table中使用tr表示表格中的一行，有几个tr就有几行
thead tbody tfoot头部 中间 尾部 加上标签之后，改变位置不会改变
th代表头部单元格
-->
<tr>
<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>
<!--<td >D3</td>-->
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--colspan 横向的合并单元格-->
<td colspan="2">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>
<style>
table{
width: 50%;
border:1px solid black;/*外边框*/
margin:0 auto;
/*border-spacing: 相邻单元格的边框之间的距离(仅用于“边框分离”模式)*/
border-spacing: 0px;
/*设置表格的边框是否被合并为一个单一的边框*/
border-collapse: collapse;
}
td{
border: 1px solid black;/*内边框*/
height: 100px;
/*默认情况下，td是垂直居中的,可以通过vertical-aline来设置*/
vertical-align: middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr,
那么浏览器会自动创建一个tbody,并且将tr全都放到tbody
tr不是table的子元素
*/
tbody>tr:nth-child(odd){
background-color:#bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/*将元素设置为单元格td*/
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: olivedrab;
margin: 0 auto;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</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>
<!--
表单:
在现实生活中表单用于提交数据
在网页中也可以使用表单，使用form标签创建一个表单
-->
<!--
form的属性
action表单要提交的服务器的地址
-->
<form action="target.html">
<!--文本框
注意:数据要提交到服务器中，必须要为元素指定一个name属性
-->
文本框 <input type="text" name="hello">
密码框 <input type="password" name="password">
<!--单选按钮 必须指定一个value属性，才可以成为单选
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="i">选项一</option>
<option value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!--提交按钮-->
<input type="submit" value="注册">
</form>
</body>
</html>
同时还要写一个target.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>
<h1>您的数据已经收到！</h1>
</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>
<form action="target.html">
<!--autocomplete = "off"
关闭自动补全 即以前输入过的值 放在 form就全部都关闭了
on代表开启自动补全，off是关闭自动补全。
readonly 设置为只读，假设本来有默认的value，那么无法修改，只可以读取，但是数据可以正常提交
disabled 禁用 （直接写这两个就行），数据根本无法提交
autofocus 设置表单自动获取焦点,焦点一开始就停留在那个位置
-->
<input type="text" name="a" value="hello1" autocomplete="on">
<input type="text" name="a" value="hello2"readonly>
<input type="text" name="b" >
<input type="text" name="c" autofocus>
<br><br>
<input type="color"><br>
<input type="date">
<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>
<button type="menu">菜单</button>
</form>
</body>
</html>
3047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
