这是一个错误吗？

Question

问题：

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

输出：

然后我想也许只是我的眼睛愚弄我所以我测量了它。

我的结果大小相同。

我查看了以下链接（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

标题的大小由浏览器样式表决定（如果用户样式表未指定）。我试过镀铬。在开发者控制台中，我发现chrome正在覆盖h1到1.5em的样式，用于文章，旁边，导航和部分

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

Answer 2

这是设计使的行为，例如，<h1>标签的行为如下，即专门针对<article>，<aside>，<nav>，{ {1}}，并且随着结构的不断深入，即<section>内<article>内的<article>会不断减小，然后每个级别的大小都会减小。

下面是演示：

<article>

来源：

作为参考，您可以查看this 官方信息。

此官方信息说：

在以下CSS块中，x是以下选择器的简写：：matches（文章，放在一边，导航，部分）

<!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>

为什么h1和h2相同？

这是设计使然，因为浏览器制造商认为/同意，在Web编辑器，生产者和开发者下，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; }通常被视为视觉上更重要的标题，因此理想情况下应从内容文档开始。这就是为什么<h2> <h1>没有默认更大的内部 font-size，<article>，<aside>，<nav>标签的原因。

您的案例是第一个级别，即<section>，其中x h1的大小为h1 但此规则仅适用于1.50em，即h1的默认/原始大小为h2。这里的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; }选择器匹配括号内列出的任何标签，即article，aside，nav，section。并且在:-webkit-any()，<article>，<aside>或<nav>标签内将其缩小为正常标题的大小<section>，以此类推，如上面的演示所示。

Answer 3

这是一个错误吗？

否，这是预期的行为，大多数浏览器（包括Edge，Internet Explorer，Opera，Chrome和Firefox）都会遵循这种行为。

为对此进行某种程度的确认，已经发布了有关Firefox行为的错误报告，该行为已关闭，状态为 Wontfix ，可能是由于以下原因：

长话短说：我建议将此问题的状态更改为wontfix，因为它符合html5较复杂的标准之一。

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

为什么会这样？

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

部分可能包含任何级别的标题，但强烈建议作者仅使用h1元素，或将适当级别的元素用于该部分的嵌套级别。

还鼓励作者在节内容的各个元素中显式包装节，而不是依靠节内容中的一个元素具有多个标题而生成的隐式节。

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>

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

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

但是

在最新的草稿中，有关如何区分内容的指南已更改：

部分的标题可能与其部分嵌套级别相同。作者应使用适合该部分嵌套级别的标题。

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

此指南建议，在示例2 上面提供的示例中，标记数据的正确方法。

鉴于此，似乎合乎逻辑：

此功能是根据原始指南实施的
新指南建议，h1元素不是章节内容的适当标题，因为它们将在章节根目录中设置，但是，在使用它的情况下，其样式将适合符合嵌套级别的标题

节内容元素始终被视为其最近祖先节根或节内容的最祖先子节

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

摘要

这是预期的行为，因为当标题嵌套在诸如article和section之类的分段内容中时，最初存在多种表达标题层次的方法。现在，使用相同的规则来确保标题反映嵌套部分的适当等级。

Answer 4

它只是关于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 5

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/

文章

5 个答案:

这是一个错误吗？

为什么会这样？

示例1

示例2

示例3

但是

摘要

JSFiddle