当前位置：网站首页>Educoder Web练习题---结构元素

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

2022-06-21 12:22:00 【是小鹿啊】

结构元素

文章目录

结构元素

第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>