任务描述

本关任务：设计一个文章区中含图且能被搜索引擎识别的HTML程序。界面效果如下图所示：
页面元素2

相关知识

为了完成本关任务，你需要掌握：1.figure元素，2.figcaption元素。

文章区中引入图类对象的语义元素
设计要求的文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置，在其中可以嵌套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>