前端基础——HTML练习项目:填写简历信息
页面效果
填写简历信息
代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table:表示整个表格 --><table><!-- thead:表格的头部区域 --><thead><h3>请填写简历信息</h3></thead><!-- tr:表格的一行 --><tr><!-- td:一个单元格 --><td><!-- label:点击label也能选中对应的单选,for属性:指定当前label和哪个相同id的input标签对应 --><label for="name">姓名</label></td><td><input type="text"name=""id="name"></td></tr><tr><td>性别</td><td><!-- 单选框radio;复选框checkbox;checked设置默认值;name相同时只能选一个 --><input type="radio"name="sex"id="male"checked="checked"><label for="male"><img src="https://img95.699pic.com/xsj/05/2y/9a.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast" alt=""width="20"height="20">男</label><input type="radio"name="sex"id="female"><label for="female"><img src="https://pic.616pic.com/ys_bnew_img/00/06/90/6YlqFNky01.jpg" alt=""width="20"height="20">女</label></td></tr><tr><td>出生日期</td><td><!-- select下拉菜单;selected="selected"表示默认选中;option提供选项 --><select name="" id=""><option value="">--请选择年份--</option><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">2003</option><option value="">2004</option><option value="">2005</option><option value="">2006</option></select><select name="" id=""><option value="">--请选择月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select name="" id=""><option value="">--请选择日期--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</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="" id="fe"><label for="fe">前端开发</label><input type="checkbox"name="" id="server"><label for="server">后端开发</label><input type="checkbox"name="" id="test"><label for="test">测试开发</label><input type="checkbox"name="" id="operation"><label for="operation">运维开发</label></td></tr><tr><td>掌握的技能</td><!-- textarea:内容框 --><td><textarea name="" id=""cols="30"row="10"></textarea></td></tr><tr><td>项目经历</td><!-- textarea:内容框 --><td><textarea name="" id=""cols="30"row="10"></textarea></td></tr><tr><td></td><td><input type="checkbox"id="read"><label for="read">我已仔细阅读公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><ul><li>以上信息真实有效</li><li>能够尽早去公司学习</li><li>能够接受公司的加班文化</li></ul></td></tr></table>
</body>
</html>