如何用HTML代码实现多张图片共享一个figcaption说明-html教程-PHP中文网

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

正确结构是将多张并列置于同一内，作为其唯一且末尾子元素；每张图须有独立alt属性，css控制布局与对齐。

如何用html代码实现多张图片共享一个figcaption说明

多个 `<img>` 共用一个 `<figcaption></figcaption>` 的正确结构

HTML 标准里，<figcaption></figcaption> 必须是 <figure></figure> 的**第一个或最后一个子元素**，且每个 <figure></figure> 只能有一个 <figcaption></figcaption>。想让多张图共享同一段说明文字，不能给每张图都套独立 <figure></figure>，也不能把 <figcaption></figcaption> 拆开——得把所有 <img> 放进同一个 <figure></figure> 容器里。

<figure></figure> 是语义容器，不是样式盒子；它包裹的是“一组相关媒体内容”
所有 <img> 直接并列写在 <figure></figure> 内，中间不要插入其他块级元素（如 <p></p>）打断流式布局
<figcaption></figcaption> 放在 <figure></figure> 末尾最稳妥（部分屏幕阅读器对开头位置支持不一）

避免常见错误：别把 <figcaption></figcaption> 塞进

<div> 或错放层级
<p>很多人试图用 <code><div> 包住多张图再加 <code><figcaption></figcaption>

，这会丢失语义，且 <figcaption></figcaption> 在非 <figure></figure> 下完全无效。浏览器可能渲染出文字，但无障碍工具无法识别其与图片的关联。

❌ 错误：<div> <img><img><figcaption>...</figcaption> </div>
❌ 错误：<figure><img><div><img></div> <figcaption>...</figcaption></figure>（<div> 不是合法子元素，破坏结构） <li>✅ 正确：<code><figure><img src="a.jpg"><img src="b.jpg"><img src="c.jpg"><figcaption>三张合影，摄于2023年开源峰会</figcaption></figure>

样式控制：用 CSS 排列多图并保证 `<figcaption></figcaption>` 对齐

<figure></figure> 默认是块级，内部 <img> 会垂直堆叠。要横排、居中或响应式布局，必须靠 CSS。注意 <figcaption></figcaption> 会跟随整个 <figure></figure> 的宽度，不是单张图的宽度。

横向排列建议用 display: flex 或 display: grid，直接作用于 <figure></figure>
若图片尺寸不一，加 vertical-align: top 或 align-items: flex-start 防止基线错位
<figcaption></figcaption> 默认块级居左，如需居中，对它设 text-align: center 即可

示例：

figure { display: flex; gap: 1rem; justify-content: center; }
figure img { max-width: 30%; height: auto; }
figcaption { text-align: center; font-size: 0.9em; margin-top: 0.5rem; }