【前端寻宝之路】学习如何使用HTML实现简历展示和填写

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法
​💫个人格言:“没有罗马,那就自己创造罗马~”

back and forth 来回地,反复地

文章目录

    • `个人简历展示`
    • `效果展示`
    • `简历填写`
    • `简历填写展示`

个人简历展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Aileen</h1>
    <div>
        <h2>基本信息</h2>
        <img src="https://profile-avatar.csdnimg.cn/cf4e4b9738f54663a988881738dc5837_aileenvov.jpg!1" alt="">

        <span><p>求职意向:JAVA开发</p></span>
        <span><p>联系电话:178******42</p></span>
        <span><p>个人邮箱:aileen******08@qq.com</p></span>
        <span><p><a href="https://github.com/Aileen0v0">my Gitee</a></p></span>
        <span><p><a href="https://blog.csdn.net/Aileenvov?type=blog">my blog</a></p></span>
    </div>

    <div>
        <h2>教育背景</h2>
        <!-- 有序列表 -->
        <ol>
            <li>小学</li>
            <li>初中</li>
            <li>高中</li>
            <li>大学</li>
        </ol>
    </div>
    <div>
        <h2>专业技能</h2>
        <!-- 无序列表 -->
        <ul>
            <li>掌握java,python相关的编程</li>
            <li>熟练运用MySQL进行数据库的基本操作</li>
            <li>掌握数据结构</li>
            <li>掌握前端相关技能,html,CSS,JavaScript</li>
            <li>熟知计算机网络理论,并且可以独立排查常见问题</li>

        </ul>
    </div>
    <div>
        <h2>个人项目</h2>
        <ol>
            <h3><li>留言墙</li></h3>
            <p>开发时间:2023年3月12日-2023年3月30日</p>
            <p>功能介绍</p>
            <UL>
                <LI>措词检测</LI>
                <LI>支持同学探讨</LI>
            </UL>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>热爱生活,热爱编程,积极阳光</p>
    </div>

<!-- 通过表格完成页面布局 -->

</body>
</html>

效果展示

在这里插入图片描述

简历填写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <head><h3>请填写简历信息</h3></head>
        <tr>
            <td>
                <label for="name">姓名:</label>
            </td>
            <td><input type="text" name="" id="name" ></td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <!-- name的值一样就只能选其中一个 -->
                <input type="radio" name="sex" id="male" checked="checked">
                <label for="male">
                <img src="./male.png" alt="" width="20" height="20">男
                </label>
                <input type="radio" name="sex" id="female">
                <label for="female">
                <img src="./female.png" alt="" width="20" height="20">女
                </label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="school">就读学校</label>
            </td>
            <td>
                <input type="text" id="school">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" name="" id="fe">
                <label for="fe" >前端开发</label>
                <input type="checkbox" name="" id="sever">
                <label for="sever" >后端开发</label>
                <input type="checkbox" name="" id="test">
                <label for="test" >测试开发</label>
                <input type="checkbox" name="" id="yunwei">
                <label for="yunwei" >运维开发</label>
            </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="read">
                <label for="read">我已仔细阅读公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">查看我的状态</a> </td>
        </tr>
        <tr>
            <td></td>
            <td><h3>应聘者确认信息</h3></td>
            <!-- UL无序列表 -->
        </tr>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>可以尽早去公司实习</li>
                    <li>可以接受加班</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

简历填写展示

