HTML使用案例——简历
HTML使用案例
之前我们熟悉了HTML的一些基本操作,今天我们就用这些知识来尝试着做一份简历吧~
案例一:展示简历信息
我们先来看一下完成后的效果图
![image-20220910210134518](https://i-blog.csdnimg.cn/blog_migrate/e8d05cc09d900c0307fb3ccaa0b992c7.png)
接下来我们就来实现一下吧~
具体实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>个人简历</title>
</head>
<body>
<h1>小新的简历</h1>
<h2>基本信息</h2>
<img src="image/蜡笔小新.png" width="150px" alt="证件照">
<p>应聘岗位:Java开发工程师</p>
<p>联系电话:133xxxxxxx</p>
<p>邮箱:1772470630@qq.com</p>
<a href="https://gitee.com/living-amethyst" target="_blank">我的gitee</a> <br>
<a href="https://blog.csdn.net/Living_Amethyst?spm=1000.2115.3001.5343" target="_blank">我的博客</a>
<h2>教育背景</h2>
<ol>
<li>1990-1996 双叶幼稚园 向日葵小班</li>
<li>1996-2002 双叶幼稚园 向日葵中班</li>
<li>2002-2008 双叶幼稚园 向日葵大班</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟练掌握Java的基本语法,熟悉面向对象程序设计</li>
<li>熟悉常见的数据结构,例如:顺序表、链表、二叉树、栈、队列、哈希表</li>
<li>熟练掌握MySQL数据库,可以使用SQL语句完成数据库的增删查改</li>
<li>熟练掌握进程和线程的基本概念,熟练掌握多线程编程</li>
<li>熟练掌握</li>
</ul>
<h2>项目经历</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间:2022 年 1 月 1 日到 2022 年 9 月 9 日</p>
<p>功能介绍:</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间:2022 年 1 月 1 日到 2022 年 9 月 9 日</p>
<p>功能介绍:</p>
<ul>
<li>支持错题检索</li>
<li>支持同学评价</li>
</ul>
</li>
</ol>
</body>
</html>
案例二:填写简历信息
我们经常会遇到 让我们填写简历,或者填写各种信息的情况,今天我们就用HTML实现一个填写简历信息的页面吧
先上效果图!
![image-20220910210403280](https://i-blog.csdnimg.cn/blog_migrate/45ab0560cca683a07a2cbb48917275e3.png)
是不是还不错呢!
下面看整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>个人简历</title>
</head>
<body>
<h1>请填写简历信息</h1>
<table width = "500px">
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender"><img src="image/male.png" width="18px">男
<input type="radio" name="gender"><img src="image/female.png" width="18px">女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>就读学校</td>
<td><input type="text"></td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox">前端开发
<input type="checkbox">后端开发
<input type="checkbox">测试开发
<input type="checkbox">运维开发
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="lisence">
<label for="lisence">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">查看我的状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认: </h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
实现步骤拆解
- 由于我们希望这个页面是对齐的,所以我们使用表格来完成
![image-20220910210643816](https://i-blog.csdnimg.cn/blog_migrate/8617e67271fe7e0a443df9da819d10c7.png)
- 出生日期:我们需要写成可下拉菜单
![image-20220910210744769](https://i-blog.csdnimg.cn/blog_migrate/d5241837f3347ada2d2de94f40e7f630.png)
- 性别男女标志:
这里的♂和♀ 其实是两个图片
想要获取更多这样的图片,可以浏览网站
阿里巴巴矢量图标库
- 应聘岗位:我们需要写成复选框的样式
- 已阅读要求和查看我的状态
由于红色方框是空白,所以我们需要空一列出来
![image-20220910211558763](https://i-blog.csdnimg.cn/blog_migrate/62c914e8ef555309631616c013a48f64.png)