HTML5页面架构元素 - <header>标签

在HTML4流行的时候大家的页面架构元素使用最多的还是table，方便快捷，用起来很爽（虽然他不是一个真正的页面架构元素）。 XHTML1.0后大家都开始认识到table使用的错误，于是DIV重新走上了架构的舞台。搜索引擎的流行，更是让DIV的架构页面位置进一步稳固，于 是有了前些年疯狂的网页重构，DIV+CSS疯狂如长江源头解冻的流水一发不可收拾。

随着大家对网页架构的深入研究，HTML的标准制定机构也没有闲着，总计了设计者们的常用架构于是有了HTML5现在的这些新的页面元素，他们就是<header>，<section>，<article>，<nav>，<aside>，<footer>。今天我们就深入理解一下header元素

<header>标签

先看W3SCHOOL的定义：<header> 标签定义文档的页眉（介绍信息）。

<header>
 <p>Welcome to...</p>
 <h1>红草帽!</h1>
</header>

熟悉DIV架构页面的朋友，也可以这样理解，这也就是我们之前喜欢用的<div id="header">中的这部分内容了。但这里不同的是，之前我们的<div id="header">为定义的是页面的头部分，而这里的header可以定义为页面级别的，还是可以定义为页面其他独立部分级别的头部分。例 如：

<article>
  <header>
    <h1>hongcaomao</h1>
    <p>application: <time pubdate="pubdate">2012-01-01</time></p>
  </header>
  <p>hello, header element...</p>
</article>

同样,在架构页面时，header标签一般都放在页面的顶部，但是如果你想把他放在左侧，右侧甚至底部都没有关系，标签只定义了本身在页面的角色，而不是位置。当然更具搜索引擎优化原则，重要内容最后在架构页面的时候提前。

最后由于在HTML5中header属于块元素，如果我们要在大多数主流浏览器使用的话最好定义CSS，如下。

header { display:block;}

看了W3SCHOOL和自己的一定理解之后再看看W3C中对header标签的定义解释吧

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

简洁的讲，header标签就是它用来包含你所以为作为页眉或者标头的内容。

display:block的作用与用法

display:block可以理解为块。用个简单的例子给你！比如你做一个超链接，
<li><a href="#">超链接</a></li>
当你鼠标移过去文字的时候，超链接有效果！
而当我把样式这样设置：
li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}
鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*100做为一块来的超链接！

 

display    的参数列表   
   display版本：CSS1/CSS2　    兼容性：IE4+    NS4+　继承性：无   
    
      
   语法：     
      
   display    :    block    |    none    |    inline    |    compact    |    marker    |     
   inline-table    |    list-item    |    run-in    |    table    |table-caption    |     
   table-cell    |    table-column    |    table-column-group    |     
   table-footer-group    |    table-header-group    |    table-row    |    table-row-group     
      
   参数：     
      
   block    :    　CSS1　块对象的默认值。用该值为对象之后添加新行     
   none    :    　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间     
   inline    :    　CSS1　内联对象的默认值。用该值将从对象中删除行     
   compact    :    　CSS2　分配对象为块对象或基于内容之上的内联对象     
   marker    :    　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before    伪元素一起使用     
   inline-table    :    　CSS2　将表格显示为无前后换行的内联对象或内联容器     
   list-item    :    　CSS1　将块对象指定为列表项目。并可以添加可选项目标志     
   run-in    :    　CSS2　分配对象为块对象或基于内容之上的内联对象     
   table    :    　CSS2　将对象作为块元素级的表格显示     
   table-caption    :    　CSS2　将对象作为表格标题显示     
   table-cell    :    　CSS2　将对象作为表格单元格显示     
   table-column    :    　CSS2　将对象作为表格列显示     
   table-column-group    :    　CSS2　将对象作为表格列组显示     
   table-header-group    :    　CSS2　将对象作为表格标题组显示     
   table-footer-group    :    　CSS2　将对象作为表格脚注组显示     
   table-row    :    　CSS2　将对象作为表格行显示     
   table-row-group    :    　CSS2　将对象作为表格行组显示     
      
   说明：     
      
   设置或检索对象是否及如何显示。   
   目前    IE5.5仅支持以上CSS1的参数。