【面试】HTML5 有哪些新特性？_语义化标签

休息了一下，开始学习语义化标签：header、footer、article、aside、section、details、summary、dialog。之前看视频的时候便有疑问：不清楚它们存在的意义。如例子header标签的效果，毕竟从表面上看，有没有header标签，没什么区别。所以，header的存在价值是什么？Up主在HTML header 标签博客中给出了如下的标签功能定义。但是……没什么收获。

说到能够及时呈现出标签脚本的网页效果的工具，推荐菜鸟教程中的“尝试一下”或者W3school教程中的“亲自试一试”功能（当然，也可以在VSCode软件及其他可用的软件上自己敲一遍，看个人需求了）。但是对于header标签来说，即便是我使用了菜鸟教程中的“尝试一下”功能，依旧看不出来什么效果，无奈了……

所以呢？这能说明什么？？？只能必应一下了……

然而，收获一般……标签header是html5新标签，在没有header标签的时候，主要使用的是div标签，使用方法是

或者

。现在，html5新定义了header标签，可以直接使用方法

标签定义了吗？总之，感觉还是缺点什么……

想起之前看Oeasy官网出的关于html的教学视频中的主讲老师常使用的方法：直接进去已有的知名网站中，按F12键，搜索（ctrl+F）对应标签的关键字，查看对应标签的效果（只看了部分视频，感觉讲的很深，很干货，但不太适合时间紧迫的小白，因为印象中一个段落p标签讲了半个多小时）。所以，我果断打开了B站（B站是我自学前端的主站），哈哈。

由于一共搜索出52个结果，依次定位每个header标签的位置，慢慢的发现，原来B站的首页被划分了许多块，每个块都拥有一个大的标题栏，而这个标题栏便是用header标签定义的，如下图所示。（原来是这样哈，现在总算可以直观感受一下header的作用了。）

同样的方法，尝试搜索其它语义化标签：footer、article、aside、section、details、summary、dialog。但尴尬的是footer与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标签一般位于网页的最下方位置处，包含的内容：“关于我们”、“加入我们”、“友情链接”、“隐私政策”、“用户反馈”、“活动中心”、“合作机构”、“公司地址”等。

5. details和summary标签一起使用的时候，且

元素应该是

元素的第一个子元素，则会呈现标题细节内容的折叠打开效果。

6.记忆核心内容。

未解决问题：

details标签、summary标签、aside标签、dialog标签单独使用的效果目前还不明白。