一、项目准备

下载assets.zip，其中包含：HTML、CSS以及页面中使用的图片。利用VScode来完成测验。

二、项目简介

本项目的任务是为“观鸟网”的主页添加结构化的元素，使其可以进行布局设计。需要添加的有：

- 页眉（<header>），应充满页面宽度，并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边，导航栏在它们下方。
- 主内容区域（<main>），应有两栏，其中主区域显示欢迎信息，侧边栏包含一些缩略图。
- 页脚（<footer>），包含版权信息和鸣谢。

你应该为以下内容添加合适的标签：

页眉
导航菜单
主要内容
欢迎语
图片侧边栏
页脚

还应：

添加一个 <link> 元素把现成的 CSS 文件引入页面。

三、代码展示

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>观鸟网</title>
    <link href="https://fonts.googleapis.com/css?family=Long+CangNoto+Sans+SC:300" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
      <header>
        <h1>观鸟网</h1>
        <img src="dove.png" alt="一张鸽子剪影图片">
        <nav>
          <ul>
            <li><span>主页</span></li>
            <li><a href="#">开始</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">设备</a></li>
            <li><a href="#">论坛</a></li>
          </ul>
        </nav>
      </header>

      <main>
        <article>
          <h2>欢迎</h2>
            <p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
            <p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
        </article>
        
        <aside>
          <h2>收藏照片</h2>
            <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
            <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
            <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
            <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鹈鹕，羽毛大多为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，喙的下方有一个喉囊可以暂时储存食物。点击缩略图查看完整照片。"></a>
        </aside>
      </main>

      <footer>
        <p>本虚拟站点遵守 CC0 协议，所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
        <p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a> 由 Lorc 绘制。</p>
      </footer>
</body>
</html>