构建内容丰富的网页 - 学习 Web 开发 编辑

构建页面内容是一项重要技能，页面构建清晰才能顺利交付进行 CSS 布局。本测验将测试你是否能构思出页面的最终外观，以及是否会选用适当的结构语义。

起点

开始测验前，请先下载 assets.zip。其中包含：

• 需要补充结构标记的 HTML 文件。
• 给标记添加样式的 CSS 文件。
• 页面中使用的图片。

可在电脑上创建示例，也可以用 JSBin 或 Thimble 等网站来完成测验。

项目简介

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

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

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

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

还应：

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

提示

• 可用 W3C HTML验证器 来验证 HTML；验证通过有额外加分。(有两行包含 “googleapis” 的 <link> 元素用于从 Google Fonts 服务引入自定义字体到页面；它们不会被验证，所以不用担心。)
• 本测验不需要任何 CSS 知识；只需用 HTML 元素添加现成的 CSS 即可。
• 现成的 CSS 已经设计好布局，使用正确的结构元素，页面就会渲染成绿色。
• 如果你遇到困难不知道应该把添加元素到哪里，通常一个好的做法是：画一个简单的页面布局模块图，然后为每个块记录下恰当的元素。

示例

以下截图展示了添加标记后主页可能的外观：（可 在线查看）

测验

如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 本节测验的讨论页 或者 Mozilla 聊天室 的 #mdn 频道取得帮助。要自己先尝试，作弊是不会有收获的！

本章目录

• 开始学习 HTML
• “头”里有什么？HTML 元信息
• HTML 文字处理初步
• 创建超链接
• 高级文字格式
• 文档和站点结构
• HTML 调试
• 课程测验：为信件排版
• 课程测验：构建内容丰富的网页