个人主页模板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>
<div class="container">
<h1>个人主页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">我的作品</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h2>欢迎来到我的个人主页</h2>
<p>我是一名前端开发工程师，热爱编程和设计，喜欢挑战自己，不断学习新知识。</p>
<a href="#" class="btn">了解更多</a>
</div>
</section>
<section class="about">
<div class="container">
<h2>关于我</h2>
<p>我叫张三，毕业于某某大学，拥有三年的前端开发经验。我熟练掌握HTML、CSS、JavaScript等前端技术，能够独立完成网站的设计和开发。</p>
<p>我喜欢阅读技术文章，关注前端技术的最新动态，不断学习新知识，提升自己的技能水平。</p>
</div>
</section>
<section class="portfolio">
<div class="container">
<h2>我的作品</h2>
<div class="portfolio-items">
<div class="portfolio-item">
<img src="img/portfolio-1.jpg" alt="作品1">
<h3>作品1</h3>
<p>这是我的第一个作品，使用了HTML、CSS和JavaScript技术。</p>
</div>
<div class="portfolio-item">
<img src="img/portfolio-2.jpg" alt="作品2">
<h3>作品2</h3>
<p>这是我的第二个作品，使用了React框架和Bootstrap样式库。</p>
</div>
<div class="portfolio-item">
<img src="img/portfolio-3.jpg" alt="作品3">
<h3>作品3</h3>
<p>这是我的第三个作品，使用了Vue.js框架和Element UI组件库。</p>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<h2>联系我</h2>
<form action="#" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="message">留言：</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="btn">发送</button>
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<p>版权所有 © 2021 张三</p>
</div>
</footer>
</body>
</html>
这是一个简单的个人主页模板的HTML代码，包含了页面的基本结构和内容。其中，header标签包含了网站的标题和导航栏，main标签包含了页面的主要内容，包括欢迎页面、关于我、我的作品和联系我等部分，footer标签包含了网站的版权信息。
在这个模板中，使用了一些常见的HTML标签，如h1、h2、p、ul、li、img、form等，以及一些常用的属性，如class、id、href、src、alt、for、name、required等。同时，还引入了一个外部样式表style.css，用于设置页面的样式。
需要注意的是，这个模板只是一个基础的框架，具体的内容和样式需要根据实际情况进行修改和调整。同时，还需要添加一些JavaScript代码，实现一些交互效果和动态功能。
