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. I/O扩展篇(基于74HC164/74HC165)

    在我们的单片机应用系统中,常常会遇到I/O口不够的情况.譬如说接有外部RAM而且要求有16个以上的按键,8位数码管以上的显示.而且还不包括其它的外围器件.这时整个系统的I/O资源就很吃紧了.系统的扩展 ...

  2. linux ssh服务器

    默认配置文件在: /etc/ssh/下 有两个需要配置的文件: ssh_config    ssh_client配置文件 sshd_config  ssh服务器的配置文件 两个文件的详细介绍和配置方法 ...

  3. 【转载】C/C++中#ifdef和#endif的用法

    转于 http://www.cnblogs.com/renyuan/archive/2013/05/22/3092362.html 今天笔试的时候遇到这个问题,整理一下! 一般情况下,源程序中所有的行 ...

  4. windows github 命令行使用

    1.下载git客户端工具,以下2个网站一样的https://git-for-windows.github.io/https://git-scm.com/download/win/ 2.初始化ssh-k ...

  5. Docker SSH

    1. Dockerfile   -->docker build -t centos6-ssh https://git.oschina.net/feedao/Docker_shell/raw/st ...

  6. [redis] redis.clients.jedis.exceptions.JedisDataException: MOVED 13102 127.0.0.1

    这个异常上网查了很久才知道原因: MOVED indicates that you're using Redis Cluster. ShardedJedis is not for Redis Clus ...

  7. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...

  8. [Spring MVC] - SpringMVC的各种参数绑定方式

    SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...

  9. 原生js 实现购物车价格和总价 统计

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. l类型转换错误ClassCastException

    出现问题原因story中参数写错: