下面是一个简单的html旅游网页制作示例代码，使用 HTML 和 CSS 实现页面样式和布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅游网站</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
text-align: center;
}
main {
background-color: #fff;
padding: 20px;
margin: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>旅游网站</h1>
</header>
<nav>
<a href="#">首页</a> |
<a href="#">景点</a> |
<a href="#">住宿</a> |
<a href="#">交通</a> |
<a href="#">联系我们</a>
</nav>
<main>
<h2>热门景点</h2>
<p>这里介绍一些热门的旅游景点，并提供相关的信息和预订链接。</p>
<ul>
<li><a href="#">北京故宫</a></li>
<li><a href="#">上海外滩</a></li>
<li><a href="#">西安兵马俑</a></li>
</ul>
</main>
<footer>
© 2021 旅游网站
</footer>
</body>
</html>代码元素解释：
- `<!DOCTYPE html>`：文档类型声明，告诉浏览器当前文档使用的是 HTML5 规范。
- `<html>`：HTML 页面的根元素，包含整个页面的内容。
- `<head>`：页面头部，包含元数据和其他引用信息。
- `<meta>`：用于设置页面的元数据，如字符集、关键词等。
- `<title>`：页面标题，显示在浏览器的标签栏上。
- `<style>`：用于设置页面的样式和布局。
- `<body>`：页面的主要内容部分。
- `<header>`：页面头部，通常包含网站标志、主导航等元素。
- `<nav>`：页面导航栏，通常包含站点链接和其他导航元素。
- `<main>`：页面的主要内容，通常包含文章、图片和其他相关信息。
- `<h1>`、`<h2>`：标头元素，用于显示不同级别的标题文本。
- `<p>`：段落元素，用于显示文本内容。
- `<ul>`、`<li>`：列表元素，用于显示有序或无序列表。
- `<a>`：超链接元素，用于创建页面内或页面间的链接。
- `<footer>`：页面尾部，通常包含版权信息、联系方式等元素。
效果截图：