搜索
首页web前端H5教程H5中header标签应该如何使用

这次给大家带来H5中header标签应该如何使用,怎么使用H5中header标签?H5中header标签使用的注意事项有哪些,下面就是实战案例,一起来看一下。

1aa9e5d373740b65a0cc8f0a02150c53标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。
在新的标准中header标签定义如下:

"A group of introductory or navigational aids.”
基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容,也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。
通常1aa9e5d373740b65a0cc8f0a02150c53标签至少包含(但不局限于)一个标题标记(4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc),还可以包括d8eccd9ed644b68a6460a2bb84548c82标签,还可以包括表格内容、标识、搜索表单、c787b9a589a3ece771e842a6176cf8e9导航等。

<header>  
 <h1>1</h1>  
 <p>专注于web前端开发</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

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

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

同样,在架构页面时,header标签一般都放在页面的顶部,但是如果你想把他放在左侧,右侧甚至底部都没有关系,标签只定义了本身在页面的角色,而不是位置。当然更具搜索引擎优化原则,重要内容最后在架构页面的时候提前。
最后由于在HTML5中header属于块元素,如果我们要在大多数主流浏览器使用的话最好定义CSS,如下。

header { display:block;}

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎样利用正则表达式抓取博客园的列表数据

什么样的正则表达式可以显示highlight高亮

怎样用jquery的ajax异步提交表单数据

以上是H5中header标签应该如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
SpringBoot怎么通过Feign调用传递Header中参数SpringBoot怎么通过Feign调用传递Header中参数May 16, 2023 pm 08:38 PM

【SpringBoot】通过Feign调用传递Header中参数如何通过Feign传递Header参数问题描述我们在SpringCloud中使用Feign请求另一个服务的Api接口时,有将Header中参数传递下去的需求,如果不做特殊处理,就会将Header中的参数丢失。解决方案方案一:通过@RequestHeader(name="headerName")来传递例如:Feign定义如下@FeignClient(name="service-name")pub

linux的header是什么意思linux的header是什么意思Jul 18, 2023 pm 03:34 PM

linux的header是指在文件或数据流中的开头部分,用于包含关于内容的元数据,通过正确地编写和使用Header文件,开发者能够更好地利用系统资源,提高代码的可读性和可维护性。

html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

如何使用PHP header()方法来调整网页如何使用PHP header()方法来调整网页Mar 28, 2023 pm 01:54 PM

PHP是一种功能强大的编程语言,可以用来创建动态网站和Web应用程序。其中一个最强大的功能之一是PHP的header()方法。在本文中,我们将探讨如何使用PHP的header()方法来调整网页。

html5标签head和header有什么区别html5标签head和header有什么区别Jan 17, 2022 am 11:10 AM

区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均不支持header标签,需要IE9+以上浏览器才支持header标签。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

php header头怎么实现跳转php header头怎么实现跳转Dec 02, 2022 am 09:14 AM

php header实现跳转的方法:1、使用“Header("Location:$url");”语法实现跳转;2、使用if判断式实现跳转,其跳转语句如“if($_COOKIE["u_type"]){ header('location:register.php'); } else{ setcookie('u_type','1','86400*360');”。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境