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

Question

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

kex*_*eam 9 html css html5 html-heading

问题:

为什么<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vik*_*ngh 6

这是设计使<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>

Run Code Online (Sandbox Code Playgroud)

来源：

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

这个官方信息说：

在下面的 CSS 块中， x 是以下选择器的简写： :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; }

Run Code Online (Sandbox Code Playgroud)

为什么 h1 和 h2 相同？

这是设计使然，因为浏览器制造商认为/同意，在 web 编辑器、生产者和开发人员之下，<h2>通常将 . 这就是为什么在, , ,标签中<h1> font-size不是默认更大的原因。 <article><aside><nav><section>

你的情况的第一级，即 x h1其中的尺寸h1为1.50em ，但这个规则是h1只有IE浏览器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; }
Run Code Online (Sandbox Code Playgroud)
:-webkit-any()选择器匹配括号内列出的任何标签，即文章、旁白、导航、节。并且在<article>, <aside>,<nav>或<section>标签内被缩小到1.50em正常标题的大小等等，如上面演示中所示。

@VicJordan 我确实仔细阅读了您的答案。关于嵌套的讨论虽然有用，但并没有回答这个问题。w3c 文档的链接确实阐明了浏览器符合规范。为什么规范这么说或者它背后的基本原理仍然没有答案。 (2认同)

@VicJordan 没有必要暗示评论者他们没有彻底阅读您的答案。你似乎没有抓住重点。您说，“旨在使部分标题小于默认页面标题，并且该规则仅适用于 h1 标记”。这里的问题是：为什么它没有被设计为使 `<h2>` 标签比人们直观期望的部分内的 `<h1>` 标签小？ (2认同)

Answer 2

Hid*_*bes 5

这是一个错误吗？

不，这是大多数浏览器（包括 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>

Run Code Online (Sandbox Code Playgroud)

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

示例 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>

Run Code Online (Sandbox Code Playgroud)

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

示例 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>

Run Code Online (Sandbox Code Playgroud)

此版本还使查看标题层次结构和遵循两个指导点变得更加容易。

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