• 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>
  • 相关阅读:
    深入探索迭代器(续)
    深入探索迭代器
    C++ 容器的综合应用的一个简单实例——文本查询程序
    multimap 和 multiset 类型
    set 类型
    map 类型
    关联容器
    Ajax请求成功, 但进不去success方法
    springboot指定配置文件启动项目
    新测可用IntelliJ IDEA 2020.1 for mac
  • 原文地址:https://www.cnblogs.com/shenlaiyaoshi/p/6008589.html
Copyright © 2020-2023  润新知