首页 » 编程语言 » html » 正文

HTML5标签:header元素的使用方法及作用

html代码的<header>标签是html5新增标签,通常用于放置介绍性或引导性的内容,也可以作为导航栏目链接的容器,下面,就一起学习<heade>r标签的用法及作用:

<header> 标签定义

<header> 标签定义整个页面或者页面某一个内容区块的头部信息。

<header> 标签定义的通常是介绍性、引导性的内容,或作为导航链接的容器!

<header> 标签可以包含标题标签 h1 ~ h6或hgroup,也可以包含其他的内容,比如导航链接栏、logo、搜索表单等靠近头部区域的内容。

<header> 标签是 HTML 5 中的新标签。

<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

浏览器支持情况

<header> 标签已被 IE9+, Firefox, Opera, Chrome 以及 Safari 支持;

但在IE8 以及更早的版本中,不支持 <header> 标签。

<header> 标签用法

<header> 标签是一个双标签,必须有开始标签和结束标签两部分组成,书写格式如下:

<header> 元素内容</header>

1、用于整个页面的头部

<header> 标签可以作为整个页面靠近顶部位置,这个位置是通常所说的是页面的页眉或头部位置,如下图所示:

如上图所示,在页面头部的<header> 标签,可以包含网站的logo、网站名称、网站主导航、甚至搜索框等元素内容。

2、用于页面中局部内容区块的头部

<header> 标签可用于整个页面中某个局部内容区块的头部,比如,在<section>标签区块内,代码如下:

<section>
    <header>
    <h1>刘代码博客</h1>
    <p>欢迎光临本网站</p>
    </header>
</section>

一个页面上可以包含多个<header> 标签,也就是说,如果一个页面中有多个内容区块,每个内如区块可以包含一个header标签,一个页面中并不限制header标签的个数!

3、<header>标签内嵌元素

<header> 标签内可以包含h1-h6、hgroup等不同的标签,演示代码如下:

<header>
 <hgroup>
 <h1>网站标题</h1> 
 <h2>网站副标题</h2>
 </hgroup>
</header>

<header> 标签除了可以包含h1-h6和hgroup标签,也可以包含其他标签,比如,nav标签、搜索栏表单等!



欢迎您发表评论或留言