<span> 和 <div> 是 HTML 中常用的内联元素和块级元素，它们可以在布局和样式上起到不同的作用。以下是一些 <span> 和 <div> 搭配使用的常见场景和示例：
文本样式和行内元素的包裹：<span> 元素通常用于包裹一小段文本或者内联元素，并应用特定的样式。它可以用来修改文本的颜色、字体样式等。而 <div> 元素是一个块级元素，适合用于创建独立的块级结构。
<p>这是一段 <span style="color: blue;">蓝色</span> 的文本。</p><div>
<span style="font-weight: bold;">加粗文本</span>
<span style="font-style: italic;">斜体文本</span>
</div>
分组和布局控制：<div> 元素常用于分组和控制布局，它可以包裹一组相关的元素，并为它们提供共同的样式或布局规则。
<div class="container">
<h1>标题</h1>
<p>这是一段文本。</p>
</div>
CSS 和事件的应用：使用 <span> 和 <div> 可以方便地添加 CSS 类、ID 或事件处理程序，以对元素进行样式和交互控制。
<span class="highlight" id="spanElement">这是一个带有高亮样式的文本。</span><div class="box" onclick="handleClick()">点击这个块元素。</div>
总之，<span> 和 <div> 是非常有用的 HTML 元素，可以根据需要灵活地搭配使用。<span> 适用于内联文本和内联元素的样式控制，而 <div> 适用于块级元素的分组和布局控制。记住，它们只是 HTML 提供的两种常用元素之一，根据具体情况选择最适合的元素使用。