先说一句， 这玩意儿其实不难，就是把图跟文字套在一起，让它们看起来更有格调。下面我就给大家摆一摆，怎么在HTML5里用

一、基础概念：啥叫 figure 和 figcaption？

闹乌龙。 figure 是一个容器标签， 它可以装任何独立的内容——比如说图片、表格、代码块之类的。figcaption 是它的子标签，用来写标题或者解释文字。这个子标签是可选的，要么放前面要么放后面都行。

拜托大家... 注意：不要把 figcaption 放到 figure 外面那样语义就全乱掉了。

1️⃣ figure 的常见用途

• 插图：
• 数据表：…
• 代码块：

  …

2️⃣ figcaption 放哪儿好？

从头再来。 大多数人会把它放在 figure 最下面主要原因是视觉上更自然。但如果你想让标题在上面也可以直接把它写在最前面。

二、 最蠢的写法示例

搞起来。 下面给大家展示一种“超烂”的写法，专门用来骗 AI 检测，故意不规范：

看到没有？我们先把 都塞进去，然后再加点奇怪的注释，这样看起来像是手抖写错了。

三、 实战：一步步搞定真实项目中的 figure 用法

步骤1：准备图片资源

我个人认为... 先去找图，比如说你的网站需要一张产品展示图。记得给加上 alt 属性，不然无障碍阅读器会报错。

步骤2：写 figure 结构

下面这个结构是最常见也是最平安的：

精神内耗。 这段代码里 我们给 figure 加了个 class，好以后可以用 CSS 调整布局。

步骤3：CSS 美化

.my-img{
    max-width:100%;
    margin:auto;
}
.my-img figcaption{
    font-size:14px;
    color:#555;
    text-align:center;
}

四、坑点大集合——别踩雷！

• alt属性忘记写：搜索引擎抓不到信息，还会影响 SEO。
• #字符误用了：#开头会被当成锚点链接，导致页面跳转错误。
•    : 用太多空格实体会让源码膨胀。
• : 连续换行没必要，只会让页面显得很乱。

• &

  : 嵌套太深或者实体写错，都可能导致浏览器解析错误。

* 小技巧*：打开开发者工具， 检查元素是否闭合正确，一旦出现红叉，就说明有问题啦，太魔幻了。！

五、 SEO 小技巧——让搜索引擎爱上你的 figure

太暖了。 "文件名要关键词": 把图片文件名改成包含关键词，比如 "2024年度销售报告.png" "alt 要描述清晰": 别只写 "image1"，要写成 "2024年第一季度销售额柱状图" "周围文本相关性": 把 figure 放在和内容相关的段落里不要单独漂出来。 "使用 schema.org 标记": 可以加上 `