学习了基本的HTML知识后,今天尝试用Html做一份个人简历。需要用到的基础知识是:
Html表格:以<table></table>标签作为开始,<tr></tr>作为行,<td></td>作为列。
<th></th>是表头(特殊的<tr>),<caption></caption>为表名。
HTML表单:使用<input type=“ XXX”> (XXX)取决于想要输入的类型,制作个人简历时,我主要用到“type”,“file”
个人简历实则上就是一份表格,表格制作时,注意“width","height"等属性,表格制作完成后,再在相应地方加入表单,增加表格交互性,个人简历就做好了。
代码放在下方,欢迎大家指正交流。
<!DOCTYPE html>
<html lang="en"><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>
</head><body><table border="1" cellpadding="0" align="center"><caption align="center"><h3>个人简历</h3></caption><tr><td width="110px " hight="25px " align="center">姓名</td><td width="110px " hight="25px " align="center"><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">性别</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">出生年月</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " rowspan="4 "><input type="file" style="width:110px; "></td></tr><tr><td width="110px " hight="25px " align="center">民族</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">政治面貌</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">身高</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td></tr><tr><td width="110px " hight="25px " align="center">学制</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">学历</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">户籍</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td></tr><tr><td width="110px " hight="25px " align="center">学制</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">学历</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td><td width="110px " hight="25px " align="center">户籍</td><td width="110px " hight="25px " align="center "><input type="text" style="width:110px;"></td></tr><tr><td hight="25px " align="center">专业</td><td hight="25px " align="center "></td><td colspan="2 " hight="25px " align="center">毕业学校</td><td colspan="3 " hight="25px " align="center "><input type="text" style="width:335px; "></td></tr><tr><td colspan="7 " align="center " hight="25px " align="center">技能,特长或爱好</td></tr><tr><td hight="25px " align="center">外语等级</td><td colspan="2 " hight="25px " align="center "><input type="text" style="width:222px; "></td><td hight="25px " align="center">计算机</td><td colspan="3 " hight="25px " align="center "><input type="text" style="width:337px; "></td></tr><tr><td colspan="7 " hight="25px " align="center">个人履历</td></tr><tr><td hight="25px " align="center">时间</td><td colspan="2 " hight="25px " align="center">单位</td><td colspan="4 " hight="25px " align="center">经历</td></tr><tr hight="25px"><td hight="25px" align="center "><input type="text" style="width:110px;"></td><td colspan="2" hight="25px " align="center "><input type="text" style="width:222px; "></td><td colspan="4" hight="25px " align="center "><input type="text" style="width:457px; "></td></tr><tr hight="25px "><td hight="25px " align="center" input type="text"><input type="text" style="width:110px;"></td><td colspan="2 " hight="25px " align="center "><input type="text" style="width:222px; "></td><td colspan="4 " hight="25px " align="center "><input type="text" style="width:457px; "></td></tr><tr hight="25px "><td hight="25px " align="center" input type="text"><input type="text" style="width:110px;"></td><td colspan="2 " hight="25px " align="center "><input type="text" style="width:222px; "></td><td colspan="4 " hight="25px " align="center "><input type="text" style="width:457px; "></td></tr><tr><td colspan="7 " align="center " hight="25px ">联系方式</td></tr><tr><td hight="25px " align="center">通信地址</td><td colspan="2 " hight="25px " align="center "><input type="text" style="width:222px; "></td><td hight="25px " align="center">联系方式</td><td colspan="3 " hight="25px " align="center "><input type="text" style="width:337px; "></td></tr><tr><td hight="25px " align="center">E-mail</td><td colspan="2 " hight="25px " align="center "><input type="text" style="width:222px; "></td><td hight="25px " align="center">邮编</td><td colspan="3 " hight="25px " align="center "><input type="text" style="width:337px; "></td></tr><tr><td colspan="7 " align="center " hight="25px ">自我评价</td></tr></table>
</body>
运行后效果如图