构建旅行社页面
发布: (2026年1月12日 GMT+8 17:00)
2 min read
原文: Dev.to
Source: Dev.to
项目概述
昨天我完成了 freeCodeCamp 响应式网页设计课程中的旅行社页面实验。该实验提供了成品示例以及一系列需要实现的用户故事。我选择展示西部地区（英格兰西南部），而不是说明中使用的意大利示例。
HTML 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Agency Page</title>
</head>
<body>
<h1>Visit the West Country</h1>
<p>Explore the hidden gems of South-West England</p>
<section id="packages">
<h2>Packages</h2>
<p>We offer a wide range of travel opportunities</p>
<ul>
<li><a href="https://www.freecodecamp.org/learn">Group Travels</a></li>
<li><a href="https://www.freecodecamp.org/learn">Private Tours</a></li>
</ul>
</section>
<section id="itineraries">
<h2>Top Itineraries</h2>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.exeter-cathedral.org.uk/wp-content/uploads/2024/03/Cathedral0008-1-copy.jpg" alt="A view inside Exeter Cathedral">
</a>
<figcaption>Exeter Cathedral</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://www.breakthroughtransformationtrust.org/wp-content/uploads/2022/11/PZ_Misc_14-04-21_AD_LR-32.jpg.webp" alt="Two Giraffes at Paignton Zoo">
</a>
<figcaption>Giraffes at Paignton Zoo</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn">
<img src="https://eastdevonexcellence.co.uk/wp-content/uploads/2023/12/Pecorama2.jpg" alt="Miniature steam train and carriages at Pecorama">
</a>
<figcaption>Miniature Railway at Pecorama</figcaption>
</figure>
</section>
</body>
</html>页面内容摘要
- 主标题： “Visit the West Country”
- 简介段落： “Explore the hidden gems of South‑West England”
- 套餐部分： 列出 “Group Travels” 和 “Private Tours”，链接指向 freeCodeCamp。
- 热门行程： 展示三个图像及其说明，分别为埃克塞特大教堂、帕伊格顿动物园的长颈鹿以及佩科拉马的微型铁路。
音频与视频理论
实验结束后，课程讲解了 HTML <audio> 与 <video> 元素，说明了如何使用控件嵌入媒体，以及提供多种源格式以实现跨浏览器兼容性的重要性。这些理论为即将进行的工作坊做好准备，工作坊将涉及构建 HTML 视频播放器以及音视频合并播放器。
继续编码，大家加油！