Register
> 博客>

用html制作网页个人简历代码

新速特源码 1年前 38 0

<!DOCTYPE html>
<html>
<head>
<title>个人简历</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
h2 {
margin: 0;
font-size: 24px;
}
section {
padding: 20px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
.skills {
display: flex;
flex-wrap: wrap;
}
.skill {
background-color: #eee;
color: #333;
padding: 5px 10px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>个人简历</h1>
</header>
<section>
<h2>个人信息</h2>
<ul>
<li>姓名：张三</li>
<li>性别：男</li>
<li>出生日期：1990年1月1日</li>
<li>联系电话：13812345678</li>
<li>电子邮箱：zhangsan@example.com</li>
<li>个人网站：<a href="http://www.example.com">http://www.example.com</a></li>
</ul>
</section>
<section>
<h2>教育背景</h2>
<ul>
<li>2010年-2014年：本科，某大学，计算机科学与技术专业</li>
<li>2014年-2016年：硕士研究生，某大学，计算机科学与技术专业</li>
</ul>
</section>
<section>
<h2>工作经历</h2>
<ul>
<li>2016年-2018年：某公司，软件工程师</li>
<li>2018年-至今：某公司，高级软件工程师</li>
</ul>
</section>
<section>
<h2>技能</h2>
<div class="skills">
<div class="skill">Java</div>
<div class="skill">Python</div>
<div class="skill">JavaScript</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">SQL</div>
<div class="skill">Git</div>
<div class="skill">Linux</div>
</div>
</section>
</body>
</html>

接下来我会对这个代码进行解释和说明。

首先，这是一个基本的 HTML5 文档结构，包括文档类型声明、html 标签、head 标签和 body 标签。

<!DOCTYPE html>
<html>
<head>
    <title>个人简历</title>
    <meta charset="UTF-8">
    <style>
        /* 样式代码 */
    </style>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在 head 标签中，我们设置了页面的标题和字符集编码，同时也定义了一些样式代码。

<title>个人简历</title>
<meta charset="UTF-8">
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    h1 {
        margin: 0;
        font-size: 36px;
    }
    h2 {
        margin: 0;
        font-size: 24px;
    }
    section {
        padding: 20px;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li {
        margin-bottom: 10px;
    }
    .skills {
        display: flex;
        flex-wrap: wrap;
    }
    .skill {
        background-color: #eee;
        color: #333;
        padding: 5px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
</style>

在 body 标签中，我们定义了页面的内容，包括个人信息、教育背景、工作经历和技能。

<header>
    <h1>个人简历</h1>
</header>
<section>
    <h2>个人信息</h2>
    <ul>
        <li>姓名：张三</li>
        <li>性别：男</li>
        <li>出生日期：1990年1月1日</li>
        <li>联系电话：13812345678</li>
        <li>电子邮箱：zhangsan@example.com</li>
        <li>个人网站：<a href="http://www.example.com">http://www.example.com</a></li>
    </ul>
</section>
<section>
    <h2>教育背景</h2>
    <ul>
        <li>2010年-2014年：本科，某大学，计算机科学与技术专业</li>
        <li>2014年-2016年：硕士研究生，某大学，计算机科学与技术专业</li>
    </ul>
</section>
<section>
    <h2>工作经历</h2>
    <ul>
        <li>2016年-2018年：某公司，软件工程师</li>
        <li>2018年-至今：某公司，高级软件工程师</li>
    </ul>
</section>
<section>
    <h2>技能</h2>
    <div class="skills">
        <div class="skill">Java</div>
        <div class="skill">Python</div>
        <div class="skill">JavaScript</div>
        <div class="skill">HTML</div>
        <div class="skill">CSS</div>
        <div class="skill">SQL</div>
        <div class="skill">Git</div>
        <div class="skill">Linux</div>
    </div>
</section>

其中，个人信息、教育背景和工作经历都使用了无序列表（ul）来展示，技能部分使用了 flex 布局来实现技能标签的自适应排列。

总体来说，这个代码实现了一个简单的个人简历页面，可以作为初学者学习 HTML 和 CSS 的练手项目。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报