第1关：文档结构元素相关概念
任务描述
本关任务：完成一组文档结构元素相关的概念题。
相关知识
为了完成本关任务，你需要掌握以下知识：1.header元素，2.article元素，3.aside元素，4.footer元素，5.figure/figcaption元素。
header元素
header元素是一种表示头部的结构元素，通常用来放置整个网页或页面内一个内容区块的标题，但也可以包含其他的元素，例如标题（
~
）、导航部分（
article元素
article元素是一种表示大段内容的结构元素。使用article元素可以在网页中定义独立的、完整的内容，例如：文章、博客、帖子、评论等。
aside元素
aside元素用于定义当前页面或当前文章的附属信息，包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分。
footer元素
footer元素用于定义脚注部分，例如在父级内容块中添加注释、在文章区中添加作者信息、在网页底部添加版权信息等。
figure/figcaption元素
figure元素用于表示独立的流内容，例如图像、图表、照片、代码等等。figcaption元素用于定义figure元素的标题，要嵌套在
答案
A C B A B
第2关：header元素和article元素的应用
任务描述
本关任务：运用HTML5的语义化元素设计一个包含头部标题和文章内容的文章区。效果图如下：
相关知识
为了完成本关任务，你需要掌握：1.header元素，2.article元素。
文章区的结构
设计要求中的文章区由文章标题和文章内容组成。HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。
代码结构如下：
<article>
<header>文章标题</header>
<p>文章的段落内容</p>
</article>
编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的语义化元素设计一个文章区(
2.文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（
）。
3.文章区的内容使用段落标签（
)设置,文章内容为：“ 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
代码
<!DOCTYPE html>
<html>
<head>
<title>页面结构</title>
<style type="text/css">
header{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<!-- ********* Begin ******* -->
<article>
<header><h3>茗茶推荐——祁门红茶</h3></header>
<p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
</article>
<!-- ********* End ********* -->
</body>
</html>
第3关：figure元素和figcaption元素的应用
任务描述
本关任务：设计一个文章区中含图且能被搜索引擎识别的HTML程序。界面效果如下图所示：
相关知识
为了完成本关任务，你需要掌握：1.figure元素，2.figcaption元素。
文章区中引入图类对象的语义元素
设计要求的文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置，在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。
代码结构如下：
<figure>
<img src=图的路径>
<figcaption>图的名称</figcaption>
</figure>
编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的语义化元素设计一个图类显示区(
2.该区中插入的图像如下图所示：
该图的URL为https://www.educoder.net/api/attachments/1223388
3.插图的下方用语义化元素figcaption添加图名称,图名称为：“ 茶道欣赏”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
代码
<!DOCTYPE html>
<html>
<head>
<title>页面结构2</title>
<style type="text/css">
header{border-bottom:4px double #eee;
text-align:center;
font-size:20px
}
</style>
</head>
<body>
<article>
<header>
<h3>茗茶推荐——祁门红茶</h3>
</header>
<p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
<!-- ********* Begin ******* -->
<figure>
<img src="https://www.educoder.net/api/attachments/1223388 ">
<figcaption>茶道欣赏</figcaption>
</figure>
<!-- ********* End ********* -->
</article>
</body>
</html>
educoder Web程序设计基础2021秋 答案
https://blog.csdn.net/u014708644/category_11468020.html