打印一个带有图片的厦门旅游网页的代码,栏目包括热门景点、旅游笔记、旅游评论、旅游视频、酒店住宿等
时间: 2023-07-10 15:33:51 浏览: 178
一个旅游网站的代码
以下是一个简单的带有图片的厦门旅游网页的代码示例,栏目包括热门景点、旅游笔记、旅游评论、旅游视频、酒店住宿等:
```html
<!DOCTYPE html>
<html>
<head>
<title>厦门旅游网页</title>
</head>
<body>
<header>
<h1>欢迎来到厦门旅游网站</h1>
<nav>
<ul>
<li><a href="#hotspots">热门景点</a></li>
<li><a href="#travelnotes">旅游笔记</a></li>
<li><a href="#travelreviews">旅游评论</a></li>
<li><a href="#travelvideos">旅游视频</a></li>
<li><a href="#hotels">酒店住宿</a></li>
</ul>
</nav>
</header>
<section id="hotspots">
<h2>热门景点</h2>
<ul>
<li>
<h3>鼓浪屿</h3>
<img src="https://images.unsplash.com/photo-1581959039572-9da8b867b5d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="鼓浪屿">
<p>鼓浪屿是厦门最著名的景点之一,拥有美丽的风景、历史悠久的建筑和独特的文化氛围。</p>
</li>
<li>
<h3>南普陀寺</h3>
<img src="https://images.unsplash.com/photo-1573561030445-8c8b5a6f7aad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="南普陀寺">
<p>南普陀寺是厦门著名的佛教寺庙,拥有宏伟的建筑和悠久的历史。</p>
</li>
<li>
<h3>环岛路</h3>
<img src="https://images.unsplash.com/photo-1571767767608-4f3c2a8b9ebc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="环岛路">
<p>环岛路是厦门最著名的海滨路线之一,沿途有美丽的海滩、风景和历史建筑。</p>
</li>
</ul>
</section>
<section id="travelnotes">
<h2>旅游笔记</h2>
<ul>
<li>
<h3>厦门自由行攻略</h3>
<img src="https://images.unsplash.com/photo-1581959039572-9da8b867b5d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="鼓浪屿">
<p>这是一篇关于厦门自由行的攻略,介绍了厦门的景点、美食和交通。</p>
</li>
<li>
<h3>厦门美食攻略</h3>
<img src="https://images.unsplash.com/photo-1573561030445-8c8b5a6f7aad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="南普陀寺">
<p>这是一篇关于厦门美食的攻略,介绍了厦门的特色小吃和餐厅。</p>
</li>
</ul>
</section>
<section id="travelreviews">
<h2>旅游评论</h2>
<ul>
<li>
<h3>厦门印象</h3>
<img src="https://images.unsplash.com/photo-1571767767608-4f3c2a8b9ebc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="环岛路">
<p>这是一篇关于厦门旅游的评论,介绍了作者的旅游经历和印象。</p>
</li>
<li>
<h3>厦门之旅</h3>
<img src="https://images.unsplash.com/photo-1581959039572-9da8b867b5d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="鼓浪屿">
<p>这是一篇关于厦门旅游的评论,介绍了作者的旅游经历和印象。</p>
</li>
</ul>
</section>
<section id="travelvideos">
<h2>旅游视频</h2>
<ul>
<li>
<h3>厦门旅游视频</h3>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" width="500" height="300" controls></video>
<p>这是一段关于厦门旅游的视频,展示了厦门的美景和旅游活动。</p>
</li>
</ul>
</section>
<section id="hotels">
<h2>酒店住宿</h2>
<ul>
<li>
<h3>艾美酒店</h3>
<img src="https://images.unsplash.com/photo-1573561030445-8c8b5a6f7aad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="南普陀寺">
<p>厦门艾美酒店拥有豪华的客房和设施,为您提供舒适的住宿体验。</p>
</li>
<li>
<h3>希尔顿酒店</h3>
<img src="https://images.unsplash.com/photo-1571767767608-4f3c2a8b9ebc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="环岛路">
<p>厦门希尔顿酒店位于市中心,拥有优雅的客房和设施。</p>
</li>
</ul>
</section>
<footer>
<p>©2021 厦门旅游网站</p>
</footer>
</body>
</html>
```
在此示例中,我们使用了`<section>`标签来分别创建了热门景点、旅游笔记、旅游评论、旅游视频和酒店住宿等栏目。每个栏目中都有对应的图片、文字和其他元素,以便于浏览者浏览和了解相关信息。在导航栏中,我们使用了`<nav>`和`<ul>`标签来创建了一个简单的导航菜单,使得用户可以轻松地访问每个栏目。
阅读全文