<!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>
5803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
