结构元素

第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元素的标题，要嵌套在

中，通常被置于

中的第一个或最后一个子元素的位置。
开始你的任务吧，祝你成功！
参考答案：


第2关：header元素和article元素的应用
任务描述
本关任务：运用HTML5的语义化元素设计一个包含头部标题和文章内容的文章区。效果图如下：

相关知识
为了完成本关任务，你需要掌握：1.header元素，2.article元素。
文章区的结构
设计要求中的文章区由文章标题和文章内容组成。HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。
代码结构如下：

文章标题
  
文章的段落内容

编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的语义化元素设计一个文章区(

)。
2.文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（

）。
3.文章区的内容使用段落标签（

)设置,文章内容为：“ 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

   
       
       
   
   
    
    

    
茗茶推荐——祁门红茶
 
 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。
      
       
      

第3关：figure元素和figcaption元素的应用
任务描述
本关任务：设计一个文章区中含图且能被搜索引擎识别的HTML程序。界面效果如下图所示：

相关知识
为了完成本关任务，你需要掌握：1.figure元素，2.figcaption元素。
文章区中引入图类对象的语义元素
设计要求的文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置，在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。
代码结构如下：

  
  
图的名称

编程要求
在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.运用HTML5中的语义化元素设计一个图类显示区(

)。
2.该区中插入的图像如下图所示：

该图的URL为https://www.educoder.net/api/attachments/1223388
3.插图的下方用语义化元素figcaption添加图名称,图名称为：“ 茶道欣赏”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

   
       
       
   
   
       

           

               
茗茶推荐——祁门红茶
           
           
祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。
      
        

            
            
 茶道欣赏