figure 是为作品展示提供语义准确、结构清晰、可访问性强的原生方案，适用于能脱离上下文独立存在与引用的作品，如插画及说明、ui截图配描述、摄影作品加参数等；随文小图直接用 img 即可。

和

不是“给图加标题的样式工具”，而是为作品展示提供语义准确、结构清晰、可访问性强的原生方案。用对了，既满足 HTML5 标准，又提升 SEO 与辅助技术体验。

明确作品是否属于“独立内容单元”
只有当作品本身能脱离上下文存在、被单独引用或迁移（比如放进附录、侧栏、图库页）时，才适用 figure。例如：

• 一幅原创插画及它的创作说明
• 一组 UI 设计稿截图，每张配独立编号与功能描述
• 摄影作品 + 拍摄时间、地点、设备参数
• 代码实现片段 + “清单 3：用户权限校验逻辑”

若只是正文里随文插入的一张示意小图（如“此处为流程图”），直接用 <img alt="流程图：用户注册步骤"> 即可，无需 figure。

确保 figcaption 位置与语义匹配
figcaption 必须是 figure 的第一个或最后一个直接子元素，不可嵌套在 div 或 p 中，也不能出现两个。常见正确写法：

• 标题前置（适合编号类说明）：

  <figure><figcaption>图2-1：后台数据看板主界面</figcaption>
  @@##@@
  </figure>

• 说明后置（适合解释型文字）：

  <figure>
  @@##@@
  <figcaption>该流程支持中途保存，用户可在任意步骤返回修改</figcaption></figure>

多作品展示需分拆为多个 figure
不能用一个 figure 包裹多张图再配一个 figcaption——这会混淆语义归属。正确做法是：

• 每件作品单独包裹在自己的 <figure></figure> 中
• 若需统一归类（如“系列作品一：城市夜景”），在外层用 <section></section> 或 <h3></h3> 标注，而非强塞进 figure
• 轮播或画廊组件本身不是语义化作品单元，应由 <section role="region" aria-label="作品画廊"></section> 承载，内部每个 item 是独立的 figure

配合 alt 属性，分工清晰

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• alt 描述图像“是什么”：内容、主体、关键视觉元素（供无图环境或读屏器初始识别）
• figcaption 说明作品“为什么放在这里”：编号、主题、背景、用途、结论等上下文信息
  例如：

  @@##@@  
  <figcaption>图4：社交渠道转化率提升显著，较Q3增长27%，主要受益于短视频广告投放优化</figcaption>

  两者不重复、不替代，共同构成完整语义链。

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！