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><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>

新元素之hgroup,header,footer,address,nav相关推荐

HTML5学习笔记简明版（3）：新元素之hgroup,header,footer,address,nav
hgroup <hgroup> 标签用于对网页或区段(section)的标题进行组合. <hgroup><h1>Welcome to my WWF</h1&g ...
h5---新增的结构性元素(header、footer、nav、article、section、aside、time、progress和meter元素进度条）
前端入门笔记之零散学习(1) 最开始我们页面布局用的是table标签,然后演变成div+css布局,直到现在我们进行布局用新增的结构性元素. div+css布局新增的结构性元素常见的新增结构性元素 ...
web前端：main、header、footer、nav、article、section标签的用法
HTML5 添加了诸如main.header.footer.nav.article.section等大量新标签,这些新标签为开发人员提供更多的选择和辅助特性. 默认情况下,浏览器呈现这些新标签的方式与 ...
自定函数获取datagrid,datalist,rpeater控件中header,footer栏中控件
在论坛上看到很多关于datagrid,gridview,datalist,rpeater提取header,footer中控件的问题,整理了一下.供大家分享下面我以DataGrid为便进行说明. fo ...
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法参考文章: (1)完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的 ...
UICollectionView Header footer
在前面我们已经学过,每个collection view都必须有数据源为其提供内容.它的责任是为collection views完成以下的事情: 控制collection view的section数目 ...
2.11 header footer hgroup address元素
非主体结构元素 2.11.1 header元素:具有引导和导航作用的结构元素,通常防止内容区块的标题,也可以是数据表格.搜索表单或者相关的logo图片. 2.11.2 footer元素:可以作为其上层 ...
html5 文档元素 header footer h1h2h4
文档元素: 用于在页面的大布局, 区分各个主体和概念. 让整体清晰, 元素有语义, 进一步代替div 具体划分图示: (参考) <hgroup> <section> <n ...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(12月26日-1月1日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(12月26日-1月1日) 本周Silverlight学习资源更新 vs2010 学习Silverlight学 ...

新元素之hgroup,header,footer,address,nav

hgroup

header

footer

address

nav

新元素之hgroup,header,footer,address,nav相关推荐

最新文章

热门文章