8.4 section 元素

这节课主要了解一下 section 元素。

section 元素用于对网站或应用程序中页面上的内容进行分块。一个 section 元素通常由内容及标题组成。但 section 元素不是一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div 而非 section元素。

下面通过编写代码了解 section：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>section 元素</title>
</head>
<body>
    <section>
        <h1>苹果</h1>
        <p>这是一个水果可以吃，而且很好吃</p>
    </section>
</body>
</html>

这样一个 section 就定义好了，注意：

通常不推荐没有标题内容使用 section 元素。
不要与 article 元素混淆。

我们用代码看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>section 元素</title>
</head>
<body>
    <section>
        <h1>苹果</h1>
        <p>这是一个水果可以吃，而且很好吃</p>
    </section>
    <article>
        <h1>苹果</h1>
        <p>这是一个水果可以吃，而且很好吃</p>
        <section>
            <h2>红富士</h2>
            <p>这是一种外表很红的苹果，吃起来也不错</p>
        </section>
        <section>
            <h2>国光</h2>
            <p>这是一种外表很红的苹果，吃起来也不错</p>
        </section>
    </article>
</body>
</html>

这样就完成了在 article 中嵌套 section。第一部分没有用 section 包裹，因为分析器可以直接读出，我们就能对其省略。

下面对 section 和 article 做一个详细的区分。

<section>
        <h1>水果</h1>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>pingguo</h2>
            <p>内容</p>
        </article>
 </section>

这个例子和上面的有明显区别就是元素互换了，可能比较复杂的是不太理解为什么这两个元素可以互换使用，因为在 HTML5 中 article 元素可以看成是特殊的 section 元素，它比 section 更加强调独立性，且 section 元素强调分段或分块，而 article 元素强调的是独立性，具体来说如果一块内容相对独立那么应该使用 article 元素，但是如果你想将一个元素分为几段，你可以使用 section 元素。另外在 HTML5 中 div 元素作为一个容器的存在，当使用 css 样式的时候可以对其应用各种样式嵌套。不要将 section 元素作为设置页面样式的容器。

8.4 section 元素

这节课主要了解一下 section 元素。

全站热榜

创作者周榜