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

news2024/9/24 7:03:00

](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)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Google Dremel和parquet的复杂嵌套数据结构表征方法解析

Google Dremel和parquet的复杂嵌套数据结构表征方法解析

转载请注明出处。作者&#xff1a;archimekai 核心参考文献&#xff1a; Dremel: Interactive Analysis of Web-Scale Datasets 文章目录 引言复杂嵌套数据结构的无损表征问题Dremel论文中提出的表征方法parquet备注 引言 Dremel是Google的交互式分析系统。Google大量采用prot…
阅读更多...
LabVIEW石油钻机提升系统数字孪生技术

LabVIEW石油钻机提升系统数字孪生技术

LabVIEW石油钻机提升系统数字孪生技术 随着数字化、信息化、智能化的发展&#xff0c;石油钻采过程中的石油钻机数字化技术提升成为了提高钻井效率、降低生产成本的重要途径。基于中石油云平台提供的数据&#xff0c;采用数字孪生技术&#xff0c;对石油钻机提升系统进行数字化…
阅读更多...
设计模式（十三）抽象工厂模式

设计模式（十三）抽象工厂模式

请直接看原文:设计模式&#xff08;十三&#xff09;抽象工厂模式_抽象工厂模式告诉我们,要针对接口而不是实现进行设计。( )-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- …
阅读更多...
Some collections -- 2024.3

Some collections -- 2024.3

一、TensorFlow Android (dataset: Mnist) We used TensorFlow to define and train our machine learning model, which can recognize handwritten numbers, called a number classifier model in machine learning terminology. We transform the trained TensorFlow mod…
阅读更多...
pytest-allure报告生成

pytest-allure报告生成

pytest生成allure报告步骤&#xff1a; 下载allure&#xff0c;配置allure报告的环境变量&#xff1a;把allure-2.13.7\bin 配置到环境变量path路径 验证&#xff1a;在dos窗口和pycharm窗口分别验证&#xff1a;allure –version 2. 生成临时的json报告 在pytest.ini配置文…
阅读更多...
挑战杯 基于深度学习的中文情感分类 - 卷积神经网络 情感分类 情感分析 情感识别 评论情感分类

挑战杯 基于深度学习的中文情感分类 - 卷积神经网络 情感分类 情感分析 情感识别 评论情感分类

文章目录 1 前言2 情感文本分类2.1 参考论文2.2 输入层2.3 第一层卷积层&#xff1a;2.4 池化层&#xff1a;2.5 全连接softmax层&#xff1a;2.6 训练方案 3 实现3.1 sentence部分3.2 filters部分3.3 featuremaps部分3.4 1max部分3.5 concat1max部分3.6 关键代码 4 实现效果4.…
阅读更多...
【k8s管理--可视化界面】

【k8s管理--可视化界面】

1、可视化界面的软件 kubernetes的可视化软件有以下这些kubernetes dashboard&#xff1a;https://github.com/kubernetes/dashboardkubesphere官网&#xff1a; https://kubesphere.io/zh/rancher 官网&#xff1a; https://www.rancher.cn/kuboard 官网&#xff1a; https:/…
阅读更多...
基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示应用

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示应用

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍TM1638键盘数码管模块概述TM1638键盘数码管…
阅读更多...
Matlab 多项式插值（曲线拟合）

Matlab 多项式插值（曲线拟合）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 由于对曲线拟合有些兴趣，这里就找了一些资料从最基本的方法来看一下曲线拟合的效果： 二、实现代码 % **********
阅读更多...
【Git】深入理解 Git 分支合并操作：git merge dev 命令详解

【Git】深入理解 Git 分支合并操作：git merge dev 命令详解

深入理解 Git 合并操作&#xff1a;git merge dev 命令详解 摘要&#xff1a;本文将深入探讨 Git 中的合并操作&#xff0c;以及如何使用 git merge dev 命令将dev 分支的修改合并到当前分支&#xff08;假设当前分支为main 分支&#xff09;中。通过详细的解释和示意图&#x…
阅读更多...
【笔记】【电子科大 离散数学】 3.谓词逻辑

【笔记】【电子科大 离散数学】 3.谓词逻辑

谓词引入 因为含变量的语句&#xff08;例如x > 3&#xff09;不是命题&#xff0c;无法进行逻辑推理。 为了研究简单命题句子内部的逻辑关系&#xff0c;我们需要对简单命题进行分解&#xff0c;利用个体词&#xff0c;谓词和量词来描述它们&#xff0c;并研究个体与总体…
阅读更多...
django MTV 静态文件js的添加方式,以及怎么优化js的加载

