HTML实现个人简历信息展示页面
Hi_Html 2024-10-12 15:03:01 阅读 53
HTML 基础结构
首先，我们需要设置 HTML 的基础结构。以下是一个简单的 HTML 文档结构，其中包括头部信息和一个主体部分。
<code><!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<title>简历</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
table {
width: 60%;
border-collapse: collapse;
margin-bottom: 20px;
}
td {
padding: 8px;
border: none;
vertical-align: top;
}
h1, h2 {
text-align: left;
border-bottom: 1px solid #000;
padding-bottom: 5px;
width: 60%;
}
</style>
</head>
<body>
<!-- 内容将添加在这里 -->
</body>
</html>
添加个人信息
在 body 标签内添加一个标题和一个包含个人信息的表格。使用 table 标签创建表格，并使用 td 标签填充内容。
<body>
<h1>某某某</h1>
<table>
<tr>
<td><strong>性别：</strong></td>
<td>男</td>
<td rowspan="6">code>
<img src="img/1.jpg" style="width: 220px; height: 220px;"/>code>
</td>
</tr>
<tr>
<td><strong>出生日期：</strong></td>
<td>1990年01月01日</td>
</tr>
<tr>
<td><strong>政治面貌：</strong></td>
<td>党员</td>
</tr>
<tr>
<td><strong>家庭住址：</strong></td>
<td>北京市海淀区</td>
</tr>
<tr>
<td><strong>联系方式：</strong></td>
<td>(+86) 138-0000-0000</td>
</tr>
<tr>
<td><strong>电子邮箱：</strong></td>
<td>example@example.com</td>
</tr>
</table>
</body>
添加教育经历
使用 h2 标签作为分隔符，并创建一个新的表格来列出教育经历。
<body>
<h1>某某某</h1>
<table>
<!-- 个人信息表格 -->
</table>
<h2>教育经历</h2>
<table>
<tr>
<td>2010.09 - 2014.07</td>
<td>北京大学</td>
<td>计算机科学与技术学院</td>
<td>计算机科学</td>
<td>本科</td>
</tr>
<tr>
<td colspan="2">GPA：3.68/4.5</td>code>
</tr>
<tr>
<td colspan="2">专业成绩排名：10/200</td>code>
</tr>
</table>
</body>
添加其他模块
继续添加荣誉奖励、科研经历、所获证书、实习工作经历、学生干部经历和兴趣爱好等模块。每个模块使用一个 h2 标签和相应的表格或列表来组织内容。
<body>
<!-- 个人信息和教育经历 -->
<h2>荣誉奖励</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>国家奖学金</li>
<li>优秀毕业生</li>
</ul>
</td>
</tr>
</table>
<h2>科研经历</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>参与国家自然科学基金项目，负责数据分析和算法优化。</li>
<li>在《计算机学报》上发表论文一篇。</li>
</ul>
</td>
</tr>
</table>
<h2>所获证书</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>计算机等级考试二级证书</li>
<li>雅思7.5</li>
</ul>
</td>
</tr>
</table>
<h2>实习工作经历</h2>
<table>
<tr>
<td>2013.06 - 2013.09</td>
<td>
百度公司<br>
软件开发实习生
<ul>
<li>参与开发内部管理系统，负责前端页面设计和实现。</li>
</ul>
</td>
</tr>
<tr>
<td>2012.06 - 2012.09</td>
<td>
腾讯公司<br>
数据分析实习生
<ul>
<li>负责用户数据分析，提供产品优化建议。</li>
</ul>
</td>
</tr>
</table>
<h2>学生干部经历</h2>
<table>
<tr>
<td>2012.09 - 2013.07</td>
<td>
北京大学学生会<br>
宣传部长
<ul>
<li>组织策划多次校园活动，提升学生会影响力。</li>
</ul>
</td>
</tr>
<tr>
<td>2011.09 - 2012.07</td>
<td>
北京大学计算机协会<br>
会长
<ul>
<li>组织编程比赛，邀请业内专家进行讲座。</li>
</ul>
</td>
</tr>
</table>
<h2>兴趣爱好</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>阅读、旅行、编程</li>
</ul>
</td>
</tr>
</table>
</body>
完整代码
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<title>简历</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
table {
width: 60%;
border-collapse: collapse;
margin-bottom: 20px;
}
td {
padding: 8px;
border: none;
vertical-align: top;
}
h1, h2 {
text-align: left;
border-bottom: 1px solid #000;
padding-bottom: 5px;
width: 60%;
}
</style>
</head>
<body>
<h1>某某某</h1>
<table>
<tr>
<td><strong>性别：</strong></td>
<td>男</td>
<td rowspan="6">code>
<img src="img/1.jpg" style="width: 220px; height: 220px;"/>code>
</td>
</tr>
<tr>
<td><strong>出生日期：</strong></td>
<td>1990年01月01日</td>
</tr>
<tr>
<td><strong>政治面貌：</strong></td>
<td>党员</td>
</tr>
<tr>
<td><strong>家庭住址：</strong></td>
<td>北京市海淀区</td>
</tr>
<tr>
<td><strong>联系方式：</strong></td>
<td>(+86) 138-0000-0000</td>
</tr>
<tr>
<td><strong>电子邮箱：</strong></td>
<td>example@example.com</td>
</tr>
</table>
<h2>教育经历</h2>
<table>
<tr>
<td>2010.09 - 2014.07</td>
<td>北京大学</td>
<td>计算机科学与技术学院</td>
<td>计算机科学</td>
<td>本科</td>
</tr>
<tr>
<td colspan="2">GPA：3.68/4.5</td>code>
</tr>
<tr>
<td colspan="2">专业成绩排名：10/200</td>code>
</tr>
</table>
<h2>荣誉奖励</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>国家奖学金</li>
<li>优秀毕业生</li>
</ul>
</td>
</tr>
</table>
<h2>科研经历</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>参与国家自然科学基金项目，负责数据分析和算法优化。</li>
<li>在《计算机学报》上发表论文一篇。</li>
</ul>
</td>
</tr>
</table>
<h2>所获证书</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>计算机等级考试二级证书</li>
<li>雅思7.5</li>
</ul>
</td>
</tr>
</table>
<h2>实习工作经历</h2>
<table>
<tr>
<td>2013.06 - 2013.09</td>
<td>
百度公司<br>
软件开发实习生
<ul>
<li>参与开发内部管理系统，负责前端页面设计和实现。</li>
</ul>
</td>
</tr>
<tr>
<td>2012.06 - 2012.09</td>
<td>
腾讯公司<br>
数据分析实习生
<ul>
<li>负责用户数据分析，提供产品优化建议。</li>
</ul>
</td>
</tr>
</table>
<h2>学生干部经历</h2>
<table>
<tr>
<td>2012.09 - 2013.07</td>
<td>
北京大学学生会<br>
宣传部长
<ul>
<li>组织策划多次校园活动，提升学生会影响力。</li>
</ul>
</td>
</tr>
<tr>
<td>2011.09 - 2012.07</td>
<td>
北京大学计算机协会<br>
会长
<ul>
<li>组织编程比赛，邀请业内专家进行讲座。</li>
</ul>
</td>
</tr>
</table>
<h2>兴趣爱好</h2>
<table>
<tr>
<td colspan="2">code>
<ul>
<li>阅读、旅行、编程</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。