常用容器标签

容器标签用于将网页中的内容进行逻辑分组或布局控制，是 HTML 中最基础也最常用的结构标签之一。它们本身没有语义，主要依赖于样式和脚本进行功能扩展。

<div>：块级容器

<div> 是最常用的块级通用容器标签，适用于组织页面结构中的大块内容。

特点：

• 是块级元素，默认换行显示
• 没有语义，仅用于分组布局
• 可嵌套其他元素（包括块级和行内）

示例：

<div class="header">
  <h1>我的网站</h1>
</div>

在 CSS 中通常配合类名定义样式：

.header {
  background-color: #f0f0f0;
  padding: 20px;
}

<span>：行内容器

<span> 是最常用的行内容器，适用于对文本或行内容的局部样式控制。

特点：

• 是行内元素，不换行
• 没有语义，不影响结构
• 适合为文本设置样式或脚本操作

示例：

<p>这是一段文字，其中 <span class="highlight">高亮部分</span> 被强调。</p>

对应 CSS：

.highlight {
  color: red;
  font-weight: bold;
}

<section> 与 <article>

虽然也可以用于容器功能，这两个标签具有语义性，更适合用于语义明确的内容块。

• <section>：表示页面中的一个功能区块或内容段
• <article>：表示一篇完整的文章、帖子、评论等

总结对比

标签	类型	是否语义化	适用场景
<div>	块级	否	页面结构和布局
<span>	行内	否	局部文本样式控制
<section>	块级	是	内容逻辑分区
<article>	块级	是	独立的内容单元

合理使用容器标签有助于提升代码结构清晰度，并便于样式与功能的实现。