HTML5的全局属性—article,section

最新推荐文章于 2025-05-08 15:24:08 发布

煮着不如烤着吃

最新推荐文章于 2025-05-08 15:24:08 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40171918/article/details/80638283

本文详细介绍了HTML5中的<article>和<section>标签的使用方法及注意事项。阐述了<article>标签适用于独立且完整的内容，而<section>标签则用于组织文档中的不同部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML 5 <article> 标签

定义和用法

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <article>
        <header>
            百度
        <p>欢迎来到百度</p>
        </header>
        <article>
            <header>
                作者
            </header>
            <p>评论</p>
            <footer>时间</footer>
        </article>
        <footer>
            <p>这是底部</p>
        </footer>
    </article>
    <article>
        <h1> 这是一个嵌套页面</h1>
        <object>
            <embed src="#" width="600" height="400"></embed>
        </object>
    </article>
</body>
</html>

上面有个陌生的标签<embed> 标签是定义嵌入的内容，比如插件。
以上代码是对article的应用下面我给大家讲解以下article的几个要点：

1.<article> 标签的内容独立于文档的其余部分。（强调独立性）

2.<article>可以嵌套

2.HTML <section> 标签

定义和用法

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <section>
        <h1>水果</h1>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
        <article>
            <h2>苹果</h2>
            <p>内容</p>
        </article>
    </section>

</body>
</html>

我们发现<section>标签中必须有个标题，和内容这就注意如果要分段的内容没有标题，就不要用section，其实<article>是<section>的一种，但是<article>更加强调独立性