div与span使用实例分析

# div与span使用实例分析

在HTML中，`<div>`和`<span>`是最常用的通用容器元素，但它们的用途和表现特性有显著差异。本文通过实例分析二者的典型应用场景。

## 1. div的块级特性
`<div>`是**块级元素**，默认独占一行，适合布局结构的划分：
```html
<div style="background: #f0f0f0; padding: 10px;">
  <h2>章节标题</h2>
  <p>这是一个段落内容块</p>
</div>

典型应用场景： - 页面主容器 - 导航栏/页脚区域 - 卡片式布局组件

2. span的行内特性

<span>是行内元素，仅包裹内容不换行，常用于文本修饰：

<p>这段文字包含<span style="color: red;">红色强调</span>内容</p>

典型应用场景： - 局部文字样式修改 - 图标嵌入（如Font Awesome） - JavaScript操作的最小DOM单元

3. 对比总结

合理使用这两个元素能使代码结构更清晰。当需要CSS控制布局时优先选择<div>，而文本级微调则使用<span>。 “`

（全文约400字）