旅游网站html代码
<!DOCTYPE html>
<html>
<head>
<title>旅游网站</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<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>
</nav>
<div class="hero">
<h1>欢迎来到旅游网站</h1>
<p>发现更多美丽的风景,体验不一样的旅行</p>
<a href="#" class="btn">开始探索</a>
</div>
</header>
<section class="features">
<div class="feature">
<img src="https://via.placeholder.com/300x200" alt="feature image">
<h2>旅游攻略</h2>
<p>了解更多旅游目的地的信息,制定更旅行计划</p>
<a href="#" class="btn">查看更多</a>
</div>
<div class="feature">
<img src="https://via.placeholder.com/300x200" alt="feature image">
<h2>景点推荐</h2>
<p>发现更多美丽的景点,体验不一样的旅行</p>
<a href="#" class="btn">查看更多</a>
</div>
<div class="feature">
<img src="https://via.placeholder.com/300x200" alt="feature image">
<h2>酒店预订</h2>
<p>预订更酒店,享受更舒适的住宿体验</p>
<a href="#" class="btn">查看更多</a>
</div>
<div class="feature">
<img src="https://via.placeholder.com/300x200" alt="feature image">
<h2>机票预订</h2>
<p>预订更便宜的机票,享受更方便的旅行</p>
<a href="#" class="btn">查看更多</a>
</div>
</section>
<section class="testimonials">
<h2>客户评价</h2>
<div class="testimonial">
<blockquote>
<p>这是我最旅行经历之一,我发现了很多美丽的景点,也结交了很多新朋友。</p>
</blockquote>
<div class="author">
<img src="https://via.placeholder.com/100x100" alt="author image">
<p>张三</p>
</div>
</div>
<div class="testimonial">
<blockquote>
<p>这是我第一次旅行,我非常喜欢这个网站提供的旅游攻略和酒店预订服务。</p>
</blockquote>
<div class="author">
<img src="https://via.placeholder.com/100x100" alt="author image">
<p>李四</p>
</div>
</div>
<div class="testimonial">
<blockquote>
<p>这是我第二次使用这个网站预订机票,我非常满意他们的服务。</p>
</blockquote>
<div class="author">
<img src="https://via.placeholder.com/100x100" alt="author image">
<p>王五</p>
</div>
</div>
</section>
<footer>
<p>版权所有 © 2021 旅游网站</p>
</footer>
</body>
</html>
下面我会。
在上面的代码中,我们可以看到以下几个部分:
DOCTYPE声明:<!DOCTYPE html>,用于指定文档类型为HTML5。
HTML标签:<html>,用于定义HTML文档。
Head标签:<head>,用于定义文档的头部,包含了文档的元数据,如标题、字符集、视口等。
Title标签:用于定义文档的标题,显示在浏览器的标题栏上。
Meta标签:用于定义文档的元数据,如字符集、视口等。
Link标签:用于引入外部样式表。
Body标签:<body>,用于定义文档的主体部分。
Header标签:<header>,用于定义文档的头部,通常包含网站的logo、导航栏、主要的图片等。
Nav标签:用于定义导航栏。
Ul标签:用于定义无序列表。
Li标签:用于定义列表项。
Div标签:用于定义文档中的块级元素。
Section标签:用于定义文档中的节。
Img标签:用于定义图像。
H1-H2标签:用于定义标题。
P标签:用于定义段落。
A标签:用于定义超链接。
Blockquote标签:用于定义长引用。
Testimonials标签:用于定义客户评价部分。
Blockquote标签:用于定义长引用。
Author标签:用于定义客户评价中的作者信息。
Footer标签:<footer>,用于定义文档的页脚部分。
在实际开发中,我们可以根据需要添加或删除这些标签,以满足不同的需求。