测验：
构建一个内容丰富的网页
文件目录如下：
提示
- 可用 W3C HTML验证器 来验证 HTML。(有两行包含 “googleapis” 的
<link>元素用于从 Google Fonts 服务引入自定义字体到页面；它们不会被验证，所以不用担心。) - 本测验不需要任何 CSS 知识；只需用 HTML 元素添加现成的 CSS 即可。
- 现成的 CSS 已经设计好布局，使用正确的结构元素，页面就会渲染成绿色。
- 如果你遇到困难不知道应该把添加元素到哪里，通常一个好的做法是：画一个简单的页面布局模块图，然后为每个块记录下恰当的元素。
项目简介
本项目的任务是为“观鸟网”的主页添加结构化的元素，使其可以进行布局设计。需要添加的有：
- 页眉（
<header>），应充满页面宽度，并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边，导航栏在它们下方。 - 主内容区域（
<main>），应有两栏，其中主区域显示欢迎信息，侧边栏包含一些缩略图。 - 页脚（
<footer>），包含版权信息和鸣谢。
你应该为以下内容添加合适的标签：
- 页眉
- 导航菜单
- 主要内容
- 欢迎语
- 图片侧边栏
- 页脚
还应：
- 添加一个
<link>元素把现成的 CSS 文件引入页面。
代码：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>观鸟网</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&subset=chinese-simplified">
<link rel="icon" href="images/dove.png">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>观鸟网</h1>
<img src="images/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="images/favorite-1.jpg"><img src="images/favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
<a href="images/favorite-2.jpg"><img src="images/favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
<a href="images/favorite-3.jpg"><img src="images/favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
<a href="images/favorite-4.jpg"><img src="images/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>
扫一扫
2612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
