2

我已经阅读了一些关于 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. 我的奇妙网站
    1. 导航
    2. 关于我
    3. 我靠什么谋生
  2. 接触

这相当简单。导航是 的子部分，<body>因此出现在<body>'s下方<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>

我在and<figure>之间添加了元素，这似乎会根据http://gsnedders.html5.org/outliner/影响大纲。<h1><h2>

大纲输出：

  1. 我的奇妙网站
    1. 导航
      1. 关于我
      2. 我靠什么谋生
  2. 接触

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

谢谢

4

3 回答 3

0

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

只要您在. _ _ blockquote_ details_ dialog_ fieldset_figurebodyh1

如果我将切片根元素放在 之前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>
于 2013-07-06T17:55:43.993 回答
0

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

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

于 2013-07-03T13:59:45.470 回答
0

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

为了确定这个答案，请测试以下 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>
于 2017-08-13T15:34:24.047 回答