用HTML做一份个人简历

最新推荐文章于 2024-04-20 14:25:37 发布
最新推荐文章于 2024-04-20 14:25:37 发布
阅读量7.9k 收藏 80
点赞数 14
分类专栏： html基础入门 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYuAYuLuuu/article/details/117565278
版权

学习了基本的HTML知识后，今天尝试用Html做一份个人简历。需要用到的基础知识是：

Html表格：以<table></table>标签作为开始，<tr></tr>作为行，<td></td>作为列。

<th></th>是表头（特殊的<tr>）,<caption></caption>为表名。

HTML表单：使用<input type=“ XXX”> （XXX）取决于想要输入的类型，制作个人简历时，我主要用到“type”，“file”

个人简历实则上就是一份表格，表格制作时，注意“width","height"等属性，表格制作完成后，再在相应地方加入表单，增加表格交互性，个人简历就做好了。

代码放在下方，欢迎大家指正交流。

<!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, initial-scale=1.0">
    <title>关卡三</title>
</head>

<body>
    <table border="1" cellpadding="0" align="center">
        <caption align="center">
            <h3>个人简历</h3>
        </caption>
        <tr>
            <td width="110px " hight="25px " align="center">
                姓名
            </td>
            <td width="110px " hight="25px " align="center">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                性别
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                出生年月
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " rowspan="4 ">
                <input type="file" style="width:110px; ">
            </td>
        </tr>
        <tr>
            <td width="110px " hight="25px " align="center">
                民族
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                政治面貌
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                身高
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>

        </tr>
        <tr>
            <td width="110px " hight="25px " align="center">
                学制
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                学历
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                户籍
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>

        </tr>
        <tr>
            <td width="110px " hight="25px " align="center">
                学制
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                学历
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td width="110px " hight="25px " align="center">
                户籍
            </td>
            <td width="110px " hight="25px " align="center ">
                <input type="text" style="width:110px;">
            </td>

        </tr>
        <tr>
            <td hight="25px " align="center">
                专业
            </td>
            <td hight="25px " align="center ">

            </td>
            <td colspan="2 " hight="25px " align="center">
                毕业学校
            </td>

            <td colspan="3 " hight="25px " align="center ">
                <input type="text" style="width:335px; ">
            </td>

        </tr>
        <tr>
            <td colspan="7 " align="center " hight="25px " align="center">
                技能，特长或爱好
            </td>
        </tr>
        <tr>
            <td hight="25px " align="center">
                外语等级
            </td>
            <td colspan="2 " hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td hight="25px " align="center">
                计算机
            </td>
            <td colspan="3 " hight="25px " align="center ">
                <input type="text" style="width:337px; ">
            </td>

        </tr>
        <tr>
            <td colspan="7 " hight="25px " align="center">
                个人履历
            </td>
        </tr>
        <tr>
            <td hight="25px " align="center">
                时间
            </td>
            <td colspan="2 " hight="25px " align="center">
                单位
            </td>
            <td colspan="4 " hight="25px " align="center">
                经历
            </td>
        </tr>
        <tr hight="25px">
            <td hight="25px" align="center ">
                <input type="text" style="width:110px;">
            </td>
            <td colspan="2" hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td colspan="4" hight="25px " align="center ">
                <input type="text" style="width:457px; ">
            </td>
        </tr>
        <tr hight="25px ">
            <td hight="25px " align="center" input type="text">
                <input type="text" style="width:110px;">
            </td>
            <td colspan="2 " hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td colspan="4 " hight="25px " align="center ">
                <input type="text" style="width:457px; ">
            </td>
        </tr>
        <tr hight="25px ">
            <td hight="25px " align="center" input type="text">
                <input type="text" style="width:110px;">
            </td>
            <td colspan="2 " hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td colspan="4 " hight="25px " align="center ">
                <input type="text" style="width:457px; ">
            </td>
        </tr>
        <tr>
            <td colspan="7 " align="center " hight="25px ">
                联系方式
            </td>
        </tr>
        <tr>
            <td hight="25px " align="center">
                通信地址
            </td>
            <td colspan="2 " hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td hight="25px " align="center">
                联系方式
            </td>
            <td colspan="3 " hight="25px " align="center ">
                <input type="text" style="width:337px; ">
            </td>

        </tr>
        <tr>
            <td hight="25px " align="center">
                E-mail
            </td>
            <td colspan="2 " hight="25px " align="center ">
                <input type="text" style="width:222px; ">
            </td>
            <td hight="25px " align="center">
                邮编
            </td>
            <td colspan="3 " hight="25px " align="center ">
                <input type="text" style="width:337px; ">
            </td>

        </tr>
        <tr>
            <td colspan="7 " align="center " hight="25px ">
                自我评价
            </td>
        </tr>


    </table>
</body>

运行后效果如图

 

 

