仅用HTML5实现带标题图片并排布局（禁用CSS与表格）

既然不能用表格和CSS，那我们可以利用HTML5原生的**行内元素（inline elements）**特性来搞定，核心思路是把每张图片和对应的标题包裹在一个行内容器里，这样多个容器就能自然横向排列，再用换行标签让标题刚好落在图片下方。

直接上可运行的代码示例：

<span>
  <img src="your-image-1.jpg" alt="图片1的替代文本">
  <br>
  <span>图片1的标题</span>
</span>
<span>
  <img src="your-image-2.jpg" alt="图片2的替代文本">
  <br>
  <span>图片2的标题</span>
</span>
<span>
  <img src="your-image-3.jpg" alt="图片3的替代文本">
  <br>
  <span>图片3的标题</span>
</span>

方案逻辑说明 #

• <span>是HTML5标准的行内元素，默认不会独占一行，所以多个<span>容器会自动并排展示；
• <br>标签用来强制换行，让标题精准出现在对应图片的正下方；
• 完全符合你的限制条件：没有使用CSS、废弃标签或表格，纯HTML5原生实现。

如果追求更语义化的结构（毕竟<span>是通用行内容器），也可以结合<figure>和<figcaption>标签，只要把它们套入行内容器即可：

<span>
  <figure>
    <img src="your-image-1.jpg" alt="图片1的替代文本">
    <figcaption>图片1的标题</figcaption>
  </figure>
</span>
<span>
  <figure>
    <img src="your-image-2.jpg" alt="图片2的替代文本">
    <figcaption>图片2的标题</figcaption>
  </figure>
</span>

不过要注意，部分浏览器可能会保留<figure>的块级默认特性导致换行，所以第一个用<span>+<br>的方案兼容性更稳妥，完全不需要依赖任何样式。

内容的提问来源于stack exchange，提问作者ajwong4