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

Living_Amethyst

已于 2022-09-11 12:10:28 修改

阅读量6.5k

点赞数 11

分类专栏： html 文章标签： html 前端

于 2022-09-10 21:22:00 首次发布

本文链接：https://blog.csdn.net/Living_Amethyst/article/details/126799722

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML使用案例——简历

HTML使用案例

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>

实现步骤拆解

由于我们希望这个页面是对齐的，所以我们使用表格来完成

出生日期：我们需要写成可下拉菜单

性别男女标志：

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

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

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

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

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

Living_Amethyst

关注

11
点赞
踩
44

收藏

觉得还不错? 一键收藏
5
评论
学了HTML，快来试着做一份简历吧

之前我们熟悉了HTML的一些基本操作，今天我们就用这些知识来尝试着做一份简历吧~我们先来看一下完成后的效果图接下来我们就来实现一下吧~具体实现代码案例二：填写简历信息我们经常会遇到让我们填写简历，或者填写各种信息的情况，今天我们就用HTML实现一个填写简历信息的页面吧先上效果图！是不是还不错呢！下面看整体代码实现步骤拆解由于我们希望这个页面是对齐的，所以我们使用表格来完成出生日期：我们需要写成可下拉菜单应聘岗位：我们需要写成复选框的样式由于红色方框是空白，所以我们需要空一列出
复制链接

扫一扫