用html做一个介绍自己的网站
时间: 2023-12-23 22:02:32 浏览: 26
<!DOCTYPE html>
<html>
<head>
<title>介绍自己</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
section {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 32px;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
img {
max-width: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
介绍自己
</header>
<section>
<h1>欢迎来到我的个人网站!</h1>
<img src="my-photo.jpg" alt="我的照片">
<h2>个人信息</h2>
<p>我叫张三,是一名大学生。我喜欢编程,尤其是前端开发。我喜欢探索新技术,不断学习和挑战自己。</p>
<h2>技能</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>MySQL</li>
</ul>
<h2>项目经验</h2>
<h3>个人博客</h3>
<p>我使用React和Node.js开发了一个个人博客。这个博客支持用户注册、登录、发表文章、评论等功能。我也不断更新博客,加入新的功能和优化用户体验。</p>
<h3>在线商城</h3>
<p>我和几个同学一起开发了一个在线商城。我负责前端开发,使用了React和Ant Design等技术。这个商城支持用户注册、登录、浏览商品、下单、支付等功能。</p>
<h2>联系我</h2>
<p>如果您对我感兴趣,欢迎通过以下方式联系我:</p>
<ul>
<li>电子邮件:zhangsan@example.com</li>
<li>微信号:zhangsan123</li>
</ul>
</section>
</body>
</html>