Question

所以，让我说我有以下结构：

<doctype html>
<header>
    <h1>Header</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</header>

<main>
    <h1>Main content</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</main>

<section>
    <h1>Sidebar</h1>
</section>

如果我使用http://gsnedders.html5.org/outliner/（或任何其他）查看大纲，我会得到这样的大纲：

1. Main content
    1. Header
       1. Article
       2. Article
    2. Article
    3. Article
    4. Article
    5. Article
    6. Sidebar

哪（根据我的理解）不正确。我认为它应该是这样的：

1. Header
       1. Article
       2. Article
2. Main content
       1. Article
       2. Article
       3. Article
       4. Article
3. Sidebar

为什么会这样？如果我使用section元素，我可以获得所需的大纲。但是在HTML结构中有main个元素，那么一切都会中断（至少对我来说 - 这不是我理解它的方式）。

我可以使用main元素获得所需的大纲吗？

Answer 1

我不知道为什么它无法在您的计算机上运行，只是将section标记修改为body标记及其工作

Answer 2

main元素不是分段内容。请查看HTML 5.1草案4.5.14 The main element。您还可以在Mozilla开发人员网络The HTML5 Outline Algorithm上阅读有关概述算法的更多信息。

据我所知，你不能真正做你想做的事，因为在你的例子中你的身体元素（主要元素）有多个h1。

Answer 3

创建显式剖面结构;不要忘记<main> 不是节点。在您的代码示例中，“Header”<h1>是根节点（级别＃1），并且隐式地分配了两个“Article”子节点（级别＃2）。 '主要内容'<h1>与主'Header'处于同一级别（级别＃1）并保留其余的隐式节节点; 'article-s'和最后'section'处于同一级别（级别＃2）。这就是大纲者如何看待你的结构（裸露的旧式风格）：

<doctype html>
  <h1>main-level</h1>
    <h2>descendant</h2>
    <h2>descendant</h2>
  <h1>main-level</h1>
    <h2>descendant</h2>
    <h2>descendant</h2>
    <h2>descendant</h2>
    <h2>descendant</h2>
    <h2>descendant</h2>

为了避免混淆，建议明确地定义所需的部分结构：

<doctype html>
<header>
  <h1>root</h1>
    <section>
      <h1>Header</h1>
      <article><h2>Article</h2></article>
      <article><h2>Article</h2></article>
    </section>
</header>

<main>
    <section>
      <h1>Main content</h1>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
    </section>
</main>

<section>
    <h1>Sidebar</h1>
</section>

这样'标题'，'主要内容'，'边栏'处于同一级别（级别＃2）;并且是主“根”节点的子节点（级别＃1）。将<header>和<main>作为切片节点，您将获得您提到的大纲，并且结构将转换为此结构：

<doctype html>
<section>
    <h1>Header</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</section>

<section>
    <h1>Main content</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</section>

<section>
    <h1>Sidebar</h1>
</section>

但他们不是，我建议你明确指定部分。顺便说一下，请注意，当明确使用时，部分（不是标题）承担定义文档结构（轮廓，即）的角色，而不是旧样式，<h1> - <h6>，这里是示例：

<doctype html>
<h6>Grand-Grand</h6>
<!-- notice top level h6 -->
<section>
    <h6>Grand</h6>
    <article><h1>Minor</h1></article>
    <!-- and h1 at the bottom of outline tree -->
    <article><h1>Minor</h1></article>
</section>

<section>
    <h6>Grand</h6>
    <article><h1>Minor</h1></article>
    <article><h3>Minor</h3></article>
    <article><h4>Minor</h4></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h5>Grand</h5>
</section>

注意一个部分中的第一个标题只是包含部分的名称（由部分元素构成）和结构由显式部分定义决定（意味着你可以使用<h1>或任何其他标题，到处都是，以任意顺序，在轮廓结构中没有影响）。同样如下：

<doctype html>
<h1>Grand-Grand</h1>
<section>
    <h1>Grand</h1>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h1>Grand</h1>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h1>Grand</h1>
</section>

，就html5大纲而言。我猜它是专门为htm解析器实现的（实际上没有新的“视觉影响”），因此他们可以更准确地“识别”页面上的内容，并提供更流畅的体验并帮助残障人士。 Chrome很不错html5 outliner extension;它将图标放在地址栏的右侧部分，并在单击时显示pade的轮廓。

HTML5 - 需要有关大纲的解释

3 个答案: