为什么H2比H1大？

在下面的代码片段中，H2内容为什么比H1内容大？

<article> <section> <header> <h1>First Header</h1> </header> </section> <section> <header> <h2>Second Header</h2> </header> </section> </article> 

http://jsfiddle.net/abugp/

为什么在下面的代码片段中的H1内容更大，但不是上面的内容？

 <h1>First Line</h1> <h2>Second Line</h2> 

http://jsfiddle.net/59T43/

Answer 1

由于您没有指定任何样式，标题的大小由您的浏览器的默认样式表决定。 特别是，这意味着两个标题的相对大小可以根据观众的浏览器而变化。

在Chrome 33中看着你的小提琴，我确实看到了你描述的效果。 右键单击标题并select“检查元素”显示问题是由标题周围存在的<article>和/或<section>标记引起的。

Chrome的默认样式表通常包含以下规则：

 h1 { font-size: 2em } 

和：

 h2 { font-size: 1.5em } 

然而，前者的规则在<article>和/或<section>标签内被一些更具体的规则所覆盖，这大概是为了使标题的标题比正常的“整页”标题更小：

 :-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(...)select器大概只是匹配括号内列出的任何标签。 其效果是， <article> ， <aside> ， <nav>或<section>标签内的任何<h1>标题都被缩减为正常的<h2>标题的大小， 两个这样的标签内的任何<h1>进一步缩小，大概是一个正常的<h3>左右的大小。

至关重要的是，Chrome的默认样式表对于<h2>标签没有任何特殊的规则，所以它们总是（在Chrome 33中）以相同的尺寸显示。 因此，当被两个或多个<article>和/或<section>标签包围时， <h1>变得小于<h2> 。

Answer 2

这是因为文档风格的要求。 您可以在HTML 5.1文档@ 10.3.7节和标题中find详细信息

Answer 3

如果您不指定任何样式，浏览器将select其默认样式。 在第一个例子中，h1和h2在一个段的头部内，而在第二个例子中，它们在根段中。 那么行为是不同的。