Question

我已经阅读了一些关于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>的{{1}}下方，与所有h2级标题一样。

但请看下面的例子：

<h1>

我在<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>和<figure>之间添加了<h1>元素，这似乎会影响http://gsnedders.html5.org/outliner/的大纲。

大纲输出：

我很棒的网站
1. 导航
  1. 关于我
  2. 我的生活
联系

所有h2级标题现在都是<h2>而不是<nav>的后代。任何人都可以解释为什么会发生？这是大纲工具中的某种错误吗？

由于

Answer 1

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

尝试在JSFiddle.net上测试它，你会发现它按预期工作。此外，W3C Validator是检查HTML5的好地方。

Answer 2

对我来说这看起来像个错误。

一旦您使用sectioning root元素（blockquote，details，dialog，fieldset，figure），就会出现这种情况直接在body的{{1}}之后。

如果我将切片根元素放在h1之前，则outliner会抛出错误（h1）。我用过这个文件：

<type 'exceptions.AttributeError'>

Answer 3

主要问题是您的结束标记被遗忘了。由于这个副标题问题提到了生成轮廓的网站，所以将数字元素之后的所有下一个元素视为图元素的子集。这意味着数字元素成为他们的优势。现在，由于这个网站的所有内容在图形元素condider之后作为Sectioning Root元素的内容（blockquote，body，details，dialog，fieldset，figure）。我相信你知道这些元素中的部分和标题不会影响他们祖先的轮廓。分段根元素中的标题不会包含在主文档大纲中。这意味着您可以在blockquote中拥有复杂的标题层次结构，而不必担心它将如何影响文档的整体结构。

要确定此答案，请测试以下html代码段，您会看到相同的结果：

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

奇怪的html5文档大纲

3 个答案: