页面结点元素

最新推荐文章于 2022-11-24 11:26:32 发布

静待花开︳

最新推荐文章于 2022-11-24 11:26:32 发布

阅读量1k

点赞数

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

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

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

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

1、<section>元素主要用于定义页面的什么内容？B、文章的节

2、<nav>元素主要用于定义页面的什么内容？C、导航
3、下列选项中，用于表示该网页作者联系信息的是（）元素。D、address

4、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。A、正确
5、address元素用于代表页面的一个部分，是一个可以作为页面导航的链接组。B、错误

第2关：section元素的使用

文章节的设置

HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。代码结构如下：

<section>
<header>文章的节标题</header>
<p>文章的段落内容</p>
</section>

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的语义化元素设计一个文章的节(<section>)。 2.文章节的头部要设置节标题，标题文字为“什么是红茶”，要求为该标题文字设置三级标题（<h3>）。 3.节的内容使用段落标签（<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>
      <!-- ********* End ********* -->
      </article>
  </body>
</html>

第3关：nav元素的使用

文章区的结构

设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。代码结构如下：

<nav>
<a href="链宿的路径" title="显示文本">链源</a>
......
</nav>

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的语义化元素设计一个导航区(<nav>)。 2.导航区中嵌入两个超链接，第一个超链接的链源文字为“主页”，链宿路径为“https://www.qmhtea.com/”，设置鼠标悬停在链源上时显示提示文字，内容为“主页”。 3.导航区嵌入的第二个超链接的链源文字为“花茶及文化”，链宿路径为空连接“#”，设置鼠标悬停在链源上时显示提示文字，内容为“花茶及文化”。

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

任务描述

本关任务：运用HTML5的语义化元素设计一个包含版权信息和联系人信息的页脚区。效果图如下：

页脚效果

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.运用HTML5中的语义化元素设计一个文章的页脚(<footer>)。 2.使用<h4>标题标签为页脚区添加版权信息，内容为“©2020 Tyut”。 3.使用<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>

静待花开︳

关注

0
点赞
踩
0

收藏

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

第1关：页面结点元素相关概念1、<section>元素主要用于定义页面的什么内容？B、文章的节2、<nav>元素主要用于定义页面的什么内容？C、导航3、下列选项中，用于表示该网页作者联系信息的是（）元素。D、address4、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。A、正确5、address元素用于代表页面的一个部分，是一个可以作为页面导航的链接组。B、错误第2关：section元素的使用文章节的设置
复制链接

扫一扫