django MTV 静态文件js的添加方式,以及怎么优化js的加载

django MTV 静态文件js的添加方式,以及怎么优化js的加载 1&#xff1a;怎么添加js 2&#xff1a;怎么优化js的加载 django MTV 需要用到的js时&#xff0c;使用以下方式 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF…
阅读更多...
NACOS在Windows和Linux下的安装教程

NACOS在Windows和Linux下的安装教程

目录 1、Windows安装 1.1、下载安装包 1.2、解压 1.3、端口配置 1.4、启动 1.5、访问 2、Linux安装 2.1、安装JDK 2.2、上传安装包 2.3、解压 2.4、端口配置 2.5、启动 3、Nacos的依赖 1、Windows安装 开发阶段采用单机安装即可。 1.1、下载安装包 在Nacos的Git…
阅读更多...
LeetCode 面试题 08.09.括号

LeetCode 面试题 08.09.括号

括号。设计一种算法&#xff0c;打印n对括号的所有合法的&#xff08;例如&#xff0c;开闭一一对应&#xff09;组合。 说明&#xff1a;解集不能包含重复的子集。 例如&#xff0c;给出 n 3&#xff0c;生成结果为&#xff1a; [ “((()))”, “(()())”, “(())()”, “…
阅读更多...
【多模态融合】CRN 多视角相机与Radar融合 实现3D检测、目标跟踪、BEV分割 ICCV2023

【多模态融合】CRN 多视角相机与Radar融合 实现3D检测、目标跟踪、BEV分割 ICCV2023

前言 本文介绍使用雷达与多视角相机融合&#xff0c;实现3D目标检测、3D目标跟踪、道路环境BEV分割&#xff0c;它是来自ICCV2023的。 会讲解论文整体思路、输入数据分析、模型框架、设计理念、损失函数等。 论文地址&#xff1a;CRN: Camera Radar Net for Accurate, Robus…
阅读更多...
重读 Java 设计模式: 探索经典之道与 Spring 框架的设计

重读 Java 设计模式: 探索经典之道与 Spring 框架的设计

写在开头 记得大学刚毕业那会儿&#xff0c;想学点东西&#xff0c;于是拿出了《Head First 设计模式》这本书&#xff0c;就开始了阅读&#xff0c;我曾对这些模式感到晦涩难懂。然而&#xff0c;随着工作岁月的增长&#xff0c;我逐渐领悟到设计模式的价值&#xff0c;尤其是…
阅读更多...
鸿蒙实战项目开发：【短信服务】

鸿蒙实战项目开发：【短信服务】

概述 本示例展示了电话服务中发送短信的功能。 样例展示 涉及OpenHarmony技术特性 网络通信 难度级别 中级 基础信息 使用ohos.telephony.sms接口展示了电话服务中发送短信的功能。 效果预览 新建联系人首页短信页 使用说明&#xff1a; 首页点击创建联系人&am…
阅读更多...
智能驾驶及相关零部件摄像头毫米波雷达激光雷达和芯片渗透率

智能驾驶及相关零部件摄像头毫米波雷达激光雷达和芯片渗透率

一、总体情况 乘联会数据显示&#xff0c;1月1日至1月28日&#xff0c;全国乘用车厂商新能源车批发销量为56.7万辆&#xff0c;同比增长76%&#xff0c;环比下降38%&#xff1b;国内新能源车市场零售销量为59.6万辆&#xff0c;同比增长92%&#xff0c;环比下降24%。 二、销…
阅读更多...
如何在手机上中恢复已删除的照片

如何在手机上中恢复已删除的照片

市场上有大量用于恢复手机已删除照片的应用程序。您可以尝试任何合法的应用程序来恢复意外删除的视频。其中一些应用程序包括 奇客数据恢复、Disk Drill等。 恢复已删除的 Android 照片 如果您不小心从 Android 设备中删除了任何重要视频&#xff0c;无需惊慌。您可以按照这些…
阅读更多...
java基础题库详解

java基础题库详解

目录 1 JDK和JRE有什么区别&#xff1f; 1.1、JRE 1.2、JDK 2、和equals的区别是什么? 3、比较 4、装箱&#xff0c;拆箱 4.1、什么是装箱&#xff1f;什么是拆箱&#xff1f; 4.2、装箱和拆箱的执行过程&#xff1f; 4.3、常见问题 5、hashCode()相同&#xff0c;e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023