前言❤️❤️
hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
上篇制作个人简历的博客主要练习的是一些基础标签和列表，这篇博客会通过制作简历填写页面来练习用表格来进行排版，以及表单标签各种属性的使用，label标签的优化等，增加对这些知识掌握的熟练度
同时，这也是html部分的最后一篇博客，在下篇博客就会介绍css的基础知识🐵
🎆个人主页：洋不写bug的博客>
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~
1，效果
这里为了提升用户的体验，在输入文本和需要选择的地方，都确保点击文字就能够选择或输入文本，这就要使用到label标签
2，缩进实现
上篇简历制作博客中，每行内容并没有缩进，全程都是直接用p标签来换行
这里的信息填写页面为了美观，后面有很多的缩进
这种缩进是使用表格标签来控制的，只是不加边框线
使用tr标签来区别每一行，使用td标签来控制表的缩进，下面这部分的缩进都是通过在前面加上个td来实现的
<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><h3>请应聘者确认：</h3></td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早到公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
"掌握的技能"和"项目经历"都是在表单域前面的上下正中间的位置，也是通过td标签来实现的
<tr>
<td>
<label for="skill">掌握的技能</label>
</td>
<td>
<textarea name="" id="skill" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>
<label for="project">项目经历</label>
</td>
<td>
<textarea name="" id="project" cols="30" rows="10"></textarea>
</td>
</tr>
这里这么整齐的排列，是依靠表格的，如果把"掌握的技能"的td标签去掉，会发现表的结构就会直接乱掉，代码和结果示例如下：
<tr>
<label for="skill">掌握的技能</label>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
3，使用label标签优化
在制作这种信息填写页面时，为了提升用户的体验，只要是需要选择或者填信息，都要加上label标签：
所有的选择，点击文字就能选上
所有需要输入内容的地方，点击前面的文字，输入框中的光标就会闪动，就可以输入了
4，图案的使用
在性别选择这里，有男女的图标，这个就是照片导进去的
这些图标在阿里巴巴矢量图标库里面找（点击下面的超链接即可进入）：
阿里巴巴矢量图标库
进入网站后在搜索框中分别输入男和女查询，再以png格式下载
下载后可以移到放html的目录中，方便导入
这里就是用lable标签来包裹img标签和文字，因此点击文字还是图片都可以选择性别
直接导入的话会发现图片有点大，需要改一下尺寸
宽和高只需改一个，另一个会等比放大缩小，这里图像跟文字大小相似，可以从低像素开始尝试，试到20，会发现刚刚好
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">
<img src="./男.png" alt="" width="20">男
</label>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./女.png" alt="" width="20">女
</label>
</td>
</tr>
5，html源码
<!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><h1>请填写简历信息</h1></thead>
<tr>
<td>
<label for="name">姓名</label>
</td>
<td><input type="text" name="" id="name"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<label for="male">
<img src="./男.png" alt="" width="20">男
</label>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./女.png" alt="" width="20">女
</label>
</td>
</tr>
<td>出生日期</td>
<td>
<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>
</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>
<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>
<label for="skill">掌握的技能</label>
</td>
<td>
<textarea name="" id="skill" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>
<label for="project">项目经历</label>
</td>
<td>
<textarea name="" id="project" cols="30" rows="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><h3>请应聘者确认：</h3></td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早到公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
结语💕💕
这个简历填写界面就需要对前面的知识有一定的掌握，可以通过这个练习发现薄弱点，进而复习，把它们补上去，学好html
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉
2075
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
