个人主页html四个页面
时间: 2023-11-02 20:07:30 浏览: 54
1. 首页(index.html):这是个人主页的主要页面,包含个人简介、照片、联系方式、教育背景、工作经历等信息。
2. 作品展示页面(portfolio.html):这个页面展示个人的作品,包括照片、视频、音频、文档等。可以按照不同的类别进行分类,方便访客浏览。
3. 博客页面(blog.html):这个页面展示个人的博客,包括个人的想法、经验、故事等。可以按照不同的主题进行分类,方便访客浏览。
4. 联系页面(contact.html):这个页面提供给访客一个方便的联系方式,包括邮箱、电话、社交媒体等。访客可以通过这个页面与个人进行交流、咨询、合作等。
相关问题
6个页面的HTML个人网页设计,
以下是一个简单的6个页面的HTML个人网页设计的示例:
第一页:主页
```html
<!DOCTYPE html>
<html>
<head>
<title>个人网页</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>欢迎来到我的个人网页</h1>
<p>在这里你可以了解我的个人信息,我的作品和我的联系方式。</p>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
第二页:关于我
```html
<!DOCTYPE html>
<html>
<head>
<title>关于我</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>关于我</h1>
<p>我是一个Web开发者,喜欢用代码创造美丽的网页。</p>
<p>我在大学学习计算机科学,并且在毕业后一直从事Web开发工作。</p>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
第三页:简历
```html
<!DOCTYPE html>
<html>
<head>
<title>简历</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>简历</h1>
<h2>教育经历</h2>
<ul>
<li>大学本科,计算机科学专业,2015-2019</li>
<li>研究生,软件工程专业,2019-2021</li>
</ul>
<h2>工作经历</h2>
<ul>
<li>Web开发工程师,公司名称,2019-2021</li>
<li>前端工程师,公司名称,2021-至今</li>
</ul>
<h2>技能</h2>
<ul>
<li>HTML/CSS/JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>MySQL</li>
</ul>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
第四页:作品集
```html
<!DOCTYPE html>
<html>
<head>
<title>作品集</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>作品集</h1>
<ul>
<li><a href="#">项目一</a></li>
<li><a href="#">项目二</a></li>
<li><a href="#">项目三</a></li>
<li><a href="#">项目四</a></li>
<li><a href="#">项目五</a></li>
<li><a href="#">项目六</a></li>
</ul>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
第五页:联系我
```html
<!DOCTYPE html>
<html>
<head>
<title>联系我</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>联系我</h1>
<p>如果你想要联系我,可以通过以下方式:</p>
<ul>
<li>电子邮件:myemail@example.com</li>
<li>电话:123-456-7890</li>
<li>地址:1234 Main Street, Anytown, USA</li>
</ul>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
第六页:404错误页面
```html
<!DOCTYPE html>
<html>
<head>
<title>页面未找到</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="resume.html">简历</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="contact.html">联系我</a></li>
</ul>
</nav>
</header>
<main>
<h1>页面未找到</h1>
<p>抱歉,您访问的页面不存在或已被删除。</p>
<p>请返回<a href="index.html">主页</a>继续浏览。</p>
</main>
<footer>
<p>© 2021 我的名字. 版权所有。</p>
</footer>
</body>
</html>
```
html个人信息编辑页面
对于个人信息编辑页面的 HTML,你可以使用以下代码作为参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人信息编辑</title>
</head>
<body>
<h1>个人信息编辑</h1>
<form action="update_profile.php" method="POST">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<input type="submit" value="保存">
</form>
</body>
</html>
```
上述代码创建了一个简单的个人信息编辑页面。用户可以输入姓名、邮箱和电话,并点击“保存”按钮提交表单。
请注意,这只是一个简单的示例代码,你可能需要根据自己的需求进行更改和扩展。另外,表单的提交动作(`action`)属性指向 `update_profile.php`,你需要创建一个后台处理该表单数据的 PHP 文件。在该文件中,你可以读取表单数据并进行相应的处理,比如保存到数据库或发送到服务器等。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)