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

亦凉 2021-12-24 07:43 232阅读 0赞

在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标签就是它用来包含你所以为作为页眉或者标头的内容。**

参考网站：[http://www.w3school.com.cn/html5/tag\_header.asp][http_www.w3school.com.cn_html5_tag_header.asp]

[http://www.w3.org/TR/html5/sections.html\#the-header-element][http_www.w3.org_TR_html5_sections.html_the-header-element]

转载于:https://www.cnblogs.com/hongcaomao/archive/2012/03/04/2379771.html

[http_www.w3school.com.cn_html5_tag_header.asp]: http://www.w3school.com.cn/html5/tag_header.asp
[http_www.w3.org_TR_html5_sections.html_the-header-element]: http://www.w3.org/TR/html5/sections.html#the-header-element