关于不同结构标签下的h标签显示问题

今日份疑惑再做网页优化，发现了一个之前忽略的问题，那就是同样是h1标签却存在大小的差异，如图我在正文中定义了一个h1大小的标签

就是“文章精选”所存在的区域，同时又网页的页脚部分定义了h1大小的标签如图

按道理来说两个标签同样为h1显示的大小应该为相同，但是结果并不是这样，为了有明显的效果我在“文章精选”那里也加了个心灵成长值标签以求对比明显，结果同样是h1标签却出了差异，如图

肉眼可见字体大小明显出现了不一样。
下面开始解决：
1.对此我首先想到的是之前老师提到的web运行浏览器有没有问题，结果换多个浏览器结果还是一样，那么排除浏览器的原因。
2.既然浏览器不存在问题，那么我把问题的关键放在了结构中，会不会是结构标签限制了字体的大小，因为我发现

我设置了h1的标签“文章精选”和h3的标签“《致橡树》”在网站中显示的是同样的效果，那么我决定将article标签去掉，结果如图

去掉article标签后h1的标签“文章精选”和h3的标签“《致橡树》”明显是出现了区别但是，前后两个h1标签还是存在区别，那么类推会不会是section标签和footer标签影响了h系列标签的大小，我将section标签的范围变大，包括了footer标签，果不其然解决了h1标签显示大小不一样的问题，如图

代码如下：

将footer标签包含进了同一个section标签下解决了，但是这样作为强迫症的我并不满足，因为如果是做一个好的网页设计，就应该把总页脚和总页眉区分出来，到底是为什么会这样呢，又怎样能避免，我搜了好久，发现了解释：

注意本文的嵌套关系，可见新增加的文档结构标签要特别注意，article能包含所有p标签，但是section只能包含到h2标签，header只能包含h3标签，所以自己也是好巧不巧以身试法。
当然解决方案并不是唯一的，还有一种方法就是在css样式中进行定义，如图：

通过在css文件中进行改动，能更好地解决不同结构体重标签不同的问题，（图中我为了明显确认两个字体一样采用了这个方法，现实根据自己想要获得的显示效果来定）当然方法肯定不止这么点，希望有大佬能提出更高效更简单的方法吧，我也只是爬出坑，树立个警告牌。(以前做的发到班群的现在拿出来水一下博客哈哈哈哈仅供参考)