figure和figcaption构成语义单元而非排版工具，figcaption必须是figure的直接子元素且仅能位于首或尾；alt描述图像本身，figcaption说明上下文，二者不可互换或省略。
figure和figcaption不是“给图片加标题”的快捷写法
它俩构成的是一个语义单元，不是排版工具。浏览器、搜索引擎、读屏器靠这个结构识别“这段文字在解释这张图”，一旦用错位置或套错内容，语义就断了，辅助技术可能直接跳过说明。
常见错误现象：figure里塞了轮播图单帧、产品主图、头像旁昵称；figcaption被包在div里再塞进figure；或者figcaption写在中间，前后还有img或其他元素。
-
figcaption必须是figure的**直接子元素**，且只能出现在第一个或最后一个位置 - 一个
figure只能有一个figcaption，多段说明请拆成多个figure - 图要是“拿掉也不影响正文逻辑”的独立内容——比如论文插图、代码截图、带数据来源的信息图
- 纯装饰图、banner图、轮播图、文章内普通配图（仅辅助理解某句话），不该用
figure
figcaption放上面还是下面？顺序影响可访问性
所有主流浏览器默认把figcaption渲染在底部，但DOM顺序决定屏幕阅读器播报顺序：先读figcaption，再读图/媒体内容。所以位置不是样式问题，而是语义流问题。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 标题型说明（如“图3-2:用户登录流程图”）推荐
figcaption写在最前面——符合文档阅读习惯，也利于结构化数据提取 - 解释型说明（如“拍摄于2023年东京展会现场”）可以放后面，避免打断正文流
- 别用
flex-direction: column-reverse或order强行视觉翻转顺序——DOM结构没变，但视觉与语义不一致，容易让读屏器混乱 - 不要用
position: absolute把figcaption移出文档流，否则可能被辅助技术忽略
alt和figcaption必须共存，职责完全不同
alt是给img自身的简短替代文本，图像缺失时显示，或供屏幕阅读器快速播报；figcaption是对整个figure单元的说明，可能含编号、背景、数据来源、结论等。二者不能互换，也不能省略其一。
立即学习“前端免费学习笔记（深入）”；
-
alt=""表示该图纯装饰——此时就不该用figure -
alt建议 ≤125 字符，描述图像“是什么”，例如alt="折线图:用户登录量在1月到3月呈上升趋势" -
figcaption可以多行，补充“为什么在这里”，例如<figcaption>图2:Q1用户活跃度变化趋势（数据来源:内部埋点）</figcaption> - 如果图是代码截图，
alt写“Python 异常堆栈截图”，figcaption注明Python版本、触发条件
响应式布局中容易踩的样式坑
figure默认只有上下margin，没有padding或border；figcaption默认块级、居中、字体略小，但text-align只对内联内容有效，在Flex/Grid布局下需用justify-content或align-items控制对齐。
- 重置样式时别漏掉
margin: 0，否则容易和父容器外边距叠加 - 要做左图右文，推荐
display: flex; align-items: flex-start;，再设图片宽高和文字区域最小宽度 - 小屏切为上下结构时，别用
float或position: absolute把figcaption挤出流——否则读屏器可能跳过它 - 不要用
margin: auto强行“居中对齐”figcaption，用text-align: center更稳妥 -
figcaption里别塞链接或按钮——它本质是说明文字，不是交互容器
