section元素与div、article元素的区别

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元素。

猜你喜欢

转载自www.cnblogs.com/LLMjiayou7/p/8973321.html
今日推荐