HTML5 Note #2 : The header eleme

2014-03-30 本文已影响0人一欢

Article #2: The header element

*Reason: *自己的第一个 case 直接 import 了 skeleton-nt.jedi，并将一个图像放入 header 便签中，也不清楚自己这么做是否合适。且既然是 header，就早点儿学习它吧~

HTML5 之前

在 HTML5 之前，常用

<div id="header">

但是在第一篇 Note 中了解了语义化之后，已经能够理解使用 <header> 可以传达更多的语义。

<header> 代表着什么？

header 标签一般用于显示介绍性的内容，典型的用法是包含一个 h1-h6 元素，或者一个 hgroup 元素。但是也可以包含其他的内容，比如搜索栏、导航 nav 或者任何需要的 logo。

为了有直观的理解和感受，我找了几个网站的 header 。

Mobile Twitter

 <header class="">
     <brandbar class="brandbar ">
         ……
     </brandbar>
     <navbar class="navbar ">
         ……
     </navbar>
 </header>

Mobile Github

<header class="nav-bar clearfix">
    <div class="nav-bar-inner">
        ……
    </div>

    <nav class="nav-bar-tabs ">
        ……
    </nav>
</header>

之所以选用的都是手机版网页，是因为 header 的浏览器兼容问题。事实上，这两个及绝大部分网站的网页版都是用 div 实现的。关于兼容性的问题待会儿在拓展中细谈。

何时需要用到 <header>?

根据上面的栗子们，很容易看出 header 可用在页面的顶部。而且在一个页面中可以多次使用 header，但是需要注意 <header> 元素不能作为 <address>, <footer> 或其他 <header> 元素的子元素（参见 https://developer.mozilla.org/zh-CN/docs/HTML/Element/header ）。比如，可以像下面这么用：

<header>
    <h1>The most important heading on this page</h1>
    <p>With some supplementary information</p>
</header>

<article>
    <header>
        <h1>Title of this article</h1>
        <p>By Richard Clark</p>
    </header>
        <p>...Lorem Ipsum dolor set amet...</p>
</article>

！注意： 在一个页面中使用多个 h1 标签在 HTML5 和 HTML4 中是完全合法的。但是不建议这么用，因为会产生歧义。

header 样式

作者认为为了让主流浏览器将 header 作为块级元素进行渲染，必须明确写上

header { display: block; }

拓展

浏览器兼容性

Desktop:
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 4.0 (2.0) 9.0 11.10 4.1
Mobile:
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 4.0 (2.0) 9.0 11.0 5.0 (iOS 4.2)

（参见 https://developer.mozilla.org/zh-CN/docs/HTML/Element/header ）

由上面的信息可以看出，由于移动设备更新很快，所以老旧的浏览器很容易被淘汰，在移动端网页中使用 HTML5 标签远远比桌面端网页更为适合。

感想

在搜索关于 header 的详细信息时，发现 Mozilla Developer Network - HTML - 元素十分好用~
回到看这篇文章的 reason，还是认为自己的第一个 case 中，在 header 标签中直接插入类似 banner 的图片不太合适。

问题

对于 header 样式的问题：这篇文章写作时间是09年6月份，现在的浏览器难道不是默认渲染为块级元素么？

自问自答一个:
因为较老的浏览器（比如 IE6 - 8）不能够识别新的 HTML5 标签，默认情况下，所有的浏览器都会将未知元素的 display 值计算为 inline。
（参见 http://www.impressivewebs.com/default-css-display-values-html-elements/ ）