HTML的常用标签及属性 —— form表单

Original 2018-11-08 16:13:17 387
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习HTML的第七节课 —— form表单</title> <link rel="shortcut ico
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学习HTML的第七节课 —— form表单</title>
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<style type="text/css">
		input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top:20px; padding: 20px; }
		button{height: 50px;width: 300px;margin-top:20px; background: #04BAFB; border: none; color:#fff; }
	</style>
</head>
<body>
	<form method="get/post" action="url地址">
		<input type="text" name="username" placeholder="QQ号码/手机/邮箱"><br>
		<input type="password" name="pwd" placeholder="密码"><br>
		<button>登录</button>
	</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学习HTML的第八次课 —— 表格(table)</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	table{ border: 1px solid #ccc; border-collapse: collapse;}
	tr td{height: 200px;border: 1px solid #ccc;width: 100px; text-align: center;}
	tr th{height: 50px;border: 1px solid #ccc;width: 100px;}
	</style>


</head>
<body>
	<table>
	<tr>
		<th>一</th>
		<th>二</th>
		<th>三</th>
		<th>四</th>
		<th>五</th>
		<th>六</th>
	</tr>
	<tr>
		<td colspan="6";>合并列</td>
	</tr>
	<tr>
		<td rowspan="3">合并行一</td>
		<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>

第一部分代码是通过老师讲解的form表单所做的模拟QQ登录界面,第二部分是由老师讲解的表格,自己做了一个表格。

Correcting teacher:灭绝师太Correction time:2018-11-08 16:25:37
Teacher's summary:将所学到的知识点都运用了很棒,继续保持!

Release Notes

Popular Entries