使用<span>标签和<div>标签完成下图所示功能

HTML中的`<span>`标签和`<div>`标签主要用于网页布局和文本样式控制。`<span>`通常用于标记文档中的某个部分，并且其内容可以有不同的CSS样式，但它的作用范围相对较小，仅限于它所在的元素。而`<div>`标签是一个块级元素，常用于划分页面结构，可以包含其他HTML元素，它的尺寸和样式可以更自由地调整。

如果你想要描述如下的图片效果：

- 图片周围有边框或背景色，可以用`<div>`包裹图片并添加相应的CSS样式，例如`border`、`padding`或`background-color`。
- 如果需要对图片内的文字进行特别样式处理，可以在`<div>`内嵌套`<span>`，并将文字包裹其中。
- 如果需要分段显示图片说明或者强调某些部分，也可以使用`<span>`给特定的文字添加样式。

示例代码可能会像这样：

<div class="image-container">
  <img src="your-image-url" alt="图片描述">
  <span class="caption">这是图片的标题</span>
  <span class="highlight">突出显示的部分</span>
</div>

<style>
.image-container {
  border: 1px solid #ccc;
  padding: 5px;
}

.caption {
  font-style: italic;
}

.highlight {
  background-color: yellow;
}
</style>