用HTML做一份个人简历

最新推荐文章于 2024-06-14 15:33:06 发布
最新推荐文章于 2024-06-14 15:33:06 发布
阅读量8k 收藏 81
点赞数 14
分类专栏： html基础入门 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYuAYuLuuu/article/details/117565278
版权
"本文档介绍了一位初学者如何使用HTML制作个人简历，包括使用表格和表单元素，如, , 等，以及如何设置样式属性如width和height。简历模板包含了姓名、性别、出生年月等个人信息，以及教育背景、技能和联系方式等部分，增加了文件上传功能，提高了交互性。"
摘要由CSDN通过智能技术生成

学习了基本的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
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML写个人简历
Ricardo的博客
04-10 1854
利用html写一个个人简介的页面
用HTML做的个人简历
05-28
在本主题中，我们将深入探讨如何利用HTML来制作一份专业且吸引人的个人简历。 首先，简历的核心部分应包括个人信息、教育背景、工作经验、技能清单以及项目经验等。在HTML中，我们可以使用不同的标签来组织这些内容...
html代码做的个人简历
09-12
HTML做的个人简历，非常好看，很适合个人主页 ，初学前端做的
用html css做的个人简历
06-20
用html css做的个人简历适合初学者借鉴，可用于完成作业。
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS） (1)
最新发布
HTML网页设计
06-14 438
🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作
HTML个人简历
10-08
利用HTML5语言编写的个人简历有兴趣的的朋友可以下载下来学习一下
使用HTML写一个个人简历
琅枫的博客
04-14 4781
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body> <div style="width: 1000px; height: 2000px;"> <table border="1px" cellspacing="0px" cellpadding="0px
用Bootstrap做一款酷炫的个人简历.rar
02-19
这款基于Bootstrap的个人简历模板，可以帮助你利用现代Web技术制作一款吸引眼球的在线简历，从而在求职竞争中脱颖而出。 Bootstrap的核心特性包括网格系统、预定义的组件和JavaScript插件，这些都能帮助开发者轻松...
科技感个人简历html网页模板下载.rar
07-11
科技感个人简历html网页模板下载 充满科技感的蓝色风格的个人简历个人介绍页面模板 ...我们的模板保证您拥有一份炫酷科技感十足的个人简历，拥有这样 一份科技感爆表的简历，绝对能帮助你吸引企业单位的目光和欣赏
一份标准的个人简历.doc
01-27
个人简历是个人职业生涯中非常重要的一部分，它是个人职业发展和职业规划的重要工具。个人简历可以帮助个人展示自己的技能、经历和成就，提高自己的职业竞争力。 二、标准的个人简历模板 标准的个人简历模板包括...
用HTML和CSS编辑一份简历页面-附件资源
03-05
用HTML和CSS编辑一份简历页面-附件资源
html个人简历
08-08
html个人简历，div标签写的，欢迎大家指点交流，谢谢大家
HTML个人简历模板
11-23
HTML个人简历，非常好看，适合个人主页，非常非常非常帅气
html 个人简介
12-24
很好啊！这是用html做的个人简介！很有用啊！
个人简历HTML页面
10-13
一个简单的HTML个人简介网页，在第十七行可以修改背景图片的路径，请按自己的实际情况修改即可，否则将无背景图案。不懂代码请不要随便修改，只需要修改其中的文字即可。会的勿喷。谢谢
HTML制作简历
weixin_45041748的博客
06-02 1735
利用HTML制作简历 1.title：鼠标放到图片上面时显示的文字 2. :建立表格 3.cellspacing：表格中单元格与单元格之间的距离 4.cellpadding：表格中单元格内容与边框之间的距离 5.border：表格边框 6.：行/单元格 7.：列/单元格 8.：表头 9.align：水平对齐方式 - left：左；right：右；center：居中 10.valign：垂直对齐方式 - top：上；bottom：下；middle：中间 11.rowspan=“2” ：合并上下单元格 12.c
用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制作个人简历
qq_48617322的博客
07-21 726
使用html的表格元素制作个人简历
制作个人简历的html的web代码，能帮我写一份吗
03-27
当然可以，以下是一个简单的个人简历的HTML代码： ``` <!DOCTYPE html> <html> <head> <title>个人简历</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } h1 { font-size: 36px; margin: 0; } h2 { font-size: 24px; margin-top: 40px; } section { padding: 20px; margin: 40px; border: 1px solid #ccc; border-radius: 10px; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } .label { display: inline-block; width: 120px; font-weight: bold; } </style> </head> <body> <header> <h1>个人简历</h1> </header> <main> <section> <h2>个人信息</h2> <ul> <li> <span class="label">姓名：</span> <span>张三</span> </li> <li> <span class="label">性别：</span> <span>男</span> </li> <li> <span class="label">出生年月：</span> <span>1990年1月1日</span> </li> <li> <span class="label">联系方式：</span> <span>13888888888</span> </li> <li> <span class="label">邮箱：</span> <span>zhangsan@example.com</span> </li> </ul> </section> <section> <h2>教育背景</h2> <ul> <li> <span class="label">学历：</span> <span>本科</span> </li> <li> <span class="label">学校：</span> <span>某某大学</span> </li> <li> <span class="label">专业：</span> <span>计算机科学与技术</span> </li> <li> <span class="label">毕业时间：</span> <span>2012年6月</span> </li> </ul> </section> <section> <h2>工作经历</h2> <ul> <li> <span class="label">公司：</span> <span>某某公司</span> </li> <li> <span class="label">职位：</span> <span>软件工程师</span> </li> <li> <span class="label">工作时间：</span> <span>2012年7月至今</span> </li> <li> <span class="label">工作内容：</span> <span>负责某某项目的开发与维护</span> </li> </ul> </section> </main> </body> </html> ``` 你可以将上面的代码复制到一个文本编辑器中，保存为.html文件，然后在浏览器中打开该文件，就可以看到个人简历的效果。当然，你可以根据自己的需求进行修改和美化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值