HTML div 容器

<div>（division）是 HTML 中最通用的块级容器。它本身没有任何语义，纯粹用于将多个元素组合在一起，方便用 CSS 设置样式或用 JavaScript 操作。

基本用法

html 
<div class="card">
  <h2>卡片标题</h2>
  <p>卡片描述内容，放在 div 中统一管理。</p>
  <button>了解更多</button>
</div>

常见场景

1. 页面布局

html 
<div class="page">
  <div class="header">
    <h1>网站名称</h1>
    <nav>导航菜单</nav>
  </div>
  <div class="main">
    <div class="sidebar">侧边栏</div>
    <div class="content">主要内容</div>
  </div>
  <div class="footer">页脚信息</div>
</div>

2. 卡片/组件

html 
<div class="product-card">
  <img src="product.jpg" alt="商品图片">
  <h3>商品名称</h3>
  <p class="price">￥199</p>
  <button class="buy-btn">加入购物车</button>
</div>

3. 居中容器

html 
<div class="container">
  <p>所有内容限定在一个居中的最大宽度内。</p>
</div>
css 
.container {
  max-width: 1200px;
  margin: 0 auto;  /* 水平居中 */
  padding: 0 1rem;
}

<div> vs 语义化标签

HTML5 引入了许多语义化标签来代替高频出现的 <div> 用法：

不用 <div class="">用语义化标签
<div class="header"><header>
<div class="nav"><nav>
<div class="main"><main>
<div class="article"><article>
<div class="section"><section>
<div class="footer"><footer>

语义化标签本质上和 <div> 一样是块级元素，但它们自带含义。搜索引擎、屏幕阅读器可以借此更好地理解页面结构。有相关语义标签时优先使用，没有时才用 <div>。

何时用 <div>

当没有更适合的语义化标签时，<div> 是最佳选择：

  • 纯粹为了 CSS 布局而包装（如 Flexbox / Grid 容器）
  • JavaScript 操作的容器（如挂载一个 React 组件）
  • 视觉装饰性的分组（如背景区块）