html如何在图片侧写字

要在HTML中在图片旁边添加文字，可以使用`<figure>`、`<figcaption>` 或者直接结合`<img>`标签与`<p>`标签来实现。这里给出几种常见的方法：

1. **使用figcaption**: 如果图片位于`<figure>`元素内，你可以使用`<figcaption>`标签来插入描述文本，通常放在图片下方。

<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>这是一段图片旁的文字</figcaption>
</figure>

2. **CSS定位**：如果想让文字更自由地放置，可以直接将`<p>`标签放在`<img>`标签之后，并通过CSS调整其位置，比如`float`属性或Flexbox布局。

<img src="image.jpg" alt="图片描述">
<p>这是图片旁边的文字</p>
<style>
  p {
    position: relative; /* 或者 float: right; */
    margin-left: 20px; /* 调整文字与图片的距离 */
  }
</style>

3. **包裹在一个div**：也可以将图片和文字都放入一个共同的容器里，如`<div>`，然后调整样式。

<div class="image-container">
  <img src="image.jpg" alt="图片描述">
  <p>这是一段图片旁的文字</p>
</div>
<style>
.image-container {
  display: flex;
  align-items: center;
}
</style>