html5中ol要四个li包含图片与文字,要求图片在左,文字在右,四个li纵向排列

可以使用HTML和CSS来实现这个需求，以下是一个简单的示例代码：

HTML代码：

<ol class="image-list">
  <li>
    <img src="image1.jpg" alt="Image 1">
    <p>Text for image 1</p>
  </li>
  <li>
    <img src="image2.jpg" alt="Image 2">
    <p>Text for image 2</p>
  </li>
  <li>
    <img src="image3.jpg" alt="Image 3">
    <p>Text for image 3</p>
  </li>
  <li>
    <img src="image4.jpg" alt="Image 4">
    <p>Text for image 4</p>
  </li>
</ol>

CSS代码：

.image-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.image-list img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.image-list p {
  margin: 0;
}

解释说明：

1. 使用 `<ol>` 标签来创建有序列表，`class="image-list"` 用于指定样式。

2. 使用 `<li>` 标签来创建每一个列表项。

3. 使用 `<img>` 标签来插入图片，`alt` 属性用于指定图片的替代文本。

4. 使用 `<p>` 标签来插入文字。

5. 在 CSS 中，`.image-list` 选择器用于选中有序列表，`list-style` 属性用于去除列表样式。

6. `.image-list li` 选择器用于选中列表项，`display: flex;` 属性用于将图片和文字放在同一行，`align-items: center;` 属性用于垂直居中图片和文字，`margin-bottom: 10px;` 属性用于设置列表项之间的间距。

7. `.image-list img` 选择器用于选中图片，`width` 和 `height` 属性用于设置图片的宽度和高度，`margin-right: 10px;` 属性用于设置图片和文字之间的间距。

8. `.image-list p` 选择器用于选中文字，`margin: 0;` 属性用于去除文字的默认边距。