HTML5页面架构元素 - 标签
在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架构页面的朋友,也可以这样理解,这也就是我们之前喜欢用的<p id="header">中的这部分内容了。但这里不同的是,之前我们的<p 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标签就是它用来包含你所以为作为页眉或者标头的内容。
摘自 红草帽 * Arain
上一篇: 这蚊子怎么喜欢盯在我身上一动不动
下一篇: Jquery读取URL参数小例子
推荐阅读
-
HTML5在a标签内放置块级元素示例代码
-
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
-
html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
-
HTML5页面架构元素 - 标签
-
AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
-
使用HTML5的JS选择器操作页面中的元素
-
浅谈html5增强的页面元素
-
HTML5页面架构元素 - 标签
-
HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
-
关于HTML5语义标签的实践(blog页面)