html个人主页框架
时间: 2023-10-16 10:11:19 浏览: 51
以下是一个简单的 HTML 个人主页框架示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Homepage</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>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="intro">
<h1>Hello, I'm John Doe</h1>
<p>Welcome to my personal homepage.</p>
</section>
<section class="about">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo eros id tortor feugiat, sit amet malesuada arcu ultricies.</p>
</section>
<section class="resume">
<h2>Resume</h2>
<ul>
<li>Education: Bachelor's Degree in Computer Science</li>
<li>Experience: 5 years in web development</li>
<li>Skills: HTML, CSS, JavaScript, PHP, MySQL</li>
</ul>
</section>
<section class="projects">
<h2>Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
<section class="contact">
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>© 2021 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
```
这个框架包括了一个头部导航栏,主体内容分为自我介绍、个人简历、项目展示和联系方式四个部分,还有一个页脚版权声明。可以根据实际需要修改和添加内容,并在 style.css 文件中定义相应的样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)