关于HTML 案例_个人简历展示02

已于 2024-09-29 10:12:08 修改
阅读量237 收藏 5
点赞数 6
文章标签： 前端 html
于 2024-09-29 10:05:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dingyuan0/article/details/142628571
版权

展示效果

  • 用table进行布局
  • label 标签进行关联
    • 例如：点姓名就可以到text中去填写内容
  • input的使用
    • text 文本框
    • radio 单选框
    • select与option 选择框
    • checkbox 复选框
  • textarea
  • ul与li 无序列表
  • 文中图片是本地的

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历信息</title>
</head>
<body>
    <table>
        <thead><h3>请填写简历信息</h3></thead>
        <tr>
            <td><label for="name">姓名</label></td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" checked id="male">
                <label for="male">
                    <img src="./img/man.png" width="20ps" height="20ps">男
                </label>
                <input type="radio" name="sex" id="female">
                <label for="female">
                    <img src="./img/woman.png" width="20ps" height="20ps">女
                </label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select name="year" id="">
                    <option selected>-请选择年份-</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                </select>
                <select name="month" id="">
                    <option selected>-请选择月份-</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                </select>
                <select name="day" id="">
                    <option selected>-请选择日期-</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</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="webbox" id="pre_exp"> <label for="pre_exp">前端开发</label>
                <input type="checkbox" name="webbox" id="back_exp"> <label for="back_exp">后端开发</label>
                <input type="checkbox" name="webbox" id="tect_exp"> <label for="tect_exp">测试开发</label>
                <input type="checkbox" name="webbox" id="tran_exp"> <label for="tran_exp">运维开发</label>
                <!-- <input type="checkbox" name="webbox"> 后端开发
                <input type="checkbox" name="webbox"> 测试开发
                <input type="checkbox" name="webbox"> 运维开发 -->
            </td>
        </tr>
        <tr>
            <td>掌握技能</td>
            <td><textarea rows="8" cols="30"></textarea></td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td><textarea rows="8" cols="30"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="read">
                <label for="read">我已仔细阅读过公司的招聘要求</label>
                <!-- <input type="checkbox" id="read">我已仔细阅读过公司的招聘要求 -->
            </td>
        </tr>    
        <tr>
            <td></td>
            <td><a href="./img/man.png">查看我的状态</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认: </h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽快去公司实现</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
