HTML5 结构之美(2) - 新增的非主体结构标签

接上文《HTML5 结构之美(1) - 新增的主体结构标签》,HTML5 还新增了一些表示逻辑结构或附加信息的非主体结构标签。

header标签

header 标签是一种具有引导和导航作用的结构标签,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格、搜索表单或相关的 logo 图片。

很明显,整个页面的标题应该放在页面的开头,我们可以用如下所示的形式书写页面的标题:

<header><h1>页面标题</h1></header>

需要强调的一点是:一个网页内并未限制 header 标签的个数,可以拥有多个,可以为每个内容区块加一个 header 标签,如下所示:

<header>
    <h1>网页标题</h1>
</header>
<article>
    <header>
        <h1>文章标题</h1>
    </header>
    <p>文章正文</p>
</article>

在 HTML5 中,一个 header 标签通常包括至少一个 heading 标签(h1-h6),也可以包含我们后面将要讨论的 hgroup 标签,还可以包含其他标签(比如table或form),根据最新的 HTML5 标准,还可以包括 nav 标签。最后,让我们看一下博客网页中 header 标签的一个应用示例。

<header>
    <hgroup>
        <h1>Jason‘s Blog</h1>
        <a href="http://www.cnblogs.com/jasonsoop/">http://www.cnblogs.com/jasonsoop/</a>
        <a href="#">[订阅]</a>
        <a href="#">[手机订阅]</a>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">博问</a></li>
            <li><a href="#">闪存</a></li>
            <li><a href="#">联系</a></li>
            <li><a href="#">订阅</a></li>
        </ul>
    </nav>
</header>

hgroup标签

hgroup 标签是将标题及其子标题进行分组的标签。hgroup 标签通常会将 h1~h6 标签进行分组,比如一个内容区块的标题及其子标题算一组。

通常,如果文章只有一个主标题,是不需要 hgroup 标签的,如下所示:

<article>
    <header>
        <h1>文章标题</h1>
        <p><time datetime="2014-11-01">2014年11月1日</time></p>
    </header>
    <p>文章正文</p>
</article>

但是,如果文章有主标题,主标题下有子标题,就需要使用 hgroup 标签了,如下所示:

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2014-03-20">2014年3月20日</time></p>
    </header>
    <p>文章正文</p>
</article>

footer标签

footer 标签可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包含与其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。

在 HTML5 出现之前,我们使用下面的方式编写页脚:

<div id="footer">
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</div>

但是到了 HTML5 之后,这种方式将不再使用,而是使用更加语义化的 footer 标签来替代,如下代码所示:

<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</footer>

与 header 标签一样,一个页面也未限制 footer 标签的个数。同时,可以为 article 标签或 section 标签添加 footer 标签。

以下的代码为一个在 article 标签中添加 footer 标签的示例:

<article>
    文章内容
    <footer>
        文章的脚注
    </footer>
</article>

以下的代码为一个在 section 标签中添加 footer 标签的示例:

<section>
    分段内容
    <footer>
        分段内容的脚注
    </footer>
</section>

address标签

address 标签用来在文档中呈现联系信息,包括名字、网站链接、电子邮箱、真实地址、电话号码等等。比如,如下代码展示了一些博客中某篇文章评论者的名字及其在博客中的网址链接。

<address>
    <a href="http://www.cnblogs.com/jasonsoop/">Jason</a>
    <a href="http://www.cnblogs.com/lucky/">Lucky</a>
    <a href="http://www.cnblogs.com/popeye/">Popeye</a>
</address>

下面我们通过代码示例来看如何把 footer 标签、time 标签与 address 标签结合起来使用。

<footer>
    <div>
        <address>
            <a title="文章作者:Jason" href="http://www.cnblogs.com/jasonsoop/">Jason</a>
        </address>
        发表于<time datetime="2014-11-01">2014年11月1日</time>
    </div>
</footer>

在这个示例中,把博客文章的作者、博客的主页链接作为作者信息放在了 address 标签中,把文章发表日期放在了 time 标签中,把这个 address 标签与 time 标签中的总体内容作为脚注信息放在了 footer 标签中。

时间: 2024-12-20 03:12:06

HTML5 结构之美(2) - 新增的非主体结构标签的相关文章

HTML5 结构之美(1) - 新增的主体结构标签

article标签 article 标签代表文档或页面中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内容. 除了内容之外,一个 article 标签通常有它自己的标题(一般放在一个 header 标签里面),有时还有自己的脚注. 现在,让我们以博客为例来看一段关于 article 标签的代码示例: <article> <header> <h1>苹果</h1> <p&g

HTML5新增的非主体结构元素

-------------------siwuxie095 HTML5 新增的非主体结构元素 1.header 元素 header 元素是一种具有引导和导航作用的结构元素,通常 用来放置整个页面 或 页面内的一个内容区块的标题,但是 也可以包含其它内容,如:数据表格.搜索表单.或相关的 logo 图片 2.footer 元素 footer 元素可以作为其上层父级内容区块 或 是一个根区块 的脚注 footer 元素通常包括其相关区块的脚注信息,如:作者.相 关阅读链接.版权信息等 3.hgrou

HTML5的结构学习(2) --- 新增的非主体结构元素

除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一内容区块的标题部分.如标题名称.logo图片等. <header><h1>大标题</h1></header> <article> <header><h1>文章内容标题</h1></header> <

HTML5 结构之美(3) - 结构标签综合运用

前面我们介绍了在 HTML5 中新增的结构标签,以及这些标签的定义和使用方法.接下来,让我们看一下在 HTML5 中进行总体页面布局的时候,具体应该怎样来综合运用这些结构标签. 大纲 通过使用新的结构标签,HTML5 的文档结构比大量使用 div 标签的 HTML4 的文档结构要清晰.明确了很多.如果再规划好文档结构的大纲,就可以创建出对阅读者或屏幕阅读程序来说,都很清晰易读的文档结构. 所谓大纲,简单来说就是文档中各内容区块的结构编排.内容区块可以使用标题标签(h1~h6)来展示各级内容区块的

HTML5 新增结构元素分为主体结构元素和非主体结构元素

做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介绍下 html5 新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的 seo,但其实当页面禁用样式后,它们的展现跟 div 是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是 article 还是 section 能用就好了.如果考虑实际项目的

HTML5 新增的的非主体结构元素

HTML5 新增的的非主体结构元素包括header元素.footer元素.address元素.hgroup元素. header元素:header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,如:数据表格.搜索表单.或者相关的logo.它可以出现多次. <!DOCTYPE html> <html> <head lang="en"> <title>header元素</t

结构之美——优先队列基本结构(四)——二叉堆、d堆、左式堆、斜堆

实现优先队列结构主要是通过堆完成,主要有:二叉堆.d堆.左式堆.斜堆.二项堆.斐波那契堆.pairing 堆等. 1. 二叉堆 1.1. 定义 完全二叉树,根最小. 存储时使用层序. 1.2. 操作 (1). insert(上滤) 插入末尾 26,不断向上比较,大于26则交换位置,小于则停止. (2). deleteMin(下滤) 提取末尾元素,放在堆顶,不断下滤: (3). 其他操作: 都是基于insert(上滤)与deleteMin(下滤)的操作. 减小元素:减小节点的值,上滤调整堆. 增大

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

Java的结构之美【2】——销毁对象

先来看一段代码: import java.util.Arrays; import java.util.EmptyStackException; /** * 2014年6月28日09:31:59 * @author 阳光小强 * */ public class Stack { private Object[] elements; private int size = 0; private static final int DEFAULT_INITAL_CAPACITY = 15; public S