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

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>联系电话：133xxxxxxxp>
    <p>邮箱：1772470630@qq.comp>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

案例二：填写简历信息

我们经常会遇到让我们填写简历，或者填写各种信息的情况，今天我们就用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>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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

实现步骤拆解

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

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

性别男女标志：

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

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

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

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

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

相关阅读:
中外联合培养工商管理博士|社科大新加坡社科大学中文授课DBA
nginx的ip_hash算法
 c#如何使用WASM跨语言调用？
什么是EventEmitter？它在Node.js中有什么作用？
电力作业虚拟仿真培训教学平台的功能及特色介绍
 RabbitMQ中的核心概念和交换机类型
 shiro反序列化和log4j
golang的channel实现原理
 Netty源码解析一——线程池模型之线程池NioEventLoopGroup
Lazysysadmin靶机
原文地址：https://blog.csdn.net/Living_Amethyst/article/details/126799722