阿西河前端教程博客学习心得随记——HTML5 有哪些新特性？_语义化标签

休息了一下，开始学习语义化标签：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（未看）