编程语言
首页 > 编程语言> > Web程序设计基础2021 交互元素 educoder实训

Web程序设计基础2021 交互元素 educoder实训

作者：互联网

第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的语义化元素设计一个包含头部标题和文章内容的文章区。效果图如下：
header效果图

相关知识

为了完成本关任务，你需要掌握：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程序。界面效果如下图所示：
页面元素2

相关知识

为了完成本关任务，你需要掌握：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

标签：Web,educoder,figure,元素,figcaption,header,2021,文章,article
来源： https://blog.csdn.net/u014708644/article/details/121728973