HTML5 中的Header元素详解

来源：互联网发布：淘宝怎么装修店铺编辑：程序博客网时间：2024/05/24 03:04

什么是header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。

注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。

header元素的用法

下面根据一幅图来具体看看header元素的使用方法：

黑色线框所包裹的就是我们的网页，在网页里面有一个网页标题，在网页标题下面是我们的文章标题和正文内容区域，在这幅图里面我们就可以给我们的网页标题和文章标题都使用header元素。

下面就一起来演示下：

<body>

</header>

</header>

<p>文章正文部分</p>

</article>

</body>

Header元素效果演示图：

在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的W3C HTML5标准，我们还可以把NAV元素包括进去。

下面我们就来实现上图中header案例：

<body>

</hgroup>

<nav>

<ul>

</ul>

</nav>

</header>

</body>

效果演示图如下：

下面我们需要给它添加一些css样式：

<style>

Margin:0;

Padding:0;

}

Body{

Font-family:微软雅黑;

Text-algin:center;

}

Color:#f60;

Text-decoration:none;

}

Hgroup{

Margin-bottom:10px;

}

Nav{

Height:48px;

Backgroud:#ff6600;

}

Nav li{

Float:left;

Backgroud:#000000;

Border-radius:5px;

Padding:5px 10px;

Margin:10px;

List-style:none;

}

</style>

最终效果演示图：

原文链接：http://www.maiziedu.com/wiki/html5/header/

0 0