标题标签与部分的不同行为

Posted 2023-04-14

【中文标题】标题标签与部分的不同行为

【英文标题】：Different behavior of heading tag with section

【发布时间】：2016-03-19 19:13:47

【问题描述】：

标题标签行为（h1和h2）如果我在section或aside中写h1和h2，它显示相同的字体大小和如果我把它放在section 或aside 标签之外，它可以正常工作。

我已经搜索了很多，但没有得到答案。

任何人都有答案。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>


<section>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</section>

<aside>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</aside>

【参考方案1】：

可以在here找到符合 W3C 规范的 html5 的默认样式

现在，根据上述规范，default styling for the h1 and h2 tag 如下：

h1  margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; 
h2  margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; 

所以默认情况下h1 标签有font-size: 2.00em; 和h2 标签有font-size:1.5em

到目前为止一切顺利。

但是，如果 h1 标记嵌套在 article、aside、nav 或 section 元素中 - 那么 h1 的呈现方式会有所不同：

以下是规范中的relevant section：（粗体是我的）

article、aside、nav 和 section 元素预计会影响 h1 元素以及 h2–h5 元素的边距和字体大小 跟随在 hgroup 元素中的 h1 元素，基于嵌套 深度。

如果x 是一个匹配元素的选择器 article、aside、nav 或 section 元素，然后是以下规则 捕捉预期：

@namespace url(http://www.w3.org/1999/xhtml);

x h1  margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; 
x x h1  margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; 
x x x h1  margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; 
x x x x h1  margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; 
x x x x x h1  margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; 

请注意，当 h1 标记在 section 或 aside 等中嵌套 1 级时，默认情况下会得到 font-size:1.5em。

这解释了为什么 section 或 aside 元素中的 h1 元素具有与问题中所述的 h2 元素 (1.5em) 相同的 font-size。

现在，如果h1 元素在section、aside（或nav 或article）元素中具有更高级别的嵌套，则 h1 元素的字体会越来越小。

为了说明这一点，看一下this fiddle，这里，因为h1 嵌套在article 和section 中——它被呈现为比h2 更小的HTML5 默认样式.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

<hr />
<section>
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <h3>heading 3</h3>
</section>
<hr />
<article>
  <section>
    <h1>heading 1 - Nested by 2 levels - *smaller* than h2 !!</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
  </section>
</article>

【参考方案2】：

这是浏览器自定义样式） 例如。 h1 在部分或旁边有font-size: 2em，但在部分、文章、旁边、导航中有font-size: 1.5em 在 devtools 中查看。

:-webkit-any(article,aside,nav,section) h1 
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;

article, section, nav, asideh1 之外有这个样式

h1 
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;

如果你不想要这样的惊喜 - 使用 normalize.css 重置浏览器样式）