html5个人中心页面代码
时间: 2023-12-24 16:41:59 浏览: 36
以下是一个简单的 HTML5 个人中心页面的示例:
```html
<!DOCTYPE html>
<html="en">
<head>
<meta charset="UTF-8">
<title>个人中心</title>
head>
<body>
<header>
<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>
</header>
<main>
<section>
<h2>个人信息</h2>
<form action="" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone"><br>
<button type="submit">更新信息</button>
</form>
</section>
<section>
<h2>我的订单</h2>
<table>
<thead>
<tr>
<th>订单号</th>
<th>产品名称</th>
<th>价格</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>商品A</td>
<td>$100</td>
<td>已发货</td>
</tr>
<tr>
<td>67890</td>
<td>商品B</td>
<td>$50</td>
<td>已完成</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
这个页面有一个页眉,包括网站的标题和导航菜单,一个主要的内容区域,包括个人信息和订单的部分,以及一个页脚。个人信息部分包括一个表单和几个输入字段,用于更新用户的姓名、电子邮件和电话号码。订单部分包括一个表格,显示用户的订单信息。