Question

默认 html 文档是一个长的文本, 带有 & lt; Hgt; 标记, 隐藏文档的大纲。我认为在文档本身中显示大纲视图更有意义。

所以而不是

<h1>1 foo</h1>
<p>bar
<h2>1.1 subfoo</h2>
<p>bleep

我更喜欢那种

<ol>
  <li><heading>foo</heading>
    <p>bar
    <ol>
      <li><heading>subfoo</heading>
        <p>bleep
    </ol>
</ol>

这是一个很好的方法吗?我该怎么用 CSS 来写这个?

这会打破东西,例如屏幕阅读器、搜索引擎、锚链吗?

Answer 1

HTML5有一个很好的方法这样做:

<section>
    <header>1. Foo</header>

    <!-- Content here -->

    <section>
        <header>1.1. Subfoo</header>

        <!-- More content here -->
    </section>
</section>

然后,为了对不同级别进行样式,它只是:

section header {
    /* Header 1 */
}

section section header {
    /* Header 2 */
}

/* And so on... */

不,它不应该打破任何东西。

友情链接