【div,section,article 标签的使用区别】

最新推荐文章于 2024-07-26 09:00:00 发布

Hey_Coder

最新推荐文章于 2024-07-26 09:00:00 发布

阅读量2.7k

点赞数 13

分类专栏：【HTML】文章标签： div和section的区别 section和article的区别分区标签的区别 div和section和article的区别

本文链接：https://blog.csdn.net/VickyTsai/article/details/102766086

版权

【HTML】专栏收录该内容

26 篇文章 11 订阅

订阅专栏

div,section,article 的使用区别

1. 结构元素存在的意义
2. div,section,article 的使用区别
♣ 结束语和友情链接

1. 结构元素存在的意义

结构元素:
- 结构清晰: 在 HTML5 中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块 等文档结构相关联的结构元素。
  - nav, header, footer,aside, section , article 等.
- 内容区块:
  - 逻辑分割: 内容区块是指将 HTML 页面按 逻辑分割后的单位。
    - 例如,对于书籍来说，章、节可以称为内容区块；
    - 对于博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。

2. div,section,article 的使用区别

样式化无区别: 针对一个块内容做样式化，三者并无区别。
语义增强: div ,section ,article ，语义是从无到有，逐渐增强的。
三者基础用法:
- ① div
  - 样式化或脚本化: 无任何语义，仅仅用作样式化或者脚本化；
- ② section
  - 主题性内容: 对于一段主题性的内容，则就适用 section；
  - 强调主题性的分区.
- ③ article
  - (可脱离的完整独立的) 主题性内容: 假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容，则就适用 article。
  - 强调完整和独立性的主题性分区.

2.1 div 标签的使用 (文档的分区或节)

div
文档的分区或节: 定义文档中的分区或节。
样式 , 布局和脚本化:
- 使用场合: 作为布局 ,样式化,脚本化时使用。
语义:
- 无语义: 无具体语义，可用在任何场景，只是对比 H5 标签, 不能清晰地看懂上下文。

2.2 section 标签的使用 (主题性的文档的分区/节)

section：
有主题性的文档的分区/节: 定义文档中的节，一般是具有主题性的 (带有标题标签 h1~h6)。
使用场合:
- ① 文章的章节
- ② 标签对话框中的标签页
- ③ 论文中有编号的部分等。
- (都是很有主题性的分区(节))
主题性内容:
- section用作一段有专题性的内容，一般在它里面会 带有标题。
内容分区(分块):
- section元素用于对网站或应用程序中页面上的内容进行分块，或者说对文章进行分段；
内容和标题 (组成):
- 没有标题不使用: 一个section元素通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用section元素。
section不做普通容器:
- section元素并非一个普通的容器元素；
- div 普通容器: 当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div 而非 section元素。
存储到数据库和输出到 word 文档:
- section元素中的内容可以单独存储到数据库中或输出到word文档中。

示例1: 一篇文章,包含评论区.
article与 section 的嵌套方式, 一般如下：
嵌套关系
- article > header | p | section
  - ① header > h1 | p
    - p > time
  - ②section > h2 | article*2
    - article > header | p
      - header > h3 |p
        p> time
互相嵌套: article和section 可以互相嵌套.
- ① 可分离的完整独立的主题性内容article,可以含有主题性内容 section.
  - 一篇文章的评论区 ( 用 section).
- ② 主题性内容 section, 可以含有可分离的完整独立的主题性内容article
  - 评论区的每一条单独的评论 ( 用 article).
页眉中放什么: 发表者和发表日期,放在页眉 header 中.
- ① 发表者: 用 h3,比整篇文章的 h1,和上一层的评论区 h2,要低等级的标题.
- ② 发表日期
  - time,嵌套在 p中 : p > time
  - 这样不支持 time 标签,也会显示出时间,因为时间内容放在p中.
    - <p>发表日期：<time pubdate="pubdate"> 2010/10/10 </time> </p>

    <article>

        <header>
            <h1>article元素使用方法</h1>

            <p>发表日期：
                <time pubdate="pubdate">2010/10/10</time>
            </p>
        </header>

        <p>此标签里显示的是 article 整个文章的主要内容，下面的 section 元素里 是对该文章的评论</p>

        <section>
            <h2>评论</h2>

            <article>
                <header>

                    <h3>发表者：maizi</h3>

                    <p>
                        <time pubdate datetime="2016-6-14">1小时前</time>
                    </p>
                </header>

                <p>这篇文章很不错啊，顶一下！</p>
            </article>

            <article>
                <header>

                    <h3>发表者：小妮</h3>
                    <p>
                        <time pubdate datetime="2016-6-14T:21-26:00">1小时前</time>
                    </p>
                </header>

                <p>这篇文章很不错啊，对 article 解释的很详细</p>
            </article>
        </section>
    </article>

在这里插入图片描述

文章标题和发表日期: 放在 header中
- ❶ 文章标题: 放在了header元素中一级标题 h1中.
- ❷ 发表日期: header > p > time
文章正文: 放在了header元素后面的兄弟标签段落 p 元素中
评论区: section 元素把正文与评论区进行了区分（是一个分块元素，用来把页面中的内容进行区分），在section元素中嵌入了多个人的评论.
- 每条单独的评论: 评论区中, 每一个人的评论相对来说又是比较独立的、完整的，因此对它们都使用一个article元素
  - ❶ 发表者和发表日期: header > h3 | p>time
  - ❷ 评论内容: p
关于主题性分区 section 元素的使用禁忌：
- ① 不能仅仅用于设置样式: 不要将 section 元素用作设置样式的页面容器，那是div 元素的工作。
- ② 优先级: 如果 article 元素、aside 元素或nav 等具有更具体语义的元素符合使用条件，不要使用 section 元素。
- ③ 没有主题性的内容别用: 不要为没有标题的内容区块使用 section元素。

2.3 article 标签的使用 (可分离的完整独立的主题性内容)

article:
可分离的完整独立的主题性内容
- 定义：独立的自包含内容。
- 页眉(含标题) 和页脚: 一般来说，article会有标题部分( 包含在页眉 header内,header > h1~h6 )，有时也会包含页脚footer。
使用场合：一段内容脱离了所在的语境，仍是完整的、独立的，则应该用 article 标签。
完整独立 + 独自被引用:
- article 元素代表( 文档、页面或应用程序中) 独立的、完整的、可以独自 被外部引用的内容。它可以是:
  - 一篇博客
  - 报刊中的文章
  - 一篇论坛帖子
  - 一段用户评论
  - 独立的插件
  - 其他任何独立的内容。
更明确的语义: article是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的内容块。

示例1: 一篇关于 article 使用方法的文章
嵌套关系
- article > header | p | footer
  - 文章标题和发表日期 (页眉): header > h1 | p>time
  - 文章正文 (段落): p
  - 版权 (页脚): footer > p > small

    <article>
        <header>

            <h1>article 的使用方法</h1>
            <p>发表日期：
                <time pubdate="pubdate">2010/10/10</time>
            </p>
        </header>

        <p>article 的使用方法是...</p>

        <footer>
            <p>
                <small>Copyright @ tuantuan.net All Rights Reserverd</samll>
            </p>
        </footer>
    </article>

在这里插入图片描述

示例2: 表示插件: article 元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样

<article>
      <h1>一个插件</h1>
      <object>
            <param name="allowFullScreen" vlaue="true">
            <embed src="#" width="600" height="395"></embed>
      </object>
</article>