昨天；明天。今天。
关注
【前端】HTML实现个人简历信息展示页面
2303_80341387的博客
05-06 3326
接下来，我们可以看到每一个项目都有一个小标题，那么这些项目与项目之间可以用有序列表来表示，而功能介绍中的内容，我们又可以通过无序列表来表示。我们首先看到的是我们页面中的姓名，紧接着下面是我们的基本信息板块，教育背景板块，专业技能板块，还有我的项目板块，还有一个个人评价板块。接下来，我们还是首先看到教育背景这个标题，我们可以看到教育背景和基本信息是对应的，所以我们和基本信息一样都使用。接下来，我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面.那么此时我们就写完了我们的基本信息板块。
HTML快捷键及综合案例（简历的展示与填写）
wrrtx的博客
07-26 965
介绍HTML的一些快捷键以及综合案例（简历的展示与填写）
案例：使用HTML中的 table 标签制作一份个人简历
叶子yes的博客
07-18 1398
一、使用到的知识点 这个小案例中主要使用到的知识点是表格标签中单元格的合并，还使用到了一些表格标签里面的属性，比如宽高属性、水平对齐属性，还有表格边框的设置和合并等。二、单元格合并知识点解释1、水平方向上的单元格合并 可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向) 例如: 含义: 把当前单元格当做两个单元格来看待注意: 由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示. 一定要记住单元格...
html个人简历网页
existent
04-17 3536
html个人简历网页效果图html在线运行传送门源码声明 效果图 html在线运行传送门 源码 <!DOCTYPE html> <html lang="en"> <head> <title>王宇东的个人简历</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
html制作个人简历网页
热门推荐
existent
06-13 1万+
注: 支持二次开发,是我自己写的,因为全程都是调用网上的地址,所以没有任何其他的包需要导入和下载,一个html就可以了,但是希望大家仅做参考,毕竟每个人做出来的都是不一样的,只有你去做了,它才是你自己的 效果图 源码分享 <!DOCTYPE html> <html lang="en"> <head> <title>王宇东的个人简历</title> <meta charset="utf-8"> <meta nam
JSP的小案例＜用于JavaWeb简历展示＞
qq_52615164的博客
03-27 2425
用于JavaWeb简历作业的展示 数据库部分 管理员表 用户信息 Java部分 项目结构采用三层结构 部分代码 登录页面 <%-- Created by IntelliJ IDEA. User: zjt Date: 2022/2/18 Time: 20:49 To change this template use File | Settings | File Templates. --%> <%@ page contentType="tex
HTML综合案例练习
moteandsunlight的博客
02-26 1219
可以首先看一下我们的效果，之后再思考怎么实现总的来说，这个练习不算难。这里关于这个简历的代码编写我们不说太多，只注意以下几个内容即可：注意及时查看我们的代码是否符合预期，即一段一段测基本信息那里的内容应该是普通文字，但是注意加换行符项目那里注意不同级别的划分功能介绍是二级的无序话不多说，直接看效果和源码！！ 二、简历内容填写 首先可以看一下我们最终的效果：接下来，我们思考怎么实现。这里由于这个练习代码相对更多，更琐碎，所以这里列了一个思维导图，帮助理解。 三、总结 关于HTML 总的来讲，html还是比较简
前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写
zxc的博客
03-05 1028
HTML是由标签构成的。 并且标签一般是成对出现的，但是也有些标签是“单标签” 标签是可以嵌套的~（树形结构.DOM树等） HTML是运行在浏览器中的。 已经了解到了HTML的基本结构如下： <html> <head> <body> //需要编写的内容 </body> </head> </html> 上述基本结构不需要每
HTML常见标签及个人简历制作
guankunkunwd的博客
11-18 6468
一、前言 1、 HTML代码都是由各种各样的标签构成的。 2、HTML代码基础结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
23. Web前端网页制作 个人简历网页模板 大学生期末大作业 html+css
A240307的博客
03-21 2082
本实例以“个人”简历为主题设计，是个非常实用的Web版求职简历，应用html+css+js，全屏页面，鼠标轮换，简洁明了，适合计算机专业求职的同学实用。供大家参考。 【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！有兴趣的联系我交流分享！
html.rar_html个人简历_html简历
09-23
是一个压缩文件，包含了创建个人简历的HTML源代码，"html.doc" 可能是包含简历内容的Word文档，方便用户参照编辑或转换成HTML格式。 HTML简历是一种利用HTML技术制作的求职简历，它具有灵活性和可定制性，可以...
xml.rar_html简历_schema_xml_xml+css个人简历_xml简历
09-21
在本案例中，"xml.rar" 是一个压缩包，它包含了一个使用XML编写的个人简历。XML简历的优势在于其结构清晰，易于机器解析和人阅读。 XML文件： XML文件通常以`.xml`为扩展名，它定义了数据的结构，通过自定义标签来...
HTML5创意设计师个人简历响应式模板_html5_个人网站设计_简历_
10-03
HTML5创意设计师个人简历响应式模板是一款专为设计师量身定制的在线简历展示平台，它充分利用了HTML5的先进技术，确保在各种设备上都能提供出色的用户体验。这种模板的设计旨在突显设计师的创新能力和专业技能，同时...
摄影公司案例展示企业HTML模板_摄影相册个人案例展示企业迷你作品窄web简历简历简单黑色.rar
09-12
标题 "摄影公司案例展示企业HTML模板_摄影相册个人案例展示企业迷你作品窄web简历简历简单黑色.rar" 提供的信息表明，这是一个专为摄影公司或个人摄影师设计的HTML模板，用于展示他们的作品集和案例。这个模板可能...
摄影公司案例展示企业HTML模板_摄影 相册 个人 案例 展示 企业 迷你 作品 窄 web简历 简历 简单 黑色.zip
02-16
摄影公司案例展示企业HTML模板_摄影 相册 个人 案例 展示 企业 迷你 作品 窄 web简历 简历 简单 黑色.zip摄影公司案例展示企业HTML模板_摄影 相册 个人 案例 展示 企业 迷你 作品 窄 web简历 简历 简单 黑色.zip
day01
JiangMeiXue的博客
09-25 203
目录。
webview2加载本地页面
qq_25160759的博客
09-23 647
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
前端面试经验总结2(经典问题篇)
最新发布
rita_0567的博客
09-28 628
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
基于webComponents的纯原生前端框架
u013776700的博客
09-28 102
采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昨天；明天。今天。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值