Html5页眉元素标签Html5添加了标签元素的header/header，通过html页眉的基础教程学习了作为页眉的CSS布局技巧

一、header标签元素基本介绍 - TOP

在HTML5之前，我们习惯使用div标签来布局网页，并在HTML5中基于DIV标签添加了页眉标签元素。也叫“表头”表头标签。在过去，我们经常在div css布局中将网页分为页眉、内容和底部。对于大型结构，我们经常在div中使用id进行布局。虽然标题通常用div id="header"/div或div class="header"/div来布局，这与传统的DIV布局不同，因为DIV作为标记丢失了，但是添加了元素标记。

需要认识到的是，“header”一般在html布局中命名，所以在HTML5中添加了一个header tag元素。可以理解为什么html5中添加了header作为标记元素。

除了直接使用头标记，您还可以为头设置类或id。

二、语法结构 - TOP

标题标签元素的使用方式与div相同。有开始，就有结束。

语法：

标题内容/标题

1.不要直接给出id或类

标题标题内容区/标题

2.设置id

表头id="divcss5 "表头内容区/表头

3.设置类别

Header class="divcss5 "标题内容区域/标题

4.特点：就像DIV标签元素一样，可以多次使用，不同的地方可以通过id或者类设置不同的样式。

三、兼容性 - TOP

由于页眉标签是HTML5中的新标签元素，旧浏览器不支持，只支持IE9以上的浏览器和最新的Google Chrome。当然，360浏览器、百度浏览器、漫游浏览器等国产浏览器都是借用系统的IE内核，所以国产浏览器其实和你自己的浏览器IE版本是一样的，所以你的IE浏览器自然兼容IE9或更高版本的HTML5新标签元素。

四、新旧DIV布局对比案例 - TOP

对比DIV CSS布局和HTML5 CSS布局，观察掌握表头的应用。

1.DIVCSS5实例HTML5 CSS完整代码

！doctypehtmltownetacharset=' utf-8 '/title html 5 header标记实例DIVICSS 5/title style/*传统布局CSS */# header { width :300 px；height:40pxBackground:#CCC}/*HTML5布局样式*/header { width :400 px；height:70pxcolor: # F00background:#F5F5F5}。color-000 { color : # 000；background : # 666 }/style/header dylive=' header '我在传统div布局/divheader，我得支持HTML5浏览器才能看到效果。建议用Google浏览器测试观察效果/headerheaderclass='color-000 '我的颜色是黑色，背景是#666/header/body/html

2.效果截图

div和表头布局效果截图

DIVCSS5特别提示：DW软件中的代码截图，Google Chrome(支持HTML5)浏览器中的效果，ps渲染。普通IE6-IE8不支持HTML5，看不到HTML5的布局效果。需要IE9及以上的浏览器才能看到布局效果。

3.在线演示：查看案例(提示：需要支持HTML5浏览器才能看到HTML5布局效果)

4.打包并下载完整的HTML源代码：

立即下载(1.072KB)

五、总结 - TOP

DIVCSS5建议，为了兼容从IE6到IE最新版本的IE，现在还不是用html5添加标签元素进行一般网页布局的时候。建议使用常规DIV CSS布局html页面。我通常知道HTML5中加入了这些标签元素，我知道使用方法和DIV本质没有区别。当然可以DIV CSS布局，自然在HTML5中添加元素标签。