一个简单简历网站:
基础知识请看讲义
- 在这个实验中,通过HTML构建了一个简单的简历网站。使用了基本的HTML标签,如
<header>
、<section>
、<footer>
等来划分页面的不同部分,<h1>
-<h2>
用于标题,<p>
用于段落,<ul>
和<li>
用于无序列表。 - 虽然这个简历网站的功能比较基础,但展示了如何通过HTML组织和呈现个人信息。在实际应用中,可以进一步通过CSS和JavaScript来增强页面的交互性和美观性。
一、实验目的
- 掌握HTML基本结构和标签的使用。
- 学会设计简单的页面布局。
- 理解如何通过HTML展示个人信息。
二、实验步骤
- 页面结构分析
- 一个简单的简历网站通常包含头部(包含姓名、联系方式等)、主体部分(工作经历、教育背景、技能等)和底部(版权信息等)。
- 代码编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>个人简历</title>
<style>
/* 简单的样式设置,用于美化页面 */
body {
font-family: Arial, sans - serif;
margin: 0;
padding: 0;
}
header {
background - color: #333;
color: white;
text - align: center;
padding: 20px;
}
section {
padding: 20px;
}
footer {
background - color: #333;
color: white;
text - align: center;
padding: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<h1>张三</h1>
<p>联系电话: 12345678901</p>
<p>电子邮箱: zhangsan@email.com</p>
</header>
<!-- 主体部分 -->
<section>
<h2>工作经历</h2>
<p>
<strong>XX公司</strong> - 软件工程师(2018 - 2022)
<ul>
<li>参与公司核心项目的开发,负责模块A的设计与实现。</li>
<li>与团队成员协作,优化项目性能,提高系统稳定性。</li>
</ul>
</p>
<h2>教育背景</h2>
<p>
<strong>XX大学</strong> - 计算机科学与技术(2014 - 2018)
<ul>
<li>主修课程包括数据结构、算法分析、操作系统等。</li>
<li>参与校内科研项目,获得优秀成果奖。</li>
</ul>
</p>
<h2>技能</h2>
<p>
- 熟练掌握Java、Python编程语言。
- 熟悉数据库管理系统,如MySQL、Oracle。
- 具备良好的前端开发技能,熟悉HTML、CSS、JavaScript。
</p>
</section>
<!-- 底部 -->
<footer>
© 2023张三. 版权所有。
</footer>
</body>
</html>
稍微加点颜色:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>个人简历</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans - serif;
line - height: 1.6;
margin: 0;
padding: 0;
background - color: #f4f4f4;
}
/* 头部样式 */
header {
background - color: #3498db;
color: white;
text - align: center;
padding: 40px;
}
header img {
width: 150px;
height: 150px;
border - radius: 50%;
border: 5px solid white;
margin - bottom: 20px;
}
header h1 {
margin - top: 0;
}
/* 主体部分样式 */
section {
background - color: white;
box - shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin: 20px;
padding: 30px;
}
section h2 {
color: #3498db;
border - bottom: 2px solid #3498db;
padding - bottom: 10px;
}
/* 列表样式 */
ul {
list - style - type: none;
padding: 0;
}
/* 底部样式 */
footer {
background - color: #333;
color: white;
text - align: center;
padding: 20px;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<img src="your_photo.jpg" alt="个人照片">
<h1>张三</h1>
<p>联系电话: 12345678901</p>
<p>电子邮箱: zhangsan@email.com</p>
</header>
<!-- 主体部分 -->
<section>
<h2>工作经历</h2>
<p>
<strong>XX公司</strong> - 软件工程师(2018 - 2022)
<ul>
<li>参与公司核心项目的开发,负责模块A的设计与实现。</li>
<li>与团队成员协作,优化项目性能,提高系统稳定性。</li>
</ul>
</p>
<h2>教育背景</h2>
<p>
<strong>XX大学</strong> - 计算机科学与技术(2014 - 2018)
<ul>
<li>主修课程包括数据结构、算法分析、操作系统等。</li>
<li>参与校内科研项目,获得优秀成果奖。</li>
</ul>
</p>
<h2>技能</h2>
<p>
- 熟练掌握Java、Python编程语言。
- 熟悉数据库管理系统,如MySQL、Oracle。
- 具备良好的前端开发技能,熟悉HTML、CSS、JavaScript。
</p>
</section>
<!-- 底部 -->
<footer>
© 2023张三. 版权所有。
</footer>
</body>
</html>