HTML 5个大纲：为什么这两个例子会产生不同的大纲？
HTML 5 outlines: why do these two examples generate a different outline?
我想知道为什么以下两个（非常相似的）示例生成完全不同的 HTML5 轮廓。
示例 #1
这会生成以下大纲：
我觉得这个大纲没问题。
示例 #2
这会生成以下大纲：
这个大纲对我来说不太好：主要内容现在是 header!
的一部分
区别在于 "This is the main content" h1 标签周围有一个 section 容器。
谁能给我解释一下这背后的逻辑？
更新：示例 #3
正如 中指出的，重要的是要知道 header、footer 和 main 不 开始一个新的部分，同时 h-element 与前面的 h-element 大小相同 确实 开始一个新的部分。
所以要记住的简单经验法则如下：**当页面顶部有一个 header，中间有一个 main，还有一个 header在底部，然后它们中的每一个都必须以 h1 开头（隐式部分开始）。在这些 h1 元素下，您可以添加尽可能多的其他部分（通过分节元素 [nav、aside、section 和 article] 或隐含地由较低的 h 元素 [h2 到 h6]).
我创建了另一个示例（在我看来）类似于完美的 HTML5 大纲 - 这对于 HTML5 之前的设备也是 100% 可以理解的。
这会生成以下轮廓：
这是 <article>、<section>、<nav> 和 <aside> 标签的全部要点（"sectioning content" 就 spec): 它们定义了较大文档的 sub-sections。
你说 "the main content is now part of the header"，但这不是大纲显示的内容 - 它表明 <section> 是主文档 (<body>) 的一个小节，标题为 <h1>Header</h1>.
在你的第一个例子中：
<body>
<header><h1>Header</h1></header>
<main><h1>This is the main content</h1></main>
<footer><h1>Footer</h1></footer>
</body>
..<header>、<main> 和 <footer> 元素不影响大纲。 （甚至还有 a note to that effect in the spec - 寻找 "The header element is not sectioning content; it doesn't introduce a new section."），所以为了大纲算法的目的，它等同于：
<body>
<h1>Header</h1>
<h1>This is the main content</h1>
<h1>Footer</h1>
</body>
在你的第二个例子中，
<body>
<header><h1>Header</h1></header>
<main>
<section>
<h1>This is the main content</h1>
</section>
</main>
<footer><h1>Footer</h1></footer>
</body>
..<section> 元素引入了 <body> 元素第一部分的一个小节，因此它等同于：
<body>
<div>
<h1>Header</h1>
<section>
<h2>This is main content</h2>
</section>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
（我添加了 <div>s 来标记大纲算法隐含的文档的逻辑部分。）
所以大纲是：
1. Header
1.1. This is the main content
2. Footer
使用规范中的示例可能更有意义：
<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
...
</section>
<section>
<h1>Spending money</h1>
...
生成以下大纲：
1. The Tax Book
1.1 Earning money
1.2 Spending money
注意 "The Tax Book" 是文档的标题，"earning" 和 "spending" 是副标题。
另请参阅 the article on HTML5 outlines on MDN，它为该功能提供了一些背景知识，希望能使这一切变得更加清晰。
我想知道为什么以下两个（非常相似的）示例生成完全不同的 HTML5 轮廓。
示例 #1
这会生成以下大纲：
我觉得这个大纲没问题。
示例 #2
这会生成以下大纲：
这个大纲对我来说不太好：主要内容现在是 header!
的一部分区别在于 "This is the main content" h1 标签周围有一个 section 容器。
谁能给我解释一下这背后的逻辑？
更新：示例 #3
正如 header、footer 和 main 不 开始一个新的部分，同时 h-element 与前面的 h-element 大小相同 确实 开始一个新的部分。
所以要记住的简单经验法则如下：**当页面顶部有一个 header，中间有一个 main，还有一个 header在底部，然后它们中的每一个都必须以 h1 开头（隐式部分开始）。在这些 h1 元素下，您可以添加尽可能多的其他部分（通过分节元素 [nav、aside、section 和 article] 或隐含地由较低的 h 元素 [h2 到 h6]).
我创建了另一个示例（在我看来）类似于完美的 HTML5 大纲 - 这对于 HTML5 之前的设备也是 100% 可以理解的。
这会生成以下轮廓：
这是 <article>、<section>、<nav> 和 <aside> 标签的全部要点（"sectioning content" 就 spec): 它们定义了较大文档的 sub-sections。
你说 "the main content is now part of the header"，但这不是大纲显示的内容 - 它表明 <section> 是主文档 (<body>) 的一个小节，标题为 <h1>Header</h1>.
在你的第一个例子中：
<body>
<header><h1>Header</h1></header>
<main><h1>This is the main content</h1></main>
<footer><h1>Footer</h1></footer>
</body>
..<header>、<main> 和 <footer> 元素不影响大纲。 （甚至还有 a note to that effect in the spec - 寻找 "The header element is not sectioning content; it doesn't introduce a new section."），所以为了大纲算法的目的，它等同于：
<body>
<h1>Header</h1>
<h1>This is the main content</h1>
<h1>Footer</h1>
</body>
在你的第二个例子中，
<body>
<header><h1>Header</h1></header>
<main>
<section>
<h1>This is the main content</h1>
</section>
</main>
<footer><h1>Footer</h1></footer>
</body>
..<section> 元素引入了 <body> 元素第一部分的一个小节，因此它等同于：
<body>
<div>
<h1>Header</h1>
<section>
<h2>This is main content</h2>
</section>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
（我添加了 <div>s 来标记大纲算法隐含的文档的逻辑部分。）
所以大纲是：
1. Header
1.1. This is the main content
2. Footer
使用规范中的示例可能更有意义：
<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
...
</section>
<section>
<h1>Spending money</h1>
...
生成以下大纲：
1. The Tax Book
1.1 Earning money
1.2 Spending money
注意 "The Tax Book" 是文档的标题，"earning" 和 "spending" 是副标题。
另请参阅 the article on HTML5 outlines on MDN，它为该功能提供了一些背景知识，希望能使这一切变得更加清晰。