电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

html5 <header>标签布局教程

2020-10-29 19:53:15 出处:[ 菜菜电脑网 ] 人气:次阅读
html5 header元素标签 html5另加标签元素之<header></header>,通过html header基础教程求学同时作为header css布局技巧

一、header标签元素基本解说 - TOP

在HTML5版本之前习惯可用div标签布局网页,在HTML5在DIV标签基础上增添header标签元素。也叫“<header>”头部标签。以前我们在div css布局中常常把网页大致细分头部、内容、底部。对于大结构我们常常适用div里加id顺利进行布局。而头部常常用到<div id=”header”></div>或<div class=”header”></div>顺利完成布局,特点与传统DIV布局完全相同,不算了div要用标签,而是升级元素标签。

正说是大家相提并论html布局中对“header”为常用命名,所以在HTML5增添了个header标签元素。可以这样忽略为什么在html5中导入header为标签元素。

除了这样一来应用于header标签外,也可以对header设置class或id。

二、语法结构 - TOP

header标签元素和div用法相同。有开始有也就是说。

语法:

<header>内容</header>

1、同样不给id或class

<header>头部内容区</header>

2、设置id

<header id=”divcss5”>头部内容区</header>

3、设置class

<header class=”divcss5”>头部内容区</header>

4、特点:就像DIV标签元素一样可以多次用到,相同地方可以采用id或class设置相同样式。

三、兼容性 - TOP

因为header标签是HTML5增设标签元素,所以旧版本浏览器均不全力支持,能够IE9+以上浏览器、最新谷歌Chrome等浏览器才背书。当然国内360浏览器、百度浏览器、驰骋浏览器等浏览器均借到系统自带IE内核,所以国内浏览器实际上与你系统自带浏览器IE版本相同,所以你IE浏览器在IE9或以上版本自然就向下兼容HTML5附加标签元素。

四、新旧DIV布局对比案例 - TOP

通过DIV+CSS布局与HTML5+CSS布局对比掩蔽并握有对header广泛应用。

1、DIVCSS5实例HTML5+CSS明晰代码

<!DOCTYPE html><html> <head>   <meta charset="utf-8" />   <title>html5 Header标签实例 DIVCSS5</title>   <style> /* 传统布局CSS */ #header{ width:300px; height:40px; background:#CCC}  /* HTML5布局样式 */ header{ width:400px; height:70px; color:#F00; background:#F5F5F5} .color-000{ color:#000; background:#666} </style>  </head>  <body>   <div id="header">   我在传统div布局中  </div>   <header>   我在传统div布局中,必须在反对HTML5浏览器才能看得见效果, 建议谷歌浏览器测试捕捉到效果  </header>   <header class="color-000">   我颜色为黑色,背景为#666  </header>    </body></html>

2、效果图片

div与header布局效果存档

1_140618114849_1.png

DIVCSS5特别提醒:代码在DW软件预览、效果在谷歌Chrome(背书HTML5)浏览器效果顺利完成PS的效果图。普通IE6-IE8不背书HTML5好像HTML5布局效果,必须IE9及以上版本浏览器见到布局效果。

以上就是html5 <header>标签布局教程的参考内容,更多商量关切php中文网其它具体文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152