文章中 h1 和 h2 的字体大小相同

Question

问题：

为什么 <h1> 和 <h2> 标签放在 <article> 中时具有相同的 font-size？

输出：

然后我想也许只是我的眼睛欺骗了我所以我测量了一下。

我原来是一样大

我看了下面的 link (http://w3c.github.io/html/rendering.html#sections-and-headings) 我了解到它是基于层次结构的，但是 <h1> 和 <h2> 处于同一层次结构。

因此，<h1>应该是2em，<h2>应该是1.5em。

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Headings</title>
        <meta charset="utf-8">
    </head>
    <body>
        <article>
            <h1>This is h1.</h1>
            <h2>This is h2.</h2>
            <h3>This is h3.</h3>
            <h4>This is h4.</h4>
            <h5>This is h5.</h5>
            <h6>This is h6.</h6>
        </article>
    </body>
</html>

Answer 1

只是关于DOM结构，因为不同的元素有不同的默认样式可以继承。

查看此 link 表单 MDN。

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

JSFiddle

编辑

这是因为文档样式要求。您可以在 HTML 5.1 documentation @ 10.3.7 Sections and headings

找到详细信息

Answer 2

h1{ 
font-size:2em; 
} 
h2{ 
font-size:1.5em;
    }

<article> 
   <h1>This is heading 1.</h1>
   <h2>This is heading 2.</h2>
   <h3>This is heading 3.</h3>
   <h4>This is heading 4.</h4>
   <h5>This is heading 5.</h5>
   <h6>This is heading 6.</h6>
</article>

https://jsfiddle.net/razia/9wsc4vus/

Answer 3

headers 的大小由浏览器样式表决定（如果用户样式表未指定）。我在 chrome 试过了。在开发人员控制台中，我发现 chrome 将 h1 的样式覆盖为 article、aside、nav 和 section

的 1.5em

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

Answer 4

这是设计使然 <h1> 标签的行为是这样的，即专门针对 <article>、<aside>、<nav>, <section> 并且随着结构变得更深，它会继续减少，即 <article> 在 <article> 里面 <article> 然后每个级别的大小都会减少。

下面是演示：

<!DOCTYPE html>
<html>

<head>
  <title>Headings</title>
  <meta charset="utf-8">
</head>

<body>
  <span>Default</span>
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <h3>This is h3.</h3>
  <h4>This is h4.</h4>
  <h5>This is h5.</h5>
  <h6>This is h6.</h6>
  <hr>
  <article>
    <span>One level inside article tag</span>

    <h1>This is h1.</h1>
    <h2>This is h2.</h2>
    <h3>This is h3.</h3>
    <h4>This is h4.</h4>
    <h5>This is h5.</h5>
    <h6>This is h6.</h6>
    <hr>
    <article>
      <span>Two level inside article tag</span>

      <h1>This is h1.</h1>
      <h2>This is h2.</h2>
      <h3>This is h3.</h3>
      <h4>This is h4.</h4>
      <h5>This is h5.</h5>
      <h6>This is h6.</h6>
      <hr>
      <article>
        <span>Three level inside article tag</span>

        <h1>This is h1.</h1>
        <h2>This is h2.</h2>
        <h3>This is h3.</h3>
        <h4>This is h4.</h4>
        <h5>This is h5.</h5>
        <h6>This is h6.</h6>
        <hr>
      </article>
    </article>

  </article>
</body>

</html>

来源：

参考this官方资料.

这个官方信息说：

In the following CSS block, x is shorthand for the following selector: :matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

为什么h1和h2一样？

这是设计使然，因为浏览器制造商 think/agreed，在网络编辑、制作人和开发人员之下，<h2> 通常被视为视觉上更重要的标题，然后内容文档中的标题应该理想情况下从 .这就是为什么 <h1> font-size 不是默认更大 inside <article>, <aside>, <nav>, <section> 标签。

您的案例是第一级，即 x h1 其中 h1 的大小是 1.50em 但此规则仅适用于 h1，即 h2 将具有其 default/original 大小 1.50em。这里 x 是 <article> 标签。

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

:-webkit-any() 选择器匹配括号内列出的任何标签，即 article、aside、nav、section。并且在 <article>、<aside>、<nav> 或 <section> 标签内缩小到正常标题的大小 1.50em 等等，如上面的演示所示。

Answer 5

这是一个错误吗？

不，这是大多数浏览器遵循的预期行为，包括 Edge、Internet Explorer、Opera、Chrome 和 Firefox。

为了在某种程度上证实这一点，已经提出了关于 Firefox 行为的错误报告，该错误报告已关闭，状态为 Wontfix，可能是由于以下原因：

Long story short: I suggest to change the status of this issue to wontfix as it complies with one of the more convoluted standards of html5 as it is.

https://bugzilla.mozilla.org/show_bug.cgi?id=1424001

为什么会这样？

最初浏览器可能会遵守以下 W3C 指南：

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html

本指南提供了以下示例，所有这些在（当时）都是有效的：

示例 1

<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

这是最不理想的版本，因为标记使得很难确定哪个标题应该最突出，而且它没有遵循上述指南。

示例 2

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
</section>

此版本使查看标题层次结构变得更加容易，并遵循了这两个指导要点。

示例 3

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
    <h1>Sweet</h1>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>
<section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
</section>

此版本还可以更轻松地查看标题层次结构并遵循这两个指导要点。

您应该注意到 example 2 和 example 3 尽管使用了不同的标题元素，但看起来一样，这是因为两个示例都遵循指导，同样有效并传达相同的标题层次结构。

然而

在最近的草稿中，关于如何对标题进行分段内容的指导发生了变化：

Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.

https://www.w3.org/TR/html53/sections.html#headings-and-sections

本指南表明，在上面提供的示例中，示例 2 是标记数据的正确方法。

鉴于此似乎合乎逻辑：

此功能是根据原始指南实现的
新指南建议 h1 元素不适合作为分节内容中的标题，因为它们将设置在分节根中，但是，在使用它的情况下，它将被设置样式适合匹配嵌套级别的标题

Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content

https://www.w3.org/TR/html53/sections.html#headings-and-sections

总结

这是预期的行为，因为当标题嵌套在 article 和 section 等分段内容中时，最初有多种传达标题层次结构的方法。现在使用相同的规则来确保标题反映嵌套部分的适当排名。