展示效果
- 用table进行布局
- label 标签进行关联
- input的使用
- text 文本框
- radio 单选框
- select与option 选择框
- checkbox 复选框
- textarea
- ul与li 无序列表
- 文中图片是本地的
- 链接: 图片下载地址
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历信息</title>
</head>
<body>
<table>
<thead><h3>请填写简历信息</h3></thead>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked id="male">
<label for="male">
<img src="./img/man.png" width="20ps" height="20ps">男
</label>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./img/woman.png" width="20ps" height="20ps">女
</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select name="year" id="">
<option selected>-请选择年份-</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select>
<select name="month" id="">
<option selected>-请选择月份-</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
</select>
<select name="day" id="">
<option selected>-请选择日期-</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
</select>
</td>
</tr>
<tr>
<td><label for="school">就读学校</label></td>
<td><input type="text" id="school"></td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" name="webbox" id="pre_exp"> <label for="pre_exp">前端开发</label>
<input type="checkbox" name="webbox" id="back_exp"> <label for="back_exp">后端开发</label>
<input type="checkbox" name="webbox" id="tect_exp"> <label for="tect_exp">测试开发</label>
<input type="checkbox" name="webbox" id="tran_exp"> <label for="tran_exp">运维开发</label>
</td>
</tr>
<tr>
<td>掌握技能</td>
<td><textarea rows="8" cols="30"></textarea></td>
</tr>
<tr>
<td>项目经历</td>
<td><textarea rows="8" cols="30"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="read">
<label for="read">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td><a href="./img/man.png">查看我的状态</a></td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认: </h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽快去公司实现</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
