html5

您当前位置:匀阳教程网 >> 网页制作 >> HTML >> html5 >> 浏览文章

html5中〈hgroup〉标签使用详解

【字体: 】 浏览量:

hgroup 是HTML5中新定义的元素,用来将标题和副标题群组。在我们已经有header标签的情况下,为什么我们还要一个<hgroup>标签?下面将是这个问题的解答

什么是 <hgroup>元素

下面是文档关于的描述 <hgroup>的描述:
hgroup一般被用作将一个或者更多的h1到h6的元素群组,比如,一个区块内的标题和它的副标题。

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification

这个表述代表着什么?

<hgroup>扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在&ls;header>元素中。它只能包含从h1-h6的标题元素,这些标题可能是副标题、二选一的标题或者标记标题。

更简单的理解如何使用<hgroup>的方法,是我们通过一些例子。比如下面 Dr.Oli 的例子:

当article标签有且只有一个标题的时候:

<article>  

<h1>Article title</h1>  

<p>Content…</p> 

</article>

 当article标签有一个标题,并且还包含元数据的时候(meatadata)

 <!-- Wrapping title and metadata in header --> 

<article>  

<header>  

<h1>Article title</h1> 

<p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>  

</header>

  <p>Content…</p>

</article>

当article标签有一组自我闭合标题的时候:

 <!-- Title h1 and subtitle h2 in hgroup --> 

<article>  

<hgroup>  

<h1>Article title</h1> 

<h2>Article subtitle</h2>  

</hgroup>  

<p>Content…</p> 

</article>

一个article标签包含一个标题和副标题和元数据

 <!-- A heading which uses header and hgroup --> 

<article>  

<header> 

 <hgroup>

 <h1>Article title</h1> 

 <h2>Article subtitle</h2> 

 </hgroup> 

 <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>  

</header> 

 <p>Content…</p> 

</article>

我们为什么要使用<hgroup>?

我们用<hgroup>一切源起文档大纲(document outline).
当群组的标题在<hgroup>元素的时候,大纲的算法将会覆盖掉群组中低等级的标题,而将最高等级的标题作为大纲。下面的就是一个例子:

 <header>

  <hgroup> 

 <h1><a href="/">Mini Apps</a></h1> 

 <h2>Web applications for iPhone, Android & other mobile platforms</h2> 

 </hgroup>

 </header>

<hgroup>包含h1-h2的标题元素,但是在大纲中只包含<h1>.总结:
我们刚刚讲的是如何高效的使用 <hgroup>元素。回顾一下:
.如果你只有一个标题元素(h1-h6中的一个),你并不需要<hgroup>.
.当出现一个或者一个以上的标题与元素时,适用<hgroup>来包围他们。
.当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时,将<hgroup>和元数据放到一个单独的<header>元素容器中。

网友评论:


热门教程
猜你喜欢的教程
Copyright 2010-2014 Powered by yysem.net
友情链接咨询: 豫ICP备11021559号
本网站部分内容来自于互联网以及相关书籍等各方,仅作技术交流学习之用,如果侵权敬请告知,我们会及时改正。