学了HTML，快来试着做一份简历吧

已于 2022-09-11 12:10:28 修改
阅读量6.6k 收藏 44
点赞数 11
分类专栏： html 文章标签： html 前端
于 2022-09-10 21:22:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Living_Amethyst/article/details/126799722
版权

HTML使用案例——简历

HTML使用案例

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

案例一：展示简历信息

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

image-20220910210134518

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

具体实现代码

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

是不是还不错呢！

下面看整体代码

<!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
  • 出生日期：我们需要写成可下拉菜单
image-20220910210744769
  • 性别男女标志：

image-20220911120521134

这里的♂和♀ 其实是两个图片

想要获取更多这样的图片，可以浏览网站
阿里巴巴矢量图标库

  • 应聘岗位：我们需要写成复选框的样式

image-20220910211056774

  • 已阅读要求和查看我的状态

image-20220910211442679

由于红色方框是空白，所以我们需要空一列出来

image-20220910211558763
Living_Amethyst
关注
  • 11
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
如何用HTML写一个编程员的漂亮简历，速看过来！！！
欢乐打代码！
12-15 289
【代码】如何用HTML写一个编程员的漂亮简历，速看过来！！！
〖Python WEB 自动化测试实战篇⑮〗 实战 - 自动化测试的持续集成
易编橙 · 终身成长社群，相遇已是上上签！
06-16 4万+
今天要和大家来聊聊关于自动化测试的持续集成，通过前文的学习，我们的自动化测试框架、测试的思想已经融入到了整体的代码编写过程中了。接下里的下一步就是如何让自动化测试能够像开发一样、敏捷思想一样，能够持续集成的跑起来。可能大家对持续集成还不是太了解，那就先简单的了解一下持续集成的思想吧。.....................
简历中该怎么写自己了解html,我用HTML写简历
weixin_36239768的博客
06-08 291
本文属于原创文章，转载请注明--来自桃源小盼的博客起因每次换工作写简历都是有点痛苦的事情，尤其是下载word模板，各种注册流程，有的还得买积分，冲会员，甚是不爽。就算下载好了，修改其中的一些细节也不太熟悉各种功能，由于长期不用word，早把很多设置功能抛之脑后。忽然有一天灵感涌上，这种简易的模板样式，对于一个前端工程师来说，写个页面分分钟的事，只要能把html转成pdf格式这事就成了。Puppet...
用HTML写出个人简历
weixin_60364434的博客
04-06 390
<!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>个人.
HTML标签（二）及其制作简历和填写简历的应用
blue2580的博客
05-07 558
表单控件 <form action = "https://www.baidu.com"> 用户名：<input type="text"><br> 密码:<input type ="password"> </form>
【前端寻宝之路】学习如何使用HTML实现简历展示和填写
“路漫漫其修远兮，吾将上下求索。”
03-03 2771
学习如何使用HTML实现简历展示和填写
用html做简历
wangxunsame的博客
08-21 701
<table border="1"> cellspacing="0px" style="margin:auto;" width="800px"> <tr height="50" style="text-align: center;"> <td rowspan="2" >姓名</td> <td rowspan
用html写一个简历
GZ_Wiilian的博客
06-12 4097
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .jianli{ width: 800px; height: 1000px;
1小时学会不打代码制作一个网页精美简历（1）_如何制作一份精美的网页简历
最新发布
2401_84617246的博客
04-26 970
作者名：1_bit简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。系列教程将会在流量降低时转为付费位置，流量多时将不会，各位抓紧时间学习哟~👸小媛：bit 哥，我学了很多东西，例如 php、java、html之类，可是都做不了一个应用怎么办？🐶1_bit：你是指什么应用呢？👸小媛：网站、小程序、小游戏之类都不会做。😨。
一份优秀的前端开发工程师简历是怎样的？
web前端的发展
06-22 4064
简历不仅仅是履历，它的重要作用是展示能力！！！ 在阿里常年招聘，筛过各式各样的简历，每到招聘季，筛简历、面试过程非常耗精力，当然，原因之一是我想招非常优秀的人，宁可多花些时间，另一方面，除了那些不合格的简历之外，还有好多简历语焉不详，不得不在电面时反复确认，同时为了兼顾应聘者感受，又要装作很职业的样子跟他做一些互动，往往这部分有大量被筛掉的人，这侵占了我的大片时间。为了提高这部分人的简历通过（面试...
Curriculo-teste:仅使用基本HTML编写的测试课程
04-07
在“Curriculo-teste:仅使用基本HTML编写的测试课程”中，我们可以深入探讨HTML的基本概念和核心元素，这对于初学者或者想要巩固HTML基础知识的人来说是一份极好的学习资源。 首先，HTML由一系列的元素组成，这些...
本资源是一个程序员简历模版，版幅设置适合找实习工作的在校大学生
07-13
这篇资源主要介绍的是一个针对在校大学生寻找...综上所述，这份简历模板全面展现了在校大学生作为程序员实习生的潜力和技能，覆盖了从技术到软技能的多个方面，对于寻找实习机会的大学生来说，是一个很好的参考模板。
html制作简历供人填写,求职简历制作个人定制代写
weixin_32142311的博客
06-21 587
无论是刚毕业的普通简历，还是高端人才找工作时，大多数人不知道怎样如何制作工作求职个人简历怎么写最好，五师兄是专业写简历的网站，不仅能为您量身定制代写简历，还提供了可在线制作简历的简历模板软件，可以在线填写个人简历。包括简历封面、简历自荐信、简历工作经验栏、自我评价、专业技能，可实现手机电脑同步制作。更有简历专家为您打造高水准的简历。我们的使命与存在的价值是：提高面试机率与通过率，提高客户身价从而得...
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
shsjssnn的博客
11-02 1370
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
html创建简历
怪咖`Blog
06-21 3505
html创建简历
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
HY_Sophie的博客
11-15 2271
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
用html制作一个简历
QwwwQxx的博客
03-20 8017
【代码】用html制作一个简历。
十分钟手把手教你学会用HTML制作一个静态学术简历
热门推荐
qq_54932411的博客
06-09 10万+
找到与我同名的项目gosling123456.gitHub.io，可以download下来，或者使用git命令下载，然后对其中的文件进行修改。一定要注意路径是相对路径，否则找不到你的文件。当然，如果你是老手，用绝对路径也是没问题的）（其实我的模板也是参见了温洋大神的模板，人现在在洛桑联邦理工,大家可以访问它的主页看看大神的项目）由于大佬们太想进步了，拿的奖越来越多， 简历也需要相应的调整。4.上传文件，可以参见我的另一篇博客，全是干货，没有套路。然后把刚刚下载修改的文件传到下载后的文件夹里。
用纯html写个个人简历！模版分享啦！！！
qqhxmdq的博客
09-19 2486
3. 初学程序员的码农小朋友们，可以学学网页制作，在这个框架横行的世代，学好基础是一件多么可贵的事情。比如我们的时间轴，统计图，都可以学它一学！2. 程序员可以自己加些后台，做个个人简历制作网站，圆自己一个站长梦，是不是还能增加点睡后收入？1. 改一改后台显示内容，换成自己的信息。那，它就是一个美呆了的个人简历。仅仅一个html页面，完全没有乱七八糟，保证学的明明白白。个人照片，简介，经历时间轴，个人技能统计，个人情况说明。那么，这么优雅的模板在哪儿下载呢？那么，这样的模板到底有什么用呢？
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值