Educoder Web练习题---结构元素

最新推荐文章于 2024-08-22 21:15:11 发布

是小鹿啊

最新推荐文章于 2024-08-22 21:15:11 发布

阅读量491

点赞数 5

分类专栏： Educoder 前端文章标签：前端 html

来自是小鹿啊的博客

本文链接：https://blog.csdn.net/m0_51511286/article/details/121698860

版权

前端同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

Educoder

35 篇文章 2 订阅

订阅专栏

本文介绍了HTML5中的结构元素，包括header、article、aside、footer、figure和figcaption的用途。并给出了如何使用这些元素来构建文章区、标题、图片展示区的实例，强调了语义化和搜索引擎优化的重要性。

摘要由CSDN通过智能技术生成

结构元素

文章目录

结构元素

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

通关知识

1、<article>元素主要用于定义页面的什么内容？（A）
A、文章
B、版权信息
C、导航
D、辅助内容

2、以下选项，哪个不属于语义化的元素？（C）
A、<header>
B、<aside>
C、<span>
D、<footer>

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

4、aside元素用于定义当前页面或当前文章的附属信息。（A）
A、正确
B、错误

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

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

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个文章区(<article>)。
文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（<h3>）。
文章区的内容使用段落标签（<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区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个图类显示区(<figure>)。
该区中插入的图像如下图所示：该图的URL为https://www.educoder.net/api/attachments/1223388
插图的下方用语义化元素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>