HTML5教程:3.2 新增的非主体结构元素
2012-07-16 18:40
423 查看
除了以上几个主要的结构元素之外，HTML 5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。下面分别来介绍。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
很明显，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：
折叠XML/HTML 代码复制内容到剪贴板
<header><h1>页面标题</h1></header>
需要强调的一点是：一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素，如示例1所示。WANGYEXX.COM
示例1：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>多个header元素示例</title>
</head>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML 5中，一个header元素通常包括至少一个hcading元素（h1-h6），也可以包括我们后面将要讨论的hgroup元素，还可以包括其他元素（譬 如table或form），根据最新的W3C HTML 5标准，还可以包括nav元素。最后，让我们看一下博客网页中header元素的一个应用示例。示例中header元素处于页面顶部。详见示例2。
示例2：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>博客网页中header元素示例</title>
<style type="text/css">
body{
color:white;
}
a{
color:white;
}
header{
background-image:url(bg.jpg);
width:900px;
height:270px;
padding-left:50px;
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
margin-left:-40px;
}
li{
margin-left:10px;
height:20px;
}
a{
text-decoration:none;
font-weight:bold;
with:80px;
}
</style>
</head>
<header>
<hgroup>
<h1>IT新技术</h1>
<a href="http://www.wangyexx.com/">http://www.wangyexx.com/</a>
<a href="#">[订阅]</a>
<a href="#">[手机订阅]</a>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li><A href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A></li>
<li><A href="http://www.wangyexx.com/special/arc-507.html">html教程</A></li>
<li><A href="http://www.wangyexx.com/special/arc-616.html">JavaScript教程</A></li>
</nav>
</header>
这段代码显示界面如图1所示。
图1 博客网页中header元素示例
二、hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1-h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。
通常，如果文章只有一个主标题，是不需要hgroup元素的，如示例3所示。
示例3：
折叠XML/HTML 代码复制内容到剪贴板
<article>
<header>
<h1>文章标题</h1>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
但是，如果文章有主标题，主标题下有子标题，就需要使用hgroup元素了，如示例4所示。
示例4：
折叠XML/HTML 代码复制内容到剪贴板
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
三、footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读链接及版权信息等。
在HTML 5出现之前，我们使用下面的方式编写页脚，如示例5所示。
示例5：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>HTML5之前的页脚示例</title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
div{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<div id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
<div>
但是到了HTML 5之后，这种方式将不再使用，而是使用更加语义化的footer元素来替代，如示例6所示。
示例6：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>footer元素示例</title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
footer{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
与header元素一样，一个页面中也未限制footer元素的个数。同时，可以为article元素或section元素添加footer元素，请看下面两个示例。
示例7为一个在article元素中添加footer元素的示例。
示例7：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>在article元素中添加footer元素</title>
</head>
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
示例8为一个在section元素中添加footer元素的示例。
示例8：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>在section元素中添加footer元素</title>
</head>
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
四、address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关的联系人的所有联系信息-譬如，在示例9中，展示了一些博客中某篇文章评论者的名字及其在 博客中的网址链接。
示例9：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>address元素示例</title>
</head>
<address>
<A href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A>
<A href="http://www.wangyexx.com/special/arc-507.html">html教程</A>
<A href="http://www.wangyexx.com/special/arc-616.html">JavaScript教程</A>
</address>
下面我们通过示例10来看如何把footer元素、time元素与address元素结合起来使用。WANGYEXX.COM
示例10：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>footer、time与address结合使用</title>
</head>
<footer>
<div>
<address>
<A title="如何制作网页" href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A>
</address>
发表于<time datetime="2010-10-04">2010年10月4日</time>
</div>
</footer>
在这个示例中，把博客文章的作者、博客的主页链接作为作者信息放在了address元素中，把文章发表日期放在了time元素中，把这个address元素与time元素中的总体内容作为脚注信息放在了footer元素中。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:http://www.wangyexx.com/html/html5/1615.html
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
很明显，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：
折叠XML/HTML 代码复制内容到剪贴板
<header><h1>页面标题</h1></header>
需要强调的一点是：一个网页内并未限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素，如示例1所示。WANGYEXX.COM
示例1：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>多个header元素示例</title>
</head>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
在HTML 5中，一个header元素通常包括至少一个hcading元素（h1-h6），也可以包括我们后面将要讨论的hgroup元素，还可以包括其他元素（譬 如table或form），根据最新的W3C HTML 5标准，还可以包括nav元素。最后，让我们看一下博客网页中header元素的一个应用示例。示例中header元素处于页面顶部。详见示例2。
示例2：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>博客网页中header元素示例</title>
<style type="text/css">
body{
color:white;
}
a{
color:white;
}
header{
background-image:url(bg.jpg);
width:900px;
height:270px;
padding-left:50px;
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
margin-left:-40px;
}
li{
margin-left:10px;
height:20px;
}
a{
text-decoration:none;
font-weight:bold;
with:80px;
}
</style>
</head>
<header>
<hgroup>
<h1>IT新技术</h1>
<a href="http://www.wangyexx.com/">http://www.wangyexx.com/</a>
<a href="#">[订阅]</a>
<a href="#">[手机订阅]</a>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li><A href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A></li>
<li><A href="http://www.wangyexx.com/special/arc-507.html">html教程</A></li>
<li><A href="http://www.wangyexx.com/special/arc-616.html">JavaScript教程</A></li>
</nav>
</header>
这段代码显示界面如图1所示。
图1 博客网页中header元素示例
二、hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1-h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。
通常，如果文章只有一个主标题，是不需要hgroup元素的，如示例3所示。
示例3：
折叠XML/HTML 代码复制内容到剪贴板
<article>
<header>
<h1>文章标题</h1>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
但是，如果文章有主标题，主标题下有子标题，就需要使用hgroup元素了，如示例4所示。
示例4：
折叠XML/HTML 代码复制内容到剪贴板
<article>
<header>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
三、footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读链接及版权信息等。
在HTML 5出现之前，我们使用下面的方式编写页脚，如示例5所示。
示例5：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>HTML5之前的页脚示例</title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
div{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<div id="footer">
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
<div>
但是到了HTML 5之后，这种方式将不再使用，而是使用更加语义化的footer元素来替代，如示例6所示。
示例6：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>footer元素示例</title>
<style type="text/css">
body{
background-color:#9ACDCD;
}
footer{
display: -moz-box;
display: -webkit-box;
-moz-box-pack:center;
-webkit-box-pack:center;
width:100%;
}
ul{
display: -moz-box;
display: -webkit-box;
list-style:none;
list-style-image: url(side.gif);
}
li{
width:100px;
}
</style>
</head>
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
与header元素一样，一个页面中也未限制footer元素的个数。同时，可以为article元素或section元素添加footer元素，请看下面两个示例。
示例7为一个在article元素中添加footer元素的示例。
示例7：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>在article元素中添加footer元素</title>
</head>
<article>
文章内容
<footer>
文章的脚注
</footer>
</article>
示例8为一个在section元素中添加footer元素的示例。
示例8：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>在section元素中添加footer元素</title>
</head>
<section>
分段内容
<footer>
分段内容的脚注
</footer>
</section>
四、address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关的联系人的所有联系信息-譬如，在示例9中，展示了一些博客中某篇文章评论者的名字及其在 博客中的网址链接。
示例9：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>address元素示例</title>
</head>
<address>
<A href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A>
<A href="http://www.wangyexx.com/special/arc-507.html">html教程</A>
<A href="http://www.wangyexx.com/special/arc-616.html">JavaScript教程</A>
</address>
下面我们通过示例10来看如何把footer元素、time元素与address元素结合起来使用。WANGYEXX.COM
示例10：
折叠XML/HTML 代码复制内容到剪贴板
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>footer、time与address结合使用</title>
</head>
<footer>
<div>
<address>
<A title="如何制作网页" href="http://www.wangyexx.com/special/arc-159.html">如何制作网页</A>
</address>
发表于<time datetime="2010-10-04">2010年10月4日</time>
</div>
</footer>
在这个示例中，把博客文章的作者、博客的主页链接作为作者信息放在了address元素中，把文章发表日期放在了time元素中，把这个address元素与time元素中的总体内容作为脚注信息放在了footer元素中。
点击下载HTML5教程案例资源 返回《深入探索HTML5教程》教程列表
转载请注明本文地址:http://www.wangyexx.com/html/html5/1615.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5教程:3.2 新增的非主体结构元素
- HTML5新增的非主体结构元素
- HTML5新增的主体元素和新增的非主体结构元素
- HTML5新增的非主体结构元素：
- HTML5新增的主体结构元素和非主体结构元素
- 【HTML5初涉】新增主体结构元素和非主体结构元素
- HTML5教程:3.1 新增的主体结构元素
- HTML5新增的非主体结构元素
- HTML5新增的非主体结构元素
- HTML5新增的非主体结构元素
- HTML5教程:3.1 新增的主体结构元素
- HTML5新增的主体结构元素
- HTML5 学习笔记2-新增的主体结构元素
- HTML5新增的主体结构元素
- HTML5新增的主体结构元素
- 新增的非主体结构元素
- html5新增主体结构元素之nav
- 四，细说 HTML5 之 新增的非主题结构元素
- HTML5教程:4.1 新增元素与属性
- html5新增元素主体结构