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. MySQL管理_数据库常用命令

    1.数据库赋权 进入mysql数据库: mysql> use mysql; 给root用户设置新密码: mysql> update user set password=password(& ...

  2. Dictionary 序列化与反序列化

    [转:http://blog.csdn.net/woaixiaozhe/article/details/7873582] 1.说明:Dictionary对象本身不支持序列化和反序列化,需要定义一个继承 ...

  3. IntelliJ IDEA热加载自动更新（Update classes and resources ）

          IntelliJ IDEA默认文件是自动保存的,但是手头有个项目jsp文件改动后,在tomcat中不能立即响应变化.想要jsp文件改动后立刻看到变化,可以通过修改配置来实现.       ...

  4. Hadoop 2.6 MapReduce运行原理详解

    市面上的hadoop权威指南一类的都是老版本的书籍了,索性学习并翻译了下最新版的Hadoop:The Definitive Guide, 4th Edition与大家共同学习. 我们通过提交jar包, ...

  5. Angular SEO方案

    1.如果是java web项目,可以直接使用AngularSEO Filter. 官网地址 :http://www.angularseo.net/#about <filter> <f ...

  6. 数据结构&算法-双向链表

    1.引言 双向链表原理和单链表差不多,就是操作相对繁琐一些,简单画了几个图,把思想弄清楚就好. 2.正文 这里介绍一下插入和删除的原理,相信这两个操作搞清楚的话,其他操作也没什么问题. 2.1插入节点 ...

  7. Chapter7: question 49 - 50

    49. 把字符串转换为整数 很多细节需要注意.(空格,符号,溢出等) Go: 8. String to Integer (atoi) 50. 树种两个结点的最低公共祖先 A. 若是二叉搜索树,直接与根 ...

  8. 使用CSS和jQuery实现对话框

    因为项目中要显示一些对话框,但用alert显得太丑,后从网上找了一些插件,但有觉得不好用,因此自己试用CSS和jQuery写了一个对话框,代码如下: <!DOCTYPE html> < ...

  9. express 手动删除session状态（即登出功能）

    在退出按钮被点击后,发送请求/logout,服务端做如下处理: app.get('/logout', function() { delete req.session.user; return res. ...

  10. 自动化脚本过程中出现This element neither has attached source nor attached Javadoc...的解决方法

    This element neither has attached source nor attached Javadoc and hence no Javadoc could be found Ec ...