在 HTML 中，<div> 和 <span> 都是常用的标签，用来组织和结构化网页内容，但它们有不同的用途和行为。

1. <div> – 块级元素

• <div> 是一个块级元素，通常用于将页面内容分成不同的部分（如容器、分区、区域等）。
• 它默认会占据一整行，并且会在前后创建一个换行。

语法：

<div>
    <!-- 内容 -->
</div>

示例：

<div>
    <h2>标题</h2>
    <p>这是一个段落内容。</p>
</div>

用途：

• 用于布局结构，像网页的主要区域、页眉、页脚、侧边栏等。
• 通常配合 CSS 使用，以调整位置、大小和样式。

特性：

• 它是一个块级元素，可以包含其他块级元素或行内元素。
• 由于它是块级元素，<div> 会占据整个行并独占一行。

样式：

div {
    background-color: #f4f4f4;
    padding: 20px;
    border: 1px solid #ddd;
}

示例：

<div>
    <h2>我的文章</h2>
    <p>这篇文章讲述了网页布局。</p>
</div>

2. <span> – 行内元素

• <span> 是一个行内元素，通常用于包装小的内容区块（例如一段文字的一部分），而不影响其他内容的布局。
• 它不会单独占一行，而是与其周围的内容在同一行上显示。

语法：

<span>这是一个行内元素</span>

示例：

<p>这是一段包含 <span style="color: red;">红色</span> 字体的文本。</p>

用途：

• 用于给文本加样式或结构化内容的一部分，例如改变某个单词的字体颜色、大小或字体样式等。
• 通常不用于创建区域或大块的布局，而是更侧重于小范围的内容。

特性：

• 它是一个行内元素，只占据文本内容的空间，不会导致换行。
• 可以与其他行内元素（如链接、图片、文本）并排显示。

样式：

span {
    color: red;
    font-weight: bold;
}

示例：

<p>这是一个包含 <span style="color: red;">红色文字</span> 的段落。</p>

<div> 与 <span> 的区别

特性	<div>	<span>
类型	块级元素	行内元素
默认显示	占据整个行并换行	与周围内容在同一行上显示
用途	用于分隔和组织页面的结构	用于为小范围内容添加样式
常用场景	用于页面的容器、区域、部分	用于样式化文本或小内容块
CSS 样式	可设置宽度、高度等	不能设置宽度、高度

3. 组合使用 <div> 和 <span>

尽管它们各自有不同的用途，<div> 和 <span> 经常一起使用，尤其是在布局和样式设置时。

示例：

<div class="container">
    <h1>我的网页</h1>
    <p>这是一段文本，其中有<span style="color: red;">特别的部分</span>。</p>
</div>

在这个示例中，<div> 用于容纳整个内容部分，而 <span> 用于特定文本部分的样式设置（使其变为红色）。

总结

• <div> 是一个块级元素，常用于页面结构的布局和分组。
• <span> 是一个行内元素，常用于样式化文本或小部分内容。
• 它们通常结合使用来实现灵活的页面布局和样式设计。

通过使用这些元素和适当的 CSS，您可以轻松地控制网页的布局和内容呈现。