首页 > 其他分享> > educoder实训平台----页面结点元素

educoder实训平台----页面结点元素

2021-12-02 12:03:56 作者：互联网

educoder实训平台----页面结点元素

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

BCDAB

第2关：section元素的使用

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

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

<!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>&copy;2020 Tyut</h4>
           <address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
         </footer>
            
               
            
        
        <!-- ********* End ********* -->
    </article>
  </body>
</html>

标签：结点,educoder,text,元素,----,茗茶,红茶,实训,页面
来源： https://blog.csdn.net/m0_59076472/article/details/121674208