html制作网页，划分3*2个区域总高度500px每个区域分别插入一张图片，并在图片表面显示文字

可以使用HTML的表格标签和图片标签来实现这个需求。以下是一个示例代码：

<table style="height: 500px; width: 100%;">
  <tr>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image1.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字1</p>
        </div>
      </div>
    </td>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image2.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字2</p>
        </div>
      </div>
    </td>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image3.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字3</p>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image4.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字4</p>
        </div>
      </div>
    </td>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image5.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字5</p>
        </div>
      </div>
    </td>
    <td style="width: 33.33%;">
      <div style="position: relative; height: 100%;">
        <img src="image6.jpg" style="max-height: 100%; max-width: 100%;" />
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
          <p>文字6</p>
        </div>
      </div>
    </td>
  </tr>
</table>

在这个代码中，我们使用了一个表格标签来划分3行2列的区域，并设置了总高度为500px。每个单元格内部都有一个div标签，用于实现图片和文字的居中显示。div标签的高度设置为100%，这样图片就会填满整个单元格。图片的样式设置了最大高度和宽度为100%，这样就可以保持图片的比例不变，并且不会超出单元格的范围。文字则使用了一个position为absolute的div标签，通过设置top、left和transform属性来实现居中显示。