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. JSBinding+SharpKit / 脚本加密（JSC或Bytecode，参考cocos2d-js）

    现在已经可以编译JSC,目前只能在 Windows 下编译 JSC.这个功能是从 cocos2d-js 抄过来的,他应该也支持在Mac编译,但是我没有试过. 菜单:JSB | Compile all ...

  2. Cacti-安装和使用详解

    Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmp get来获取数据,使用 RRDtool绘画图形,而且你完全可以不需要了解RR ...

  3. Faster-RCNN 训练自己的数据

    在前一篇随笔中,数据制作成了VOC2007格式,可以用于Faster-RCNN的训练. 1.针对数据的修改 修改datasets\VOCdevkit2007\VOCcode\VOCinit.m,我只做 ...

  4. Node.js知识点

    1. 入口文件app.js里的路由,按顺序执行: 2.

  5. mac osx 快捷键符号以及意义 触发角：锁屏

    快捷键中常用符号⌘(command).⌥(option).⇧(shift).⇪(caps lock).⌃(control).↩(return).⌅(enter). OSX快捷键 快捷键中常用符号 ⌘( ...

  6. 外联css及js的使用

    结构图如下: html如下: <!DOCTYPE html> <html> <head> <title>button test</title> ...

  7. 转来的。。。 关于return 的一些事情

    转来的 http://blog.csdn.net/haiwil/article/details/6691854/ 一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局 ...

  8. 如何删除控制文件中过去rman备份到磁带的备份集

    问题描述: 早上做数据库巡检,发现FRA(flash recovery area)空间使用率达到66%,是平时的两倍.由于库不大,备份策略是本地磁盘备份,每天一全备,REDUNDANCY 1 ,备份完 ...

  9. Android 常见问题收集 (持续更新)

    gridview中设置item的高度. 一.BaseAdapter中的getView中设置 AbsListView.LayoutParams param = new AbsListView.Layou ...

  10. crosswalk-webview

    https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview https://cordova.apache.org/doc ...