H5中header标签应该如何使用

在HTML5之前的版本大家可能有用DIV标签布局网页的习惯，但是H5在DIV标签的基础上增加了header标签元素，也就是我们说的头部标签，以往我们在布局中常常把网页分为头部，内容，底部，现在已经有系统的标签来帮我们规划，也是方便了很多，那么这个header标签需要怎么使用呢？今天我们就来好好的研究一下

上饶网站建设公司创新互联公司,上饶网站设计制作，有大型网站制作公司丰富经验。已为上饶上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的上饶做网站的公司定做！

正应为大家公认html布局中对“header”为常用命名，所以在HTML5新增了个header标签元素。可以这样理解为什么在html5中新增header为标签元素。

除了直接使用header标签外，也可以对header设置class或id。

语法结构

header标签元素和p用法相同。有开始有闭合。

语法：

1

header内容/header

直接不给id或class

1

header头部内容区/header

设置id

1

header id=”p”头部内容区/header

设置class

1

header class=”p”头部内容区/header

特点：就像DIV标签元素一样可以多次使用，不同地方可以使用id或class设置不同样式。

兼容性

因为header标签是HTML5新增标签元素，所以旧版本浏览器均不支持，需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。当然国内360浏览器、百度浏览器、遨游浏览器等浏览器均借用系统自带IE内核，所以国内浏览器实际上与你系统自带浏览器IE版本相同，所以你IE浏览器在IE9或以上版本自然就兼容HTML5新增标签元素。

新旧DIV布局对比案例

通过DIV+CSS布局与HTML5+CSS布局对比观察并掌握对header应用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

!DOCTYPE html

html

head

meta charset="utf-8" /

titlehtml5 Header标签实例/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

p id="header"我在传统p布局中/p

header我在传统p布局中,必须在支持HTML5浏览器才能看到效果，

建议谷歌浏览器测试观察效果/header

header class="color-000"我颜色为黑色,背景为#666/header

/body

/html

html5中标签和标签有什么区别

一、指代不同

1、head标签：是网页的HEAD(头)部分中包含有的内置标签，用来申明使用的脚本语言，以及网页传输时使用的方式等。

2、header标签：header标签是HTML5新增标签元素。

二、浏览器支持不同

1、head标签：浏览器都支持。

2、header标签：旧版本浏览器均不支持，需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。

三、支持属性不同

1、head标签：head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

2、header标签：header 标签支持 HTML 中的全局属性。

参考资料来源：百度百科-head标签

参考资料来源：百度百科-Header

html5 如何固定 header？

代码如下

/*css中的.header*/

position:fixed;

left:0px;

top:0px;

width:100%;

html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改（这是一项推荐标准、外语原文： W3C Recommendation、见本处 参考资料原文内容： ）2014年10月29日， 万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。

分享文章：html5的header,用html5
转载来源：http://kswjz.com/article/dsddgjj.html