Question

我找到了HTML5的a page about sections and outlines。不是100％肯定它是官方的，页面说大多数浏览器都不遵循它，但我认为这是一个非常酷的主意，所以我试图创建明确插入隐式部分并创建轮廓的代码。

我所遇到的概念问题类似于隐式和显式切片混合的示例之一（缩写版本）：

<body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  ...
  <section>
    <h3>Forest elephants</h3>  
    ...
    <h3>Mongolian gerbils</h3>
    ...
    <h2>Reptiles</h2>
    ...
  </section>
</body>

应该给出：

1. Mammals
   1.1 Whales (implicitly defined by the h2 element)
   1.2 Forest elephants (explicitly defined by the section element)
   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)

但是我遇到了麻烦（开始一个带有标题的部分，然后再使用不太深的标题）。考虑这个稍微修改过的例子：

<body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  ...
  <section>
    <h3>Forest elephants</h3>  
    ...
    <h2>Reptiles</h2>
    ...
    <h1>Martians</h2>
    <p>Just being annoying</p>
  </section>
</body>

我该怎么处理？最后一个<h1>应该在外部作用域的<h0>级别结束，该级别不存在。

（我个人认为，以<h3>开头的明确部分只允许<h3>，<h4>，<h5>和<h6>，这是最有意义的，但这并没有重现这个例子，我想以“官方”的方式来做。）

Answer 1

大纲算法通过简单地从不允许切片元素中的标题元素高于切片元素本身来解决这个问题。来自spec：

输入标题内容元素时

如果当前部分没有标题，则输入的元素为当前部分的标题。

否则，如果输入的元素的等级等于或高于当前轮廓目标轮廓的最后一部分的标题，或者当前轮廓目标的轮廓的最后一部分的标题是隐含的标题，然后创建一个新的部分并将其附加到当前轮廓目标元素的轮廓，以便这个新部分是该轮廓的新的最后一部分。让当前部分成为新部分。让输入的元素成为当前部分的新标题。

例如，如果您有一个<h3>作为某个部分中的第一个标题，那么在同一部分中跟随它的任何<h2>或<h1>将被平等对待，从而创建隐式部分与第一部分分开。只有<h4>到<h6>才能创建隐式子部分，而无需开始新的部分。

您的第一个示例实际上产生了以下大纲：

1. Mammals
   1.1 Whales
   1.2 Forest elephants
   1.3 Mongolian gerbils
   1.4 Reptiles

你的第二个例子产生了以下概述：

1. Mammals
   1.1 Whales
   1.2 Forest elephants
   1.3 Reptiles
   1.4 Martians

Answer 2

分段内容元素内部的隐含部分不能突破＆＃34;创建更高级别的条目。它们要么创建一个兄弟条目（如果它是具有相同或更高等级的标题元素），要么创建子条目（如果它是具有较低等级的标题元素）。

因此，您的两个示例都会创建此大纲：

1. Mammals
   1.1 Whales
   1.2 Forest elephants
   1.3 Mongolian gerbils [resp. Reptiles]
   1.4 Reptiles [resp. Martians]

demo of the HTML5 Outliner（which I recommend）似乎同意。

在HTML5中混合显式和隐式分段时不可能的情况？

2 个答案: