<!DOCTYPE html>
<html lang="zh">
<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>前端第一天</title>
<style>
h1,h4,li,td,select{
font-family: "楷体";
}
/* text-decoratio:none 去掉链接文字中的下划线 */
a {
text-decoration: none;
color: #00f;
}
</style>
</head>
<body>
<!-- align 使排列、整齐-->
<h1 align="center">个人信息</h1>
<!-- cellpadding 指的是单元格内文字与边框的距离-->
<!-- cellspacing 指的是两个单元格边框之间的距离-->
<table cellpadding="9" cellspacing="0" align="center">
<!-- 第一行 -->
<tr>
<!-- 第一个td标签包含左边单元格(字体加粗) -->
<td><strong>性别:</strong></td>
<!-- 第二个td标签包含右边单元格 -->
<td>
<!-- 要实现二选一(或者多选一)的单选功能,必须要有相同的name属性值 -->
<!-- label标签包含了图片和字,当鼠标移动到图片或者文字上面时,我们都可以选住内容,增强了用户体验! -->
<input type="radio" name="sex" id="nan">
<label for="nan"><img src="../images/男生头像.png" title="男"> 男</label>
<!--   表示空格 -->
<input type="radio" name="sex" id="nv">
<label for="nv"><img src="../images/女生头像.png" width="115" title="女"> 女</label>
</td>
</tr>
<!--第二行 -->
<tr>
<!-- 第一个td标签包含左边单元格(字体加粗) -->
<td><strong>生日:</strong></td>
<td>
<!-- 第一个select标签 -->
<select>
<option>--请选择出生年份--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<!-- 第二个select标签 -->
<select>
<option>--请选择出生月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- 第三个select标签 -->
<select>
<option>--请选择出生日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<!--第三行 -->
<tr>
<td><strong>所在地区:</strong></td>
<td>
<select name="" id="">
<option>--请选择地区--</option>
<option>北京市</option>
<option>武汉市</option>
<option>上海市</option>
<option>鄂州市</option>
<option>黄冈市</option>
<option>黄石市</option>
</select>
</td>
</tr>
<!--第四行 -->
<tr>
<td><strong>婚姻状况:</strong></td>
<td>
<!-- 如果想让一个单选按钮一打开就是选定的状态,需要使用checked="checked"属性-->
<input type="radio" name="marry" id="未婚" checked="checked"><label for="未婚">未婚</label>
<input type="radio" name="marry" id="已婚"><label for="已婚">已婚</label>
<input type="radio" name="marry" id="离婚"><label for="离婚">离婚</label>
</td>
</tr>
<!--第五行 -->
<tr>
<td><strong>学历:</strong></td>
<td>
<select>
<option>--请选择学历--</option>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大专</option>
<option>本科</option>
<option>硕士及以上</option>
</select>
</td>
</tr>
<!--第六行 -->
<tr>
<td><strong>兴趣爱好:</strong></td>
<td>
<input type="checkbox" name="hobby">音乐
<input type="checkbox" name="hobby">美术
<input type="checkbox" name="hobby">体育
<input type="checkbox" name="hobby">编程
<input type="checkbox" name="hobby" checked="checked">以上都是
</td>
</tr>
<!--第七行 -->
<tr>
<td><Strong>个人介绍:</Strong></td>
<td>
<textarea>不少于20个汉字</textarea>
</td>
</tr>
<!--第八行 -->
<tr>
<!-- 第八行左侧单元格没有写内容,但是仍然要写上这个标签,才能保证内容是对齐的! -->
<td></td>
<!-- submit 提交按钮 -->
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!--第九行 -->
<tr>
<td></td>
<td>
<input type="checkbox"checked="checked">我同意注册条款和会员加入标准!
</td>
</tr>
<!--第十行 -->
<tr>
<td></td>
<td>
<!-- target="_blank" 点击超链接的时候会在新的窗口中打开一个页面 -->
<!-- target="_self" 在原窗口打开一个页面,会覆盖原来的页面-->
<a href="http://www.baidu.com" target="_self">我是会员,立即登录!</a> <br>
<a href="../index1.html" target="_blank">我是会员,立即登录!</a>
</td>
</tr>
<!--第十一行 -->
<tr>
<td></td>
<td>
<h4>我承诺:</h4>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>