HTML使用案例

之前我们熟悉了HTML的一些基本操作，今天我们就用这些知识来尝试着做一份简历吧~

案例一：展示简历信息

我们先来看一下完成后的效果图

接下来我们就来实现一下吧~

具体实现代码

<!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实现一个填写简历信息的页面吧

先上效果图！

是不是还不错呢！

下面看整体代码

<!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>