一个简单简历网站：
基础知识请看讲义
- 在这个实验中，通过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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
