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

时间：2021-07-11 21:11:03
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>

相关文章