H5页面通常指的是使用HTML5标准制作的网页，这些页面能够实现丰富的多媒体和交互功能。H......
2024-04-05 81
html简单6个页面的旅游网站
数码百科
2024-04-13 02:23:36
一个简单的HTML旅游网站包含6个页面，分别是：首页、目的地、关于我们、联系我们和用户登录，以下是每个页面的HTML代码：
1、首页（index.html）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站 - 首页</title>
</head>
<body>
<header>
<h1>欢迎来到旅游网站</h1>
<nav>
<a href="destinations.html">目的地</a> |
<a href="about.html">关于我们</a> |
<a href="contact.html">联系我们</a> |
<a href="login.html">用户登录</a>
</nav>
</header>
<main>
<p>在这里，您可以找到最热门的旅游目的地和旅行信息。</p>
</main>
<footer>
<p>版权所有 © 2022 旅游网站</p>
</footer>
</body>
</html>
2、目的地（destinations.html）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站 - 目的地</title>
</head>
<body>
<header>
<h1>旅游网站 - 目的地</h1>
<nav>
<a href="index.html">首页</a> |
<a href="about.html">关于我们</a> |
<a href="contact.html">联系我们</a> |
<a href="login.html">用户登录</a>
</nav>
</header>
<main>
<ul>
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
</ul>
</main>
<footer>
<p>版权所有 © 2022 旅游网站</p>
</footer>
</body>
</html>
3、关于我们（about.html）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站 - 关于我们</title>
</head>
<body>
<header>
<h1>旅游网站 - 关于我们</h1>
<nav>
<a href="index.html">首页</a> |
<a href="destinations.html">目的地</a> |
<a href="contact.html">联系我们</a> |
<a href="login.html">用户登录</a>
</nav>
</header>
<main>
<p>我们是一家专注于提供旅游信息的公司，致力于帮助游客规划完美的旅行。</p>
</main>
<footer>
<p>版权所有 © 2022 旅游网站</p>
</footer>
</body>
</html>
4、联系我们（contact.html）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站 - 联系我们</title>
</head>
<body>
<header>
<h1>旅游网站 - 联系我们</h1>
<nav>
<a href="index.html">首页</a> |
<a href="destinations.html">目的地</a> |
<a href="about.html">关于我们</a> |
<a href="login.html">用户登录</a>
</nav>
</header>
<main>
<p>电话：+86 123456789</p>
<p>邮箱：info@travelwebsite.com</p>
</main>
<footer>
<p>版权所有 © 2022 旅游网站</p>
</footer>
</body>
</html>
5、用户登录（login.html）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游网站 - 用户登录</title>
</head>
<body>
<header>
<h1>旅游网站 - 用户登录</h1>
<nav>
<a href="index.html">首页</a> |
<a href="destinations.html">目的地</a> |
<a href="about.html">关于我们</a> |
<a href="contact.html">联系我们</a>
</nav>
</header>
<main>
<form action="#" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="登录">
</form>
</main>
<footer>
<p>版权所有 © 2022 旅游网站</p>
</footer>
</body>
</html>
标签：
上一篇：ehviewer账号注册教程 下一篇：epic显示帧数
相关文章