section元素与divarticle元素的区别

Posted 2020-11-01 飞鱼0725

section元素是对网站或应用程序中页面上的内容进行分块，一个section元素通常有标题和内容组成。但section元素并非一个普通的容器元素，当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section元素。我们可以这样理解：section元素中的内容可以直单独存储到数据库中或输出到word文档中。

section元素的作用是对页面上的内容进行分块，或者对文章进行分段，不要将它与表示着"有着自己的完整的、独立的内容"的article元素混淆。

下面是一个带有section元素的article元素的代码事例：

<article>
    <h1>标题</h1>
    <p>苹果，植物类水果</p>
    <section>
        <h2>红富士</h2>
        <p>红富士是从普通富士的芽变中选育出的</p>
    </section>
    <section>
        <h2>国光</h2>
        <p>国光苹果品，又名小国光、万寿。</p>
    </section>
</article>

上面的代码首先是一段独立的、完整的内容，因此使用article元素。每一段都有一个标题，因此使用了两个section元素，但有人会问，为什么第一段没有使用section呢，其实这里是可以使用section元素的，但是由于这里的结构比较清晰，分析器是可以识别第一段内容是在section元素里的，所以可以将第一个section元素省略。但如果第一个section元素里要包含子section元素或子article元素，那么必须写明第一个section元素。

接下来看一个包含section和article元素的section代码事例：

<section>
    <h1>水果</h1>
    <article>
        <h2>苹果</h2>
        <p>苹果，植物类水果，多次花果</p>
    </article>
    <article>
        <h2>橘子</h2>
        <p>橘子，是芸香科柑橘属的一种水果。。。</p>
    </article>
</section>

这个事例比前一个事例复杂了一些，首先他是文章的一段，因此没有使用article元素，但是在这一段中，每一段都是独立的内容，所以使用article元素。article元素可以看成一种特殊种类的section元素，他比section元素更强调内容的独立性。如果将一块内容分成几段的时候用section元素。