Educoder Web练习题---页面结点元素

最新推荐文章于 2022-11-24 10:52:25 发布

是小鹿啊

最新推荐文章于 2022-11-24 10:52:25 发布

阅读量299

点赞数 2

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

来自是小鹿啊的博客

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

版权

前端同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

Educoder

35 篇文章 2 订阅

订阅专栏

页面结点元素

第1关：页面结点元素相关概念

通关知识

1、<section>元素主要用于定义页面的什么内容？（B）
A、文章的侧栏区
B、文章的节
C、文章的标题
D、文章的版权信息

2、<nav>元素主要用于定义页面的什么内容？（C）
A、页眉
B、页脚
C、导航
D、注释

3、下列选项中，用于表示该网页作者联系信息的是（D）元素。
A、figure
B、section 
C、details
D、address 

4、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。（A）
A、正确
B、错误

5、address元素用于代表页面的一个部分，是一个可以作为页面导航的链接组。（B）
A、正确
B、错误

第2关：section元素的使用

编程要求

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

运用HTML5中的语义化元素设计一个文章的节(<section>)。
文章节的头部要设置节标题，标题文字为“什么是红茶”，要求为该标题文字设置三级标题（<h3>）。
节的内容使用段落标签（<p>)设置,节内容为：“ 红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。”

通关代码

<!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
      <article>
        <header id=Head>
          <h3>茗茶推荐——祁门红茶</h3>
           </header>
      <!-- ********* Begin ******* -->
      <section>
        <header><h3>什么是红茶</h3></header>
        <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
      </section>
      <!-- ********* End ********* -->
      </article>
  </body>
</html>

第3关：nav元素的使用

编程要求

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

运用HTML5中的语义化元素设计一个导航区(<nav>)。
导航区中嵌入两个超链接，第一个超链接的链源文字为“主页”，链宿路径为“https://www.qmhtea.com/”，设置鼠标悬停在链源上时显示提示文字，内容为“主页”。
导航区嵌入的第二个超链接的链源文字为“花茶及文化”，链宿路径为空连接“#”，设置鼠标悬停在链源上时显示提示文字，内容为“花茶及文化”。

效果图如下：

导航效果图

通关代码

<!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
       <article>
           <header id=Head>
               <h3>茗茶推荐——祁门红茶</h3>
             <!-- ********* Begin ******* -->
               <nav>
                 <a href="https://www.qmhtea.com/" title="主页">主页</a>
                 <a href="#" title="花茶及文化">花茶及文化</a>
               </nav>
              <!-- ********* End ********* -->
           </header>          
        <section >
           <header><h3>什么是红茶</h3></header>
           <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
        </section >
      </article>
  </body>
</html>

第4关：footer元素和address元素的使用

编程要求

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

运用HTML5中的语义化元素设计一个文章的页脚(<footer>)。
使用<address>元素为页脚区添加联系人信息，内容为“Written by茗茶联系站”，其中“茗茶联系站”为超链接的热字，链宿为“mailto:webmaster@example.com”

效果图如下：

页脚效果

通关代码

<!DOCTYPE html>
 <html>
  <head>
    <title>页面结点元素</title>
    <style type="text/css">
       #Head{border-bottom:4px double #eee;
             text-align:center;
             font-size :20px
           }
    </style>
  </head>
  <body>
    <article>
      <header id=Head>
       <h3>茗茶推荐——祁门红茶</h3>
       <nav>
         <a href="https://www.qmhtea.com/" title="主页">主页</a>
         <a href="#" title="花茶及文化">花茶及文化</a>
       </nav>
      </header>          
      <section >
       <header><h3>什么是红茶</h3></header>
       <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
      </section >
      <hr/>
       <!-- ********* Begin ******* -->
      <footer>
        <h4>©2020 Tyut</h4>
        <address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
      </footer>
        <!-- ********* End ********* -->
    </article>
  </body>
</html>