header标签元素有什么用？header标签元素详细介绍
在HTML5版本之前习惯使用div标签布局网页，在HTML5在DIV标签基础上新增header标签元素。也叫“<header>”头部标签。以前我们在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加id进行布局。而头部常常使用<div id=”header”></div>或<div class=”header”></div>进行布局，特点与传统DIV布局不同，少了div做标签，而是新增元素标签。正应为大家公认html布局中对“header”为常用命名，所以在HTML5新增了个header标签元素。可以这样理解为什么在html5中新增header为标签元素。除了直接使用header标签外，也可以对header设置class或id。
<article> 的页眉：
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <header> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <header> 标签。
标签定义及使用说明
<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
header标签元素和div用法相同。有开始有闭合。
语法：
<header>内容</header>
1、直接不给id或class
<header>头部内容区</header>
2、设置id
<header id=”169it”>头部内容区</header>
3、设置class
<header class=”169it”>头部内容区</header>
4、特点：就像DIV标签元素一样可以多次使用，不同地方可以使用id或class设置不同样式。
header标签元素用法实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 Header标签实例 --- www.</title>
<style>
/* 传统布局CSS */
#header{ width:300px; height:40px; background:#CCC}
/* HTML5布局样式 */
header{ width:400px; height:70px; color:#F00; background:#F5F5F5}
.color-000{ color:#000; background:#666}
</style>
</head>
<body>
<div id="header">我在传统div布局中</div>
<header>我在传统div布局中,必须在支持HTML5浏览器才能看到效果，
建议谷歌浏览器测试观察效果</header>
<header class="color-000">我颜色为黑色,背景为#666</header>
</body>
</html>HTML 4.01 与 HTML5之间的差异
<header> 标签是 HTML 5 中的新标签。
<header> 标签支持 HTML 的全局属性。
<header> 标签支持 HTML 的事件属性。
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <header> 标签
