用HTML做一个个人主页代码
时间: 2024-06-08 12:07:12 浏览: 21
以下是一个简单的个人主页 HTML 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>个人主页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
</header>
<nav>
<ul>
<li><a href="#about-me">关于我</a></li>
<li><a href="#education">教育经历</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#projects">项目经验</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
<main>
<section id="about-me">
<h2>关于我</h2>
<p>这里可以写一些关于自己的介绍。</p>
</section>
<section id="education">
<h2>教育经历</h2>
<ul>
<li>XX大学,学士学位,专业:XXX,时间:XXXX-XXXX</li>
<li>XX大学,硕士学位,专业:XXX,时间:XXXX-XXXX</li>
</ul>
</section>
<section id="skills">
<h2>技能</h2>
<ul>
<li>编程语言:Java,Python,JavaScript</li>
<li>前端框架:Vue.js,React</li>
<li>后端框架:Spring,Django</li>
</ul>
</section>
<section id="projects">
<h2>项目经验</h2>
<ul>
<li>项目1:XXXXXX,时间:XXXX-XXXX,角色:项目经理,描述:XXXXXX</li>
<li>项目2:XXXXXX,时间:XXXX-XXXX,角色:开发工程师,描述:XXXXXX</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<ul>
<li>邮箱:XXXXXX</li>
<li>微信:XXXXXX</li>
<li>电话:XXXXXX</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 XXXXXXX</p>
</footer>
</body>
</html>
```
注意:
1. 在 head 标签中,我们引用了一个名为 style.css 的外部样式表,你需要在同级目录下创建这个 css 文件,并在其中定义你的页面样式。
2. 导航栏中的链接通过 href 属性来指向页面中对应的 section 标签,需要在对应的 section 标签中设置 id 属性来进行定位。
3. 在 section 标签中,你可以自由地添加需要展示的内容。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)