当前位置：首页 > news >正文

关于HTML 案例_个人简历展示02

news 来源：原创 2024/9/30 16:29:06

展示效果

用table进行布局
label 标签进行关联
- 例如：点姓名就可以到text中去填写内容
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><!-- <input type="checkbox" name="webbox"> 后端开发<input type="checkbox" name="webbox"> 测试开发<input type="checkbox" name="webbox"> 运维开发 --></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><!-- <input type="checkbox" id="read">我已仔细阅读过公司的招聘要求 --></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>