<!DOCTYPE html>
<html>
<head>
<title>第2章</title>
<style type="text/css">
input{align-content: 20px;}
</style>
</head>
<body>
<!-- 简易后台 -->
<div class="Bg">
<a href="https://baidu.com"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3207781657,3460758070&fm=27&gp=0.jpg" width="200px" height="50px" alt="图片被偷吃了*%%*66" title="点下我呗"></a>
<!-- 用户注册表单 -->
<h1>用户注册表单</h1>
<form action="注册地址" method="POST/GET">
<p>
<label for="user">用户名：</label>
<input type="text" id="user" name="user" autofocus placeholder="请输入注册名" required>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="pass" placeholder="请输入密码">
</p>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id='name'>
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" id="age" min="16" max="70">
</p>
<p>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
</p>
<p>
<label for="hobby">爱好：</label>
<select name="hobby" id="hobby">
<option value="eat">吃饭</option>
<option value="sleep" selected>睡觉</option>
</select>
</p>
<p>
<label>性别：</label>
<input type="checkbox" name="gen[]" value="boy"><label>男孩</label>
<input type="checkbox" name="gen[]" value="girl"><label>女孩</label>
<input type="checkbox" name="gen[]" value="shemale"><label>人妖</label>
</p>
<p>
<label>在确定下性别呗：</label>
<input type="radio" name="gen[]" value="boy" checked><label>人妖</label>
</p>
<p>
<label>简介：</label>
<textarea name="jj" cols="30" rows="10" maxlength="20" placeholder="20个子"></textarea>
</p>
<p>
<button type='submit'>注册</button>
<input type="reset" name="reset" value="恢复默认值">
</p>
<a href="" title="登录" target="_self">马上登录</a>
<a href="" title="登录" target="_blank">qq登录</a>
<br>请同意《<a href="#reg">表格合并</a>》
</form>
</div>
<!-- 注册协议 -->
<hr>
<div style="height: 1000px;">
<a href="http://baidu.com" target="search">百度</a>
<a href="http://qq.com" target="search">腾旭</a>
<a href="http://360.com" target="search">360</a><br>
<iframe src="" frameborder="1" width="800px" height="1000px" name="search"></iframe>
</div>
<div id='reg'>
<!-- 表格合并 -->
<h2>表格合并</h2>
<table border="1" cellspacing="0" cellpadding="5">
<thead>
<tr bgcolor="red">
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题3</th>
<th>标题5</th>
</tr>
</thead>
<tbody>
<tr>
<td>标题1-1</td>
<td>标题2-2</td>
<td>标题3-3</td>
<td>标题4-4</td>
<td rowspan="4">合并列</td>
</tr>
<tr>
<td>标题1-1</td>
<td>标题2-2</td>
<td>标题3-3</td>
<td>标题4-4</td>
</tr>
<tr>
<td>标题1-1</td>
<td>标题2-2</td>
<td>标题3-3</td>
<td>标题4-4</td>
</tr>
<tr>
<td >标题1-1</td>
<td>标题2-2</td>
<td>标题3-3</td>
<td>标题4-4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合并列</td>
<td colspan="3">3个单元格</td>
<td>标题5-5</td>
</tr>
</tfoot>
</table>
<a href="#top">回到顶部</a>
</div>
</body>
</html>