展示效果
- 用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>
