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

最新推荐文章于 2023-05-16 12:19:33 发布

白夜的月亮

最新推荐文章于 2023-05-16 12:19:33 发布

阅读量583

点赞数

分类专栏： educoder平台实训html-web实训文章标签： html python 开发语言

本文链接：https://blog.csdn.net/m0_59076472/article/details/121674208

版权

educoder平台实训html-web实训专栏收录该内容

30 篇文章 14 订阅

订阅专栏

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>

白夜的月亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
educoder实训平台----页面结点元素

educoder实训平台----页面结点元素第1关：页面结点元素相关概念BCDAB第2关：section元素的使用<!DOCTYPE html><html> <head> <title>页面结点元素</title> <style type="text/css"> #Head{border-bottom:4px double #eee; tex
复制链接

扫一扫