结构元素

最新推荐文章于 2022-12-28 17:21:27 发布

静待花开︳

最新推荐文章于 2022-12-28 17:21:27 发布

阅读量415

点赞数

分类专栏： educoder Web前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121662787

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

第1关：文档结构元素相关概念

1、<article>元素主要用于定义页面的什么内容？

A、文章

2、以下选项，哪个不属于语义化的元素？
C、<span>

3、在HTML5中，（）元素用于定义文章的页眉信息。
B、<header>

4、aside元素用于定义当前页面或当前文章的附属信息。

A、正确

5、figcaption元素用于表示独立的流内容，例如图像、图表、照片、代码等。
B、错误

第2关：header元素和article元素的应用

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的语义化元素设计一个文章区(<article>)。 2.文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（<h3>）。 3.文章区的内容使用段落标签（<p>)设置,文章内容为：“ 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。”

<!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元素的应用

编程要求

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

静待花开︳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
结构元素

第1关：文档结构元素相关概念1、<article>元素主要用于定义页面的什么内容？A、文章2、以下选项，哪个不属于语义化的元素？C、<span>3、在HTML5中，（）元素用于定义文章的页眉信息。B、<header>4、aside元素用于定义当前页面或当前文章的附属信息。A、正确5、figcaption元素用于表示独立的流内容，例如图像、图表、照片、代码等。B、错误第2关：header元素和article元素的应用编程..
复制链接

扫一扫