购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.4 新增的非主体结构元素

除了以上几个主要的结构元素之外,HTML5 中还增加了一些表示逻辑结构或附加信息的非主体结构元素。

2.4.1 实例应用——header元素

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,header内也可以包含其他内容,例如表格、表单或相关的Logo图片,并且确实在Web上被反复使用。

在架构页面时,整个页面的标题常放在页面的开头,header标签一般都放在页面的顶部。可以用如下所示的形式书写页面的标题。

<header>

<h1>页面标题</h1>

</header>

在一个网页中可以拥有多个header元素,可以为每个内容区块加一个header元素。

<header>

<h1>网页标题</h1>

</header>

<article>

<header>

<h1>文章标题</h1>

</header>

<p>文章正文</p>

</article>

在HTML5中,一个header元素通常包括至少一个headering元素(h1~h6),也可以包括hgroup、nav等元素。

下面是一个网页中的header元素使用实例,运行代码的结果如图2-15所示。

<header>

<hgroup>

<h1>佛教名山之首五台山</h1>

<p>五台山位于山西省忻州市五台县境内,位列中国佛教四大名山之首。五台山位于山西省东北部,隶属忻州市五台县,西南距省会太原市230公里,与浙江普陀山、安徽九华山、四川峨眉山共称&ldquo;中国佛教四大名山&rdquo;。……</p>

</hgroup>

<nav>

<ul>

<li>地质地貌</li>

<li>气候特点</li>

<li>自然资源</li>

<li>人文历史</li>

<li>旅游信息</li>

</ul>

</nav>

</header>

图2-15 header 元素使用实例

2.4.2 实例应用——hgroup元素

hgroup元素用于组织具有一些逻辑联系的多级标题,例如次级标题、副标题以及标语口号等。hgroup元素通常会将h1~h6元素进行分组,一个内容区块的标题及其子标题算一组。

通常,如果文章只有一个主标题,是不需要hgroup元素的。但是,如果文章有主标题,主标题下有子标题,就需要使用hgroup元素了。如下所示的是hgroup元素的实例代码,运行代码的结果如图2-16所示。

<article>

<header>

<hgroup>

<h1>北京旅游景点介绍</h1>

<h2>北京植物园</h2>

</hgroup>

<p>

<time datetime="2013-05-20">2014年12月20日</time></p>

<p>北京植物园位于西山卧佛寺附近,1956年经国务院批准建立,面积400公顷,是以收集、展示和保存植物资源为主,集科学研究、科学普及、游览休憩、植物种质资源保护和新优植物开发功能为一体的综合植物园。北京植物园由植物展览区、科研区、名胜古迹区和自然保护区组成,园内收集展示各类植物10000余种(含品种)150余万株。</p>

</header>

</article>

如果有标题和副标题,或在同一个header元素中加入了多个标题,那么就需要使用hgroup元素。

图2-16 hgroup元素实例

2.4.3 实例应用——footer元素

footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。footer元素和header元素的使用方法基本一样,可以在一个页面中使用多次,如果在一个区段后面加入footer元素,那么它就相当于该区段的尾部了。

在HTML5出现之前,通常使用类似下面的代码来写页面的页脚。

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

<meta charset="gb2312">

<title><span class="wp_keywordlink_affiliate">

<a href="" target="_blank"> footer元素</a></span></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>

在HTML5中,这种方式将不再使用,而用更加语义化的footer来写。

<!DOCTYPE html>

<meta charset="utf-8">

<title>footer<span class="wp_keywordlink_affiliate"><title>

<a href=" " target="_blank">footer元素</a></span>

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

<footer>

<ul>

<li>交通路线</li>

<li>站点地图</li>

<li>联系方式</li>

</ul>

</footer>

footer 元素既可以用作页面整体的页脚,也可以作为一个内容区块的结尾,例如可以将<footer>直接写在<section>或<article>中。

在article元素中添加footer元素。

<article>

文章内容

<footer>

文章的脚注

</footer>

</article>

在section元素中添加footer元素。

<section>

分段内容

<footer>

分段内容的脚注

</footer>

</section>

2.4.4 实例应用——address元素

address 元素用于标记 article 元素或者整个文档的联络信息。address 元素通常位于文档的末尾,用来在文档中呈现联系信息,包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等。address不只是用来呈现电子邮箱或真实地址这样的“地址”概念,而应该包括与文档创建人相关的各类联系方式。

下面是address元素实例。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>address元素实例</title>

</head>

<body>

<address>

<a href="mailto:webmaster001@example.com">webmaster</a><br />

北京时尚科技公司<br />

电话:010-12345678<br />

</address>

</body>

</html>

在浏览器中显示地址的方式与其周围的文档不同,在IE、Firefox和Safari等浏览器中以斜体显示地址,如图2-17所示。 WW878Yv+Fs+1CG1P9u52LZAkpvKIJyOie4bznSbTE+f+DyW8WQWKhKO7HgQHwWey

图2-17 address元素实例
点击中间区域
呼出菜单
上一章
目录
下一章
×