奇怪的html5文档大纲答案

【问题标题】：Strange html5 document outline奇怪的html5文档大纲
【发布时间】：2013-07-01 06:10:25
【问题描述】：

我已经阅读了一些关于 html5 大纲算法的文章，但这一篇让我感到困惑。

如果您将以下标记粘贴到此工具中：http://gsnedders.html5.org/outliner/

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

你会得到这样的大纲：

我的梦幻网站
1. 导航
2. 关于我
3. 我靠什么谋生
联系方式

这很简单。导航是<body> 的子部分，因此出现在<body> 的<h1> 下方，就像所有h2 级标题一样。

但是看看下面的例子：

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure><img src="" alt="" /><figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>
</body>

我在<h1> 和<h2> 之间添加了<figure> 元素，这似乎会影响http://gsnedders.html5.org/outliner/ 的轮廓。

大纲输出：

我的梦幻网站
1. 导航
  1. 关于我
  2. 我靠什么谋生
联系方式

所有 h2 级标题现在都是 <nav> 的后代，而不是 <body>。谁能解释为什么会这样？这是大纲工具中的某种错误吗？

谢谢

【问题讨论】：

标签： html markup outline outliner

【解决方案1】：

这对我来说似乎是一个错误。

当您在body 的h1 之后直接使用sectioning root 元素（blockquote、details、dialog、fieldset、figure）时，它似乎会立即发生。

如果我将切片根元素放在 h1 之前，大纲将引发错误 (<type 'exceptions.AttributeError'>)。我用过这个文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>

    <nav></nav>

    <blockquote></blockquote>

    <h1>My fantastic site</h1>

    <h2>About me</h2>

</body>
</html>

【讨论】：

【解决方案2】：

这显然是该网站的一个错误。此外，您的结束 figure 标记不正确，每页应该只有一个 h1。

尝试在 JSFiddle.net 上对此进行测试，您会看到它按预期工作。此外，W3C Validator 是检查 HTML5 的好地方。

【讨论】：

是的，这似乎是一个错误。关闭 <figure> 没有帮助。
对于与 SEO 相关的目的，每页应使用一次 H1 标签。抱歉没有说明清楚。

【解决方案3】：

主要问题是您忘记了结束图形标记。由于这个字幕问题，提到的站点生成大纲，将图形元素之后的所有下一个元素视为图形元素的子集。这意味着图形元素成为它们的容器。现在，由于该站点的这一推论，您的文档在图形元素之后的所有内容都被视为Sectioning Root 元素（块引用、正文、详细信息、对话框、字段集、图形）的内容。我相信您知道这些元素中的部分和标题不会影响其祖先的轮廓。 Sectioning Root 元素中的标题不会包含在主文档大纲中。这意味着您可以在块引用中拥有复杂的标题层次结构，而不必担心它会如何影响文档的整体结构。

为了确定这个答案，请测试下面的 html sn-p，你会看到相同的结果：

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
        <h2>About me</h2>
        <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
        <h2>What I do for a living</h2>
        <p>I sell enterprise-managed ant farms.</p>
        <h1>Contact</h1>
        <p>Shout my name and I will come to you.</p>
    </figure>
</body>

但我认为这就是你想要的：

<body>
    <nav>
        <h1>Navigation</h1>
        <ul>
            <li>...</li>
        </ul>
    </nav>
    <h1>My fantastic site</h1>
    <figure>
        <img src="" alt="" />
    </figure>
    <h2>About me</h2>
    <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h2>What I do for a living</h2>
    <p>I sell enterprise-managed ant farms.</p>
    <h1>Contact</h1>
    <p>Shout my name and I will come to you.</p>    
</body>

【讨论】：