html5置顶标签css样式,html5 header标签 html header css布局教程 /header

在HTML5版本之前习惯使用div标签布局网页,在HTML5在DIV标签基础上新增header标签元素。也叫“”头部标签。以前我们在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加id进行布局。而头部常常使用

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

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

二、语法结构   -   TOP

header标签元素和div用法相同。有开始有闭合。

语法:

内容

1、直接不给id或class

头部内容区

2、设置id

头部内容区

3、设置class

头部内容区

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完整代码

html>

html5 Header标签实例 DIVCSS5

/* 传统布局CSS */

#header{ width:300px; height:40px; background:#CCC}

/* HTML5布局样式 */

header{ width:400px; height:70px; color:#F00; background:#F5F5F5}

.color-000{ color:#000; background:#666}

我在传统div布局中

我在传统div布局中,必须在支持HTML5浏览器才能看到效果,

建议谷歌浏览器测试观察效果

我颜色为黑色,背景为#666

2、效果截图

87979197_1.png

div与header布局效果截图

DIVCSS5特别提示:代码在DW软件截图、效果在谷歌Chrome(支持HTML5)浏览器效果进行PS的效果图。普通IE6-IE8不支持HTML5看不到HTML5布局效果,需要IE9及以上版本浏览器看到布局效果。

3、在线演示:查看案例(提示:需要在支持HTML5浏览器才能看到HTML5布局效果)

4、打包下载完整HTML源代码:

五、总结   -   TOP

DIVCSS5建议,为了兼容从IE6到最新版本IE,普通WEB网页布局还不是时候使用html5新增标签元素。建议还是使用常规DIV+CSS布局html网页。平时知道HTML5新增有这些标签元素,知道使用方法与DIV本质没有什么区别。当然你会DIV+CSS布局自然会HTML5中新增元素标签。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第八届育才杯机器人比赛_赛场、名单公布!南海区第八届“献血者杯”羽毛球公开赛“羽”你相约本周六...

主办单位:南海区献血办、南海血站协办单位:南海区羽毛球协会为进一步扩大无偿献血宣传,感恩南海区献血者,活跃无偿献血者的文体生活,打造一个南海区无偿献血者交流的平台,共同营造“运动、健康、献血、快乐…

2021届安徽高考成绩查询,安徽2021年高考成绩什么时候公布

据安徽省教育招生考试院透露,安徽预计将于6月23日公布各批次录取分数线、考生成绩。2021年安徽高考成绩查询入口2021年高考录取方法1、普通高校的招生录取工作在教育部和省高校招生委员会的领导下,由省考试院组织实施。2、省高校招生委员会根据当年高校在…

BroadcastReceiver 广播机制详解

BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的广播。 在Android系统中,广播体现在方方面面,例如当开机完成后系统会产生一条广播,接收到这条广播就能实现开机启动服务的功能…

会话管理 轻量php框架_SpringSecurity+JWT权限管理训练营-1基于RBAC模型的权限管理系统...

1.什么是权限管理系统?权限管理是一个几乎所有后台系统的都会涉及的一个重要组成部分,可以说是后台项目的基本功,主要目的是对整个后台管理系统进行权限的控制,而针对的对象是员工,避免因权限控制缺失或操作不当引发的…

2021宣城职业技术学院对口高考成绩查询,2021年宣城职业技术学院高考录取通知书查询 通知书什么时候可以收到...

高考志愿填报后最重要的一件事情就是高考录取通知书的查收了,因为录取通知书才是证明你被录取的有效方式。那么很多考生及家长最关心怎么查询宣城职业技术学院录取通知书?宣城职业技术学院录取通知书寄到哪里了?本文大风车网小编为你整理了关…

iOS 谓词的使用

OC中的谓词操作是针对于数组类型的,他就好比数据库中的查询操作,数据源就是数组,这样的好处是我们不需要编写很多代码就可以去操作数组,同时也起到过滤的作用,我们可以编写简单的谓词语句,就可以从数组中过…

multisim秒信号发生器_失联50年的卫星突然出现,莫名向地球发送信号,究竟谁在操控?...

大不列颠无线电学会(RSGB)接到英国康沃尔郡的业余无线电天文爱好者菲尔威廉姆斯(无线电呼叫代号:G3YPQ)的报告,他在2012年12月18日的一次惯例搜索轨道卫星信号的任务中突然搜到了一个237MHZ,每隔4秒重复一次的信号,很明显这是一个…

html 百度地图显示轨迹,百度地图,地图轨迹

百度地图,记录行动轨迹:效果图:上代码:body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}单个标注点沿直线的轨迹运动// 百度地图API功能var map new BMap.Map(&quo…

win10微软图标点击无反应_win10开始菜单,不出来,任务栏右击无反应

使用【win】【R】快捷键打开系统的【运行】;输入【powershell】,按下【确定】运行,然后复制一行命令,点击回车键运行等待命令运行完成之后就可以了。以下是详细介绍:1、在键盘上按下【win】【R】键,使用快捷…

计算机仿真在哪学,计算机仿真软件有哪些

虚拟机,如VMWARE,Virtual PC虚拟机软件可以在一台电脑上模拟出来若干台PC,每台PC可以运行单独的操作系统而互不干扰,可以实现一台电脑“同时”运行几个操作系统,还可以将这几个操作系统连成一个网络。使用虚拟机的好处…

WebApp的前端所遇问题

2015年10月1日至10月25日,两个本科生和一位研究生以及一位老师组成四人团队,开发某教育前端项目 所遇问题总结以及分享: 一、主要应用软件:sublime_text HBuilder 初学者可以在JQuery mobile的Demo中寻找代码(可以看图…

框架的特性_Go 语言 Web 框架 Echo 系列:基础篇—通过一个例子串联各特性

通过前面的介绍,相信对 echo 有了一个初步的认识。本文我们通过一个简单的登录页面来串联 echo 的相关特性。因为该文主要关注各个特性,所以在目录结构和代码组织方面很随意。本节最终效果1)登录页面2)登录失败3)登录成功main 函数骨架使用 echo 框架&am…

计算机网络日志查询,系统资源管理_百络网警内网管理软件_电脑配置统计,系统日志,日志查询...

管理作用管理者可以使用百络网警内网gua灵活查询的分类统计网内计算机的硬件和软件信息,为IT资产管理提供方便和决策支持。也可以让IT管理者从多个角度来了解网络内每台计算机的全面的日志信息,为故障排除和网络管理提供有力支持。功能描述1、资产管理选…

南京江南贡院值得去吗_这12个地方是一种瘾,值得一去再去,有你想要去的吗?...

有人说,旅行就是从一个自己呆腻了的地方,到别人呆腻了的地方去。但大家有没有发现,去过许多地方,看过那么多风景,总有一些地方,第一次初识,第二次上瘾,第三第四次还去不腻&#xff1…

ipv6地址为什么显示两个_【聚焦】IPv6进行时,别被这些因素绊住脚

智慧宇易精挑细选2020年5933篇不能仅仅为了支持IPv6而使用IPv6,如何利用IPv6解决现实问题尤其重要。创新网络服务、应用服务、数据服务,可能是发展IPv6最重要的一个策略。11月15日,在第二届中国互联网基础资源大会上,IPv6被多位专…

HttpResponse 类

而封闭HTTP输出信息的类型就是HttpResponse类,使用HttpResponse类可以实现三种类型的输出,即文本,URL,二进制流. 实现这三类的属性和方法分别介绍如下:1.文本的输出,在日常开发中,后台中的文本可能需要输出到浏览器中,让用户浏览,这就需要实现动态HTML的输出,使用HttpResponse…

量子计算机迷宫,一个简单的例子,带你读懂量子计算机

原标题:一个简单的例子,带你读懂量子计算机量子计算机和你的笔记本电脑在本质上是一样的,使用的都是二进制编码。计算机语言只用0和1来表达,这被称为“位”,是计算机信息量最小的单位。计算机的工作,就是把…

各种门锁的内部结构图_便宜超好用:小米智能门锁 E上手体验报告

「真正的科技,是让你感受不到科技的存在」随着科技的日益飞速发展,科技改变着我们生活的方方面面,如今的我们出门必备的是手机,地铁、公交、日常消费、进出小区也逐渐使用手机或手环;2020年的当下钥匙已经变得不那么重要&#xff…

Unity3d通用工具类之定时触发器

时隔多日,好不容易挤出点时间来写写博文。不容易,请送我几朵红花,点个赞也行。 今天呢,我们主要来扩展下通用工具类>定时触发器。 顾名思义,所谓的定时触发器,就是告诉程序在过多长时间后,我…

disp语句怎么格式 matlab_Matlab使用技巧总结-1

抽空看了Matlab官方文档,并配合郭老师的课程,把Matlab语言系统梳理了一遍。先上资源:bilibili良心搬运大法:MATLAB_台大郭彦甫-视频教程知乎盐选推荐基础教程:MATLAB 2016_基础实例教程以下记录了一些matlab的技巧。【…