web头歌页面节点元素

最新推荐文章于 2024-08-25 09:57:22 发布

Yang enjoy

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量422

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/m0_74243656/article/details/135023697

版权

一、页面节点元素相关概念

二、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>

三、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>

四、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>
            <address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
            <h4>©2020 Tyut</h4>
         </footer>

         
        
        <!-- ********* End ********* -->
    </article>
  </body>
</html>