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

HTML使用案例——简历

  • HTML使用案例
    • 案例一:展示简历信息
    • 案例二:填写简历信息
      • 实现步骤拆解

HTML使用案例

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

案例一:展示简历信息

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

学了HTML,快来试着做一份简历吧_第1张图片

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

具体实现代码

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>联系电话:133xxxxxxxp>
    <p>邮箱:[email protected]p>
    <a href="https://gitee.com/living-amethyst" target="_blank">我的giteea> <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实现一个填写简历信息的页面吧

先上效果图!

学了HTML,快来试着做一份简历吧_第2张图片

是不是还不错呢!

下面看整体代码

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>1999option>
                    <option>2000option>
                    <option>2001option>
                    <option>2002option>
                    <option>2003option>
                    <option>2004option>
                select>
                
                <select>
                    <option>--请选择月份--option>
                    <option>1option>
                    <option>2option>
                    <option>3option>
                    <option>4option>
                    <option>5option>
                    <option>6option>
                    <option>7option>
                    <option>8option>
                    <option>9option>
                    <option>10option>
                    <option>11option>
                    <option>12option>
                select>

                <select>
                        <option>--请选择日期--option>
                        <option>1option>
                        <option>2option>
                        <option>3option>
                        <option>4option>
                        <option>5option>
                        <option>6option>
                        <option>7option>
                        <option>8option>
                        <option>9option>
                        <option>10option>
                        <option>11option>
                        <option>12option>
                        <option>13option>
                        <option>14option>
                        <option>15option>
                        <option>16option>
                        <option>17option>
                        <option>18option>
                        <option>19option>
                        <option>20option>
                        <option>21option>
                        <option>22option>
                        <option>23option>
                        <option>24option>
                        <option>25option>
                        <option>26option>
                        <option>27option>
                        <option>28option>
                        <option>29option>
                        <option>30option>
                        <option>31option>
                    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>

实现步骤拆解

  • 由于我们希望这个页面是对齐的,所以我们使用表格来完成
学了HTML,快来试着做一份简历吧_第3张图片
  • 出生日期:我们需要写成可下拉菜单
学了HTML,快来试着做一份简历吧_第4张图片
  • 应聘岗位:我们需要写成复选框的样式

image-20220910211056774

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

image-20220910211442679

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

ing.aliyuncs.com/img/202209102107000.png" alt=“image-20220910210744769” style=“zoom: 67%;” />

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

[外链图片转存中…(img-WNOX9u7l-1662815804761)]

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

[外链图片转存中…(img-E6WJLt6x-1662815804765)]

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

学了HTML,快来试着做一份简历吧_第5张图片

你可能感兴趣的:(html,html,前端)