HTML元素应用图片排列

HTML元素可以利用`<img>`标签来插入图片，并通过CSS来控制它们的排列。通常有几种常见的图片排列方式：

1. 单列布局：将所有图片并排显示在同一行，可以设置`display: inline-block;` 或 `float: left;` 属性。

<div style="text-align:center;">
  <img src="image1.jpg" alt="图1">
  <img src="image2.jpg" alt="图2">
  <!-- 更多图片 -->
</div>

2. 列表布局：使用`<ul>` 和 `<li>` 创建无序列表，图片作为列表项内的内容。

<ul>
  <li><img src="image1.jpg" alt="图1"></li>
  <li><img src="image2.jpg" alt="图2"></li>
  <!-- 更多列表项 -->
</ul>

3. 响应式网格布局：采用CSS Grid或Flexbox，创建自适应大小的网格系统，图片填充其中的单元格。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

<div class="container">
  <img src="image1.jpg" alt="图1">
  <img src="image2.jpg" alt="图2">
  <!-- 更多图片 -->
</div>