• html-5 --html5教程article、footer、header、nav、section使用


    header
    
    header元素是一种具有引导和导航作用的辅助元素。通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。
    我们可以使用该元素来写整个页面的标题部分:
    
    <header>
        <h1>The most important heading on this page</h1>
    </header>
     
    
    同一个页面中,每一个内容区块都可以有自己的<header>元素,例如:
    
    <header> 
      <h1>The most important heading on this page</h1>
    </header>

    在HTML5中,我们可以不使用div,而用更加语义化的footer来写:
    
    <footer>
      <ul>
         <li>copyright</li>
         <li>sitemap</li>
         <li>contact</li>
         <li>to top</li>
      </ul>
    </footer>
    在同一个页面中可以使用多个<footer>元素,即可以用作页面整体的页脚,也可以作为一个内容区块的结尾,例如,我们可以将<footer>直接写在<section>或是<article>中:
    
    <section>
       Section content appears here.
       <footer>
          Footer information for section.
       </footer>
    </section>
    
    <article>
       Article content appears here.
       <footer>
          Footer information for article.
       </footer>
    </article>
     

    nav  -- 作用 -- 导航栏

    nav
    
    nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的,而不需要<nav>元素。
    
    一直以来,我们都习惯用如下这种方式来定义导航条:
    
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/blog/">Blog</a></li>
      </ul>
    </nav>


    下面是W3C给出的一个代码示例:
    
    <body>
        <h1>The Wiki Center Of Exampland</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/events">Current Events</a></li>
                ...more...
            </ul>
        </nav>
        <article>
            <header>
                <h1> Demos in Exampland</h1>
                <p>Written by A. N. Other.</p>
            </header>
            <nav>
                <ul>
                    <li><a href="#public">Public demonstrations</a></li>
                    <li><a href="#destroy">Demolitions</a></li>
                    ...more...
                </ul>
            </nav>
            <div>
                <section id="public">
                    <h1>Public demonstrations</h1>
                    <p> ...more...</p>
                </section>
                <section id="destroy">
                    <h1>Demolitions</h1>
                    <p>...more...</p>
                </section>
                ...more...
            </div>
            <footer>
                <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
            </footer>
        </article>
        <footer>
            <p><small>© copyright 1998 Exampland Emperor</small></p>
        </footer>
    </body>
  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/shenlaiyaoshi/p/6008589.html
Copyright © 2020-2023  润新知