在你隔壁的香飘飘
关注
  • 14
    点赞
  • 踩
  • 80
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用html做自我介绍
hduugdh的博客
05-01 7229
话不多说上代码 顺便挑战一天爆肝三篇文章 <html> <head> <title>朱**</title> <mate name="keywords" content="个人简历"/> <mate name="description" content="朱**的个人简历"/> </head> <body> <table border=5 bordercolor=red align=center&g
用HTML和CSS编辑一份简历页面-附件资源
03-05
用HTML和CSS编辑一份简历页面-附件资源
十分钟手把手教你学会用HTML制作一个静态学术简历
热门推荐
qq_54932411的博客
06-09 10万+
找到与我同名的项目gosling123456.gitHub.io，可以download下来，或者使用git命令下载，然后对其中的文件进行修改。一定要注意路径是相对路径，否则找不到你的文件。当然，如果你是老手，用绝对路径也是没问题的）（其实我的模板也是参见了温洋大神的模板，人现在在洛桑联邦理工,大家可以访问它的主页看看大神的项目）由于大佬们太想进步了，拿的奖越来越多， 简历也需要相应的调整。4.上传文件，可以参见我的另一篇博客，全是干货，没有套路。然后把刚刚下载修改的文件传到下载后的文件夹里。
个人简历html代码
m0_74864050的博客
04-20 748
联系电话:15137505886 政治面貌:团员 专业:计算机应用技术 当前学历：专科
用html制作一个简历
QwwwQxx的博客
03-20 7664
【代码】用html制作一个简历。
HTML实现个人简历
weixin_59269336的博客
08-20 2万+
<!DOCTYPE html> <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title>个人简历</title> <style type="text/css"> #person_photo { background-color: #f2f2f2; } #email,#phone { font-s
html制作好看的个人简历(源码)
03-29
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。 效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/129833983
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
科技感个人简历html网页模板下载.rar
07-11
科技感个人简历html网页模板下载 充满科技感的蓝色风格的个人简历个人介绍页面模板 ...我们的模板保证您拥有一份炫酷科技感十足的个人简历，拥有这样 一份科技感爆表的简历，绝对能帮助你吸引企业单位的目光和欣赏
html5源码-前端开发个人简历模板-fullpage全屏滚动响应式.rar
最新发布
05-18
在竞争激烈的职场中，一份独特且专业的个人简历是打开成功之门的钥匙。今天，我们为您带来了一款前沿的HTML5源码——前端开发个人简历模板，它采用fullpage全屏滚动设计，响应式布局，让您的简历在任何设备上都能...
50套HTML源码-在线个人简历&作品展示&技能介绍网页源码-可编辑调整内容.zip
03-26
这50套精心设计的HTML源码，是在线个人简历、作品展示和技能介绍网页的完美解决方案。每一套都具备独特的设计风格，响应式布局和易于导航的结构，让你的个人品牌在网络中脱颖而出。无论你是设计师、开发者还是任何...
html 个人简介
12-24
很好啊！这是用html做的个人简介！很有用啊！
html个人简介的zip压缩包
05-05
html个人简介的zip压缩包
html代码做的个人简历
09-12
HTML做的个人简历，非常好看，很适合个人主页 ，初学前端做的
在线个人作品展示&个人简历-网页源码-可编辑调整内容-85套不同风格HTML源码合集
03-26
这50套精心设计的HTML源码，是在线个人简历、作品展示和技能介绍网页的完美解决方案。每一套都具备独特的设计风格，响应式布局和易于导航的结构，让你的个人品牌在网络中脱颖而出。无论你是设计师、开发者还是任何...
用html写个人简历
weixin_44960513的博客
05-05 2万+
本文讲述了如何用html来写一份简单的个人简历 个人简历 个人简历 <table border="1" cellspacing="0px" style="margin:auto;" width="800px"> <tr height="50" style="text-align: center;"> ...
HTML常见标签及个人简历制作
guankunkunwd的博客
11-18 6184
一、前言 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
html制作个人简历
m0_64242574的博客
05-18 2万+
前几天我为大家介绍了些html的标签，利用这些标签咱们可以简单制作个简历，来巩固知识。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body background="01bb62571600ba32f8758c9b79b318.jpg@2o.jpg">
html实现好看的个人介绍，个人主页模板3(附源码)
xcLeigh
06-17 4166
html实现好看的个人介绍，个人主页模板3(附源码)，第三种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。代码备注详细，可在此基础上更加完善功能，打造属于自己的个人介绍主页。
用html和css制作一个个人简历网页
03-22
当然可以！以下是一个简单的示例： <!DOCTYPE html> <html> <head> <title>个人简历</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { text-align: center; margin-top: 50px; } .container { width: 80%; margin: 0 auto; background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .row { display: flex; flex-wrap: wrap; margin: 20px 0; } .col { flex: 1; padding: 10px; } .col:nth-child(odd) { background-color: #f2f2f2; } .col h2 { margin-top: 0; } .col p { margin-bottom: 0; } </style> </head> <body> <h1>个人简历</h1> <div class="container"> <div class="row"> <div class="col"> <h2>个人信息</h2> <p>姓名：张三</p> <p>性别：男</p> <p>年龄：25</p> <p>电话：123456789</p> <p>邮箱：zhangsan@example.com</p> </div> <div class="col"> <h2>教育背景</h2> <p>本科：XX大学</p> <p>专业：计算机科学与技术</p> <p>毕业时间：2018年</p> </div> </div> <div class="row"> <div class="col"> <h2>工作经历</h2> <p>公司：ABC有限公司</p> <p>职位：前端工程师</p> <p>时间：2018年至今</p> <p>工作内容：负责公司网站的前端开发，包括HTML、CSS、JavaScript等。</p> </div> <div class="col"> <h2>技能</h2> <p>熟练掌握HTML、CSS、JavaScript等前端技术。</p> <p>熟悉React、Vue等前端框架。</p> <p>了解Node.js、Express等后端技术。</p> </div> </div> </div> </body> </html> 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值