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。

二、语法结构  

header标签元素和div用法类似。有匹面有闭合。

语法:

<header>形式</header> 

1、直接不给id或class

<header>头部内容区</header> 

2、设置装备摆设id

<header id=”CSS5”>头部形式区</header> 

3、配置class

<header class=”CSS5”>头部内容区</header> 

4、赋性:就像DIV标签元素一样可以或许频繁使用,差异处所可使用id或class配置差别样式。

三、兼容性  

由于header标签是HTML5新增标签元素,以是旧版本浏览器均不支持,须要IE9+以上阅读器、最新谷歌Chrome等浏览器才赞成。只管国外360涉猎器、百度浏览器、飞行浏览器等涉猎器均借用系统自带IE内核,以是国内阅读器现实上与你琐屑自带涉猎器IE版底蕴斥,所以你IE浏览器在IE9或以上版本自然就兼容HTML5新增标签元素。

四、新旧DIV结构相比案例  

通过DIV+CSS构造与HTML5+CSS布局比拟观察并把握对header应用。

1、CSS5实例HTML5+CSS完整代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例 CSS5</title> 
<style> 
/* 传统机关CSS */ 
#header{ width:300px; height:40px; bac公斤round:#CCC} 

/* HTML5布局样式 */ 
header{ width:400px; height:70px; color:#F00; bac千克round:#F5F5F5} 
.color-000{ color:#000; background:#666} 
</style> 
</head> 
<body> 
<div id="header">我在激进div构造中</div> 

<header>我在激进div布局中,必需在支持HTML5阅读器手腕看到成就, 
提倡google浏览器测试窥察成效</header> 

<header class="color-000">我颜色为玄色,背景为#666</header> 
</body> 
</html> 

2、成就截图

 

div与html5 header机关成绩截图

CSS5格外暗指:代码在DW软件截图、成效在googleChrome(支持HTML5)涉猎器成绩进行PS的效果图。普通IE6-IE8不赞成HTML5看不到HTML5组织效果,需要IE9及以上版本浏览器看到组织造诣。