section元素与article元素的区别

最新推荐文章于 2024-03-23 15:19:30 发布

原创最新推荐文章于 2024-03-23 15:19:30 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #section #article

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML中section和article元素的区别及应用实例。section用于将文档分成逻辑相关的部分，而article则适用于独立且可复用的内容区块。

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

1.section元素

（1）代码段

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="GBK">  
    <title></title>  
</head>  
<body>  
  <section>  
    <h1>这是一个section元素</h1>  
    <p>这里是一个内容区域</p>  
    <section>  
      <h2>A</h2>  
      <P>A的内容</P>  
    </section>  
      <section>  
        <h3>B</h3>  
        <p>B的内容</p>  
      </section>  
  </section>  
</body>  
</html>

（2）运行结果框架：

2.article中含有section

（1）代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
  <article>
  <h1>产品</h1>
  <p>详细的产品列表</p>
  <section>
    <h2>产品A</h2>
    <p>产品A的内容</p>
  </section>
  <section>
    <h2>产品B</h2>
    <p>产品B的内容</p>
  </section>
</article>
</body>
</html>

（2）运行结果

Untitled Section

产品
1. 产品A
2. 产品B

3.section中含有article

(1)代码段


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
 <section>
  <h1>产品</h1>
  <p>产品的种类介绍</p>
  <article>
    <h2>产品A</h2>
    <p>产品A的介绍</p>
  </article>
  <article>
    <h2>产品B</h2>
    <p>产品B的介绍</p>
  </article>
</section>
</body>
</html>