成都网站建设设计

将想法与焦点和您一起共享

html5中header标签怎么用

小编给大家分享一下html5中header标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

我们提供的服务有:网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、栾城ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的栾城网站制作公司

一、首先我们来说说html5 header标签元素基本介绍

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他的内容,比如在header里面放置logo图片、搜索表单等等。

注意:一个页面内并没有限制header的出现次数,也就是说我们可以在同一页面内,不同的内容区块上分别加上一个header元素。

在HTML5版本之前习惯使用div标签布局网页,在HTML5在DIV标签基础上新增header标签元素。也叫“

”头部标签。以前我们在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加id进行布局。而头部常常使用
进行布局,特点与传统DIV布局不同,少了div做标签,而是新增元素标签。

正应为大家公认html布局中对“header”为常用命名,所以在HTML5新增了个header标签元素。可以这样理解为什么在html5中新增header为标签元素。

除了直接使用header标签外,也可以对header设置class或id。

html5 header标签的用法实例:

对主页的介绍:

创新互联

专注于编程(创新互联)

创新互联的html5语义化标签之结构标签

article、section、hgroup、aside、nav...

...这里面包含了很多东西...

这就是最基本的用法了。在上面的结构中,我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头,而是文章的页头。

所以在HTML5中,header的使用更加灵活,你可以根据你的需要来定义和组织document结构。

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

二、现在再来说说兼容性的问题了:

因为header标签是HTML5新增标签元素,所以旧版本浏览器均不支持,需要IE9+以上浏览器、最新谷歌Chrome等浏览器才支持。当然国内360浏览器、百度浏览器、遨游浏览器等浏览器均借用系统自带IE内核,所以国内浏览器实际上与你系统自带浏览器IE版本相同,所以你IE浏览器在IE9或以上版本自然就兼容HTML5新增标签元素。

现在我们升级一下上文的代码:


HTML5教程创新互联

[手机版] [创新互联]

以上是html5中header标签怎么用的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前名称:html5中header标签怎么用
网页路径:http://chengdu.cdxwcx.cn/article/gcdpoo.html