2

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

<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如果我使用元素，我可以获得所需的轮廓。但是 id 在 HTML 结构中有main元素，然后一切都会中断（至少对我来说 - 这不是我理解的方式）。

我可以使用main元素实现所需的轮廓吗？

4

3 回答 3

1

创建明确的部分结构；不要忘记那<main> 不是切片节点。在您的代码示例中，'Header'<h1>是根节点（ level#1 ）并隐式分配了两个 'Article' 子节点（ level#2 ）。“主要内容”<h1>与主要“标题”处于同一级别（级别＃1）并包含其余的隐式节节点；'article-s' 和最后一个 'section' 处于同一级别（ level#2 ）。这就是大纲查看您的结构的方式（bare-boned-old-style-implicit）：

<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>在整个地方以任意顺序使用 s 或任何其他标题，而​​不会影响大纲结构）。与以下相同：

<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 大纲扩展；它将图标放置在地址栏的右侧，并在单击时显示 pade 的轮廓。

于 2013-10-19T07:55:01.063 回答
1

我不知道为什么它在您的计算机上不起作用，但只是将您的section标签修改为body标签及其工作

于 2013-10-19T07:41:57.880 回答
1

mainelement 不是分段内容。请查看 HTML 5.1 Draft 4.5.14 的主要元素。您还可以在 Mozilla 开发人员网络HTML5 大纲算法上阅读有关大纲算法的更多信息。

据我了解，您不能真正做您想做的事情，因为在您的示例中，您的 body 元素（主要元素）具有多个 h1.

于 2013-10-19T07:47:02.507 回答