HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav
hgroup
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
<hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2></hgroup> <p>The rest of the content...</p>
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> <article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p></article>
<header>元素通常包含一个标题标签(h1至h6)或是hgroup。另外，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片；根据最新的W3C HTML5规范更新，<nav>元素标签也可以在<header>中使用。
footer
footer元素可以作为其直接父级内容区块或是一个根区块的结尾。footer通常包括其相关区块的附加信息，如作者、相关阅读链接以及版权信息等。
过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：
<div id="footer"><ul><li>copyright</li><li>sitemap</li><li>contact</li><li>to top</li></ul><div>
在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>
address
address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。
根据以上定义，我们可以使用下面的代码来展示一些志愿者的名字及主页链接：
The HTML5 Doctor is run by the following group of volunteers:<address><a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,<a href="http://html5doctor.com/author/richc">Rich Clark</a>,<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,</address>
下面是另一个范例，同时还使用到了<footer>及<time> 元素：
<footer><div class="vcard"> by<address class="author"><em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em></address> on<time datetime="2009-11-04" class="published updated">November 4th, 2009</time></div></footer>
如果我们确实需要在页面中显示某些与当前文档创建者联系方式无关的联系人信息，那么可以使用hCard微格式：
<div class="vcard"><p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p><p class="adr"><span class="street-address">HTML5 Hospital</span><span class="region">Doctorville</span><span class="postal-code">Postal Code</span><span class="country-name">Great Britain</span></p><p class="tel">+44 (0)XXXX XXXXXX</p></div>
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>
HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav相关推荐
- 新元素之hgroup,header,footer,address,nav
hgroup <hgroup> 标签用于对网页或区段(section)的标题进行组合. <hgroup><h1>Welcome to my WWF</h1&g ...
- HTML5学习笔记简明版（2）：新元素之section,article,aside
section section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块.section可以表示成一个小节,或者tab ...
- HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output
video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前) ...
- HTML5学习笔记简明版（5）：input的type超级类型
HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...
- HTML5学习笔记简明版（10）：过时的元素和属性
被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版（10）：废弃的元素和属性
废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版（9）：变化的元素和属性
改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...
- HTML5学习笔记简明版（8）：新增的全局属性
contenteditable属性 不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <pcontentedit ...
- HTML5学习笔记简明版（11）：新API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在 ...
最新文章
- 【Linux】备份与压缩命令命令
- 大神程序员几行代码增粉 100W 最后入狱，附源码。
- Android的开发
- java数据结构教程_Java数据结构
- 测试三相无刷电机驱动器 XXD2212 电调
- Apache与nginx的优缺点对比
- python概率随机抽奖_Python利用带权重随机数解决抽奖和游戏爆装备
- 问题 F: 小鱼的格子裁剪（dfs）
- UI渲染回顾简单笔记
- 地理信息系统概论_地理信息系统概论黄杏元第3版配套练习题库——才聪学习网...
- 编译 php mysql 依赖包_MySQL 5.5.15源码包编译安装
- php 用户认证,PHP用户认证及管理完全源码
- Java并发工具类之CountDownLatch
- python散点图获取边界_获取离散点的边界点
- 《活着》的优秀读后感范文3000字
- 管道的故事（一）管道的故事
- 正则表达式中问号（?）的用法详解
- FileZilla下载地址
- winForm在多显示器(主显示器 + 扩展显示器)上显示最大化和还原操作。
- 老男孩读PCIe之四：TLP类型