在这里插入图片描述
](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/425409.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

哈希表是什么？

哈希表是什么？

一、哈希表是什么&#xff1f; 哈希表&#xff0c;也称为散列表&#xff0c;是一种根据关键码值&#xff08;Key value&#xff09;直接进行访问的数据结构。它通过把关键码值映射到表中一个位置来访问记录&#xff0c;从而加快查找速度。这个映射函数叫做散列函数&#xff08…
阅读更多...
【字符串相加】

【字符串相加】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 字符串相加 方法一&#xff1a; 方法二&#xff1a; 总结 前言 世上有两种耀眼的光芒&#xff0c;一种是正在升起的太阳&#xff0c;一种是正在努力学习编程的…
阅读更多...
给你N个整数，要求删除最大和最小的数之后按原顺序输出。

给你N个整数，要求删除最大和最小的数之后按原顺序输出。

给你N个整数&#xff0c;要求删除最大和最小的数之后按原顺序输出。 输入输出格式 输入描述: 第一行输入一个整数N&#xff0c;N<100。 第二个输入N个整数。 输出描述: 按题意输出。#include <iostream> using namespace std; int main() {int n;cin >> n;int…
阅读更多...
Vue2-＞3

Vue2-＞3

Vue2->3 认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势 使用create-vue搭建Vue3项目1. 认识create-vue2. 使用create-vue创建项目 熟悉项目和关键文件组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. <script setup>语法糖…
阅读更多...
Scratch 第十六课-弹珠台游戏

Scratch 第十六课-弹珠台游戏

第十六课-弹珠台游戏 大家好&#xff0c;今天我们一起做一款弹珠台scratch游戏&#xff0c;我们也可以叫它弹球游戏&#xff01;这款游戏在刚出来的时候非常火爆。小朋友们要认真学习下&#xff01; 这节课的学习目标 物体碰撞如何处理转向问题。复习键盘对角色的控制方式。…
阅读更多...
ubuntu环境下docker容器详细安装使用

ubuntu环境下docker容器详细安装使用

文章目录 一、简介二、ubuntu安装docker1.删除旧版本2.安装方法一3. 安装方法二&#xff08;推荐使用&#xff09;4.运行Docker容器5. 配置docker加速器 三、Docker镜像操作1. 拉取镜像2. 查看本地镜像3. 删除镜像4. 镜像打标签5. Dockerfile生成镜像 四、Docker容器操作1. 获取…
阅读更多...
AtCoder ABC343 A-D题解

AtCoder ABC343 A-D题解

Problem A: 签到题。 #include <bits/stdc.h> using namespace std; int main(){int A,B;cin>>A>>B;for(int i0;i<10;i){if(i!(AB))cout<<i<<endl;//记得return} } Problem B: 依旧签到。 include <bits/stdc.h> using namespace …
阅读更多...
实用工具：实时监控服务器CPU负载状态并邮件通知并启用开机自启

实用工具：实时监控服务器CPU负载状态并邮件通知并启用开机自启

作用&#xff1a;在服务器CPU高负载时发送邮件通知 目录 一、功能代码 二、配置开机自启动该监控脚本 1&#xff0c;配置自启脚本 2&#xff0c;启动 三、功能测试 一、功能代码 功能&#xff1a;在CPU负载超过预设置的90%阈值时就发送邮件通知&#xff01;邮件内容显示…
阅读更多...
求阶乘。。

求阶乘。。

&#xff01;&#xff01;&#xff01;答案解释摘录自蓝桥云课题解 问题描述 满足N!的末尾恰好有个0的最小的N是多少? 如果这样的N不存在输出-1。 输入格式 一个整数 K 输出格式 一个整数代表答案 样例输入 2 样例输出 10 import os import sys# 请在此输入您的代码 def coun…
阅读更多...
懒人必备|视频号片段提取实战教程!

懒人必备|视频号片段提取实战教程!

你是否也为如何提取视频号的视频感到困扰&#xff1f;想要留住那些美好瞬间&#xff0c;但又不知道改如何操作&#xff1f;别瞎找了&#xff01;今天就让我来教你正确的步骤&#xff0c;让你轻松成为“提取达人”&#xff01; 首先&#xff0c;打开想要提取的视频&#xff0c;找…
阅读更多...
某u盘 对比 sd卡+读卡器

某u盘 对比 sd卡+读卡器

部分 u盘 性能甚至不如 读卡器SD卡 电脑 支持USB3 gen2 的 USBA接口(u盘用) 和 typec接口(读卡器用) 极致性能需求可考虑: m.2固态硬盘盒m.2固态 设备 速度对比 迅雷... 拷贝文件信息 共用格式化信息
阅读更多...
青少年软件编程（Python）等级考试试卷（一级）2020年3月

青少年软件编程（Python）等级考试试卷（一级）2020年3月

青少年软件编程&#xff08;Python&#xff09;等级考试试卷&#xff08;一级&#xff09;2020年3月 第 1 题 【单选题】 运行下方代码段&#xff0c;输出的是( )。 print("a"*3) A :a3 B :3a C :a a a D :aaa 正确答案:D 试题解析 第 2 题 【单选题】 下…
阅读更多...
SpringBoot整合rabbitmq-重复消费问题

SpringBoot整合rabbitmq-重复消费问题

说明&#xff1a;重复消费的原因大致是生产者将信息A发送到队列中&#xff0c;消费者监听到消息A后开始处理业务&#xff0c;业务处理完成后&#xff0c;监听在告知rabbitmq消息A已经被消费完成途中中断&#xff0c;也就时说我已经处理完业务&#xff0c;而队列中还存在当前消息…
阅读更多...
【C++】类的默认成员函数（上）

【C++】类的默认成员函数（上）

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、默认成员函数二、构造函数构造函数的概念及特性 三、析构函数析构函数的特性…
阅读更多...
#QT（DEMO2-登录界面）

#QT（DEMO2-登录界面）

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;DEMO登录 3.记录 Line Edit输入不换行 密码框输入如下设置: 运行效果 4.代码
阅读更多...
使用Matplotlib绘制圆环图

使用Matplotlib绘制圆环图

圆环图是饼图的修改版&#xff0c;中间区域被切掉。圆环图更关注使用弧的面积来以最有效的方式表示信息&#xff0c;而不是饼图&#xff0c;饼图更关注比较切片之间的比例面积。圆环图在空间方面更有效&#xff0c;因为圆环图内部的空白空间可用于显示有关圆环图的一些附加信息…
阅读更多...
【C++那些事儿】深入理解C++类与对象：从概念到实践（中）| 默认构造函数 | 拷贝构造函数 | 析构函数 | 运算符重载 | const成员函数

【C++那些事儿】深入理解C++类与对象：从概念到实践（中）| 默认构造函数 | 拷贝构造函数 | 析构函数 | 运算符重载 | const成员函数

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构冒险记 ✅C那些事儿 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 1. 类的6个默认成员函数2. 构造函数2.1 概念2.2 特性 3. 析构函数3.1 概念3.2 特性 4. 拷贝…
阅读更多...
flutter 文字一行显示，超出换行

flutter 文字一行显示，超出换行

因为app有多语言&#xff0c;中文和其他语言长度不一致&#xff0c;可能导致英文会很长。 中文样式 英文样式 代码 Row(mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.end,children: [Visibility(visible: controller.info.fee ! null,ch…
阅读更多...
产品经理岗位的任职资格和职业规划

产品经理岗位的任职资格和职业规划

产品经理主要是商业银行以客户为导向的&#xff0c;具体负责组织银行某一金融产品线的创新设计、生产营销和管理服务的工作。这类人士主要负责应用实施工作&#xff0c;其中产品线由一系列的产品构成&#xff0c;公司的产品经理主要分为全过程产品创新设计专家、全过程产品生产…
阅读更多...
驾驭栈和队列,首先逃不开这些(有效括号、栈和队列相互模拟、循环队列)

驾驭栈和队列,首先逃不开这些(有效括号、栈和队列相互模拟、循环队列)

一.有效括号 . - 力扣&#xff08;LeetCode&#xff09; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须…
阅读更多...
最新文章

Copyright @ 2022~2023