休息了一下,开始学习语义化标签:header、footer、article、aside、section、details、summary、dialog。之前看视频的时候,心里就有疑问,不知道他们存在的意义是什么。例子header的使用效果如下所示,毕竟从表面上看,有没有header标签,从网页中文章的整体架构方面看,没什么区别呢。
所以,header的存在价值是什么?Up主在HTML header 标签博客中给出了如下的标签功能定义。但是……看得不大懂。
其实,说到可以及时呈现出标签脚本的网页效果,推荐菜鸟教程中的“尝试一下”或者W3school教程中的“亲自试一试”功能(当然,也可以在VSCode软件及其他可用的软件上自己敲一遍,看个人需求了)。但是对于header标签来说,即便是我使用了菜鸟教程中的“尝试一下”功能,依旧看不出来什么效果,无奈了……
所以呢?这能说明什么???只能必应一下了……
然而,还是不太明白这是什么意思……难道可以理解为:标签header是html5新标签,在没有header标签的时候,主要使用的是div标签,使用方法是<div id=”header”></div>或者<div class=”header”></div>。现在html5重新定义了header标签,那么现在便可以直接使用方法<header></header>标签定义了吗?总之,感觉还是缺点什么……这是时候,想起之前看Oeasy官网出的关于html的教学视频中的主讲老师常使用的方法:直接进去已有的知名网站中,按F12键,搜索对应标签的关键字,查看对应标签的效果(只看了部分视频,感觉讲的很深,很干货,但不太适合时间紧迫的小白,因为印象中一个段落p标签讲了半个多小时)。所以,我果断打开了B站(B站是我自学前端的主站),哈哈。
由于一共搜索出52个结果,依次定位每个header标签的位置,慢慢的发现,原来B站被划分了许多块,每个块都拥有一个大的标题栏,而这个标题栏便是用header标签定义的,如下图所示。原来是这样哈,现在总算可以直观感受一下header的作用了。
同样的方法,尝试搜索其它语义化标签:footer、article、aside、section、details、summary、dialog。但尴尬的是footer与article存在类似<div id=”header”></div>或者<div class=”header”></div>形式的标签定义外,并没有直接存在<footer></footer>和<article></article>形式的标签写法。
看到这里,我貌似能明白必应搜索的那段解释了……
由于B站首页中,其它语义化标签(article、aside、section、details、summary、dialog)均不存在。所以为了更好的看到其它语义化标签的效果,我可以直接打开菜鸟教程的对应标签观察网页就好了呀。好滴,说干就干。
总结一下:
1. html5新增的语义化标签包括header、footer、article、aside、section、details、summary、dialog;
2. 一个网页可以有多个部分,而每个部分可以拥有一个标题,每个标题使用header标签呈现。即,一个网页可以拥有多个header标签;
3. article标签可以包含header标签;
4. footer标签一般包括的内容可以是:
注意:article、aside、section、details、summary、dialog(未看)