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>

html-5 --html5教程article、footer、header、nav、section使用的更多相关文章

  1. 关键自li，em，dl，ul,ol,footer,header,nav,aside,article

    section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 header 页面头部或者版块(section)头部 footer 页面底部或者(section)底部 nav 导航 (包含链接 ...

  2. html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.he ...

  3. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  4. html5，html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

  5. 一步HTML5教程学会体系

    HTML5是HTML最新的版本,万维网联盟. HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体. 新特性: 绘画的canvas元素,用于媒介回放的video和audio元素,对 ...

  6. IT兄弟连 HTML5教程 了解HTML5的主流应用1

    在很多人眼里,HTML5与互联网营销密切相关,但其实从开发者的角度而言,它是一种网页标准,定义了浏览器语言的编写规范.伴随HTML5标准尘埃落定,浏览器对HTML5特性的逐步支持,再加上国内对HTML ...

  7. html5知识点补充—footer元素的使用

    使用footer元素创建脚注 顾名思义,footer元素通常位于页面的底部.尽管footer通常位于某个区域或者页面的底部,但并非总是如此.footer元素旨在包含作者.网站所有者.版权数据.网站规章 ...

  8. 【转帖】39个让你受益的HTML5教程

    39个让你受益的HTML5教程                    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...

  9. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

随机推荐

  1. UIAutomator定位Android控件的方法

    UIAutomator各种控件定位的方法. 1. 背景 使用SDK自带的NotePad应用,尝试去获得在NotesList那个Activity里的Menu Options上面的那个Add note菜单 ...

  2. WTL编程小技巧汇编

    1.设置窗体生成大小并中央显示窗口 2.设置窗体最大/小尺寸 3.动态设置窗体标题 4.设置对话框的字体和背景颜色 5.设置窗体控件默认字体 以下技巧可应用于SDI和MDI程序: 1.设置窗体生成大小 ...

  3. DOM节点的修改

    首先,我们将最后段落赋值给变量my: var my = document.getElementById('closer'); 接下来,我们就能够轻松地通过修改对象的innerHTML值来修改段落中的文 ...

  4. ORA-02049: 超时: 分布式事务处理等待锁的解决方法

    是其他地方执行了操作没有提交,把其他地方提交了就好了

  5. Blackfin DSP(二)：寄存器操作与GPIO

    BlackfinDSP的寄存器是通过指针操作的,与51.ARM等MCU一样,通过“或”操作来置1,通过“与”操作清零. 在DSP上最简单的外设非IO口莫属,但是由于其功能强大,远非一般IO口可比,因此 ...

  6. python 向上取整ceil 向下取整floor 四舍五入round

    #encoding:utf-8 import math #向上取整 http://www.manongjc.com/article/1335.html print "math.ceil--- ...

  7. [PAT]数列求和（20）

    #include "stdio.h" #include "malloc.h" #include "math.h" void calc(int ...

  8. WCF使用小结:(1)WCF接收HTTP POST数据的处理方法

    在WCF 4.0中,为我们创建Restful API有了更好的支持.通过定义UriTemplate,WebInvoke就可以快速开发API接口. 这里我记录一下HTTP POST数据时要如何接收POS ...

  9. iOS 设置页面的代码编写

    突然觉得好久没有更新博客了,今天就想把自己的项目中的一些功能和常用的模块写出来给大家参考一下... 这是我的二个项目中的不同的设置界面,第一个设置的那个按钮是 用的开关switch ,当然这个就容易一 ...

  10. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...