html标签怎么表示独立内容_figure与figcaption用法【技巧】-html教程-PHP中文网

用于标记独立于主文流、可被单独引用或重排的内容块，如图表、代码示例、svg、引文等；必须为首个或末个子元素，否则语义失效；需用 css 显式控制对齐与间距。

html标签怎么表示独立内容_figure与figcaption用法【技巧】

<figure></figure> 和 <figcaption></figcaption> 不是用来“装饰图片”的，而是语义上标记一段**独立于主文流、可被单独引用或重排的内容块**——比如图表、代码示例、照片集、引文、甚至一段 SVG 可视化。用错就等于告诉屏幕阅读器“这图不重要”，也影响 SEO 和文档结构解析。

什么时候必须用 `<figure></figure>`？

核心判断标准：这段内容是否能被移出上下文、放在附录/图注页、甚至被论文引用编号（如“见图 3.2”）？

✅ 图表（<img> + 数据说明）、带标题的代码块（<pre class="brush:php;toolbar:false;"><code></code>）、SVG 可视化、数学公式块</pre>
✅ 独立引文（<blockquote></blockquote> 包在 <figure></figure> 内，表示该引文是本文的“素材”而非作者论述）
❌ 纯装饰性图标（如小 logo、分隔线图标）、文中 inline 插图（如“张三正在调试<input type="range">”里的那个滑块图）

`<figcaption></figcaption>` 必须是第一个或最后一个子元素

HTML5 规范强制要求：<figcaption></figcaption> 必须作为 <figure></figure> 的**首个或末个子节点**。放中间会失效——浏览器仍渲染，但语义丢失，AT（辅助技术）无法关联标题与内容。

正确写法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<figure>
  @@##@@
  <figcaption>图 1：2024 年 Q1 网站访问量（单位：万）</figcaption></figure>

错误写法（语义断裂）：

<figure>
  @@##@@
  <p>这是张图</p>
  <figcaption>图 1：...</figcaption></figure>

样式控制要点：别依赖默认居中

浏览器对 <figure></figure> 的默认样式极弱（通常只设 margin），<figcaption></figcaption> 更无默认对齐。常见误区是以为它自动居中图+标题——其实不会。

图和标题默认是块级垂直堆叠，非水平居中
<figcaption></figcaption> 默认左对齐，且没有 margin/padding，常紧贴图片下方
若需标题居下、图居中，需显式写 CSS：figure { text-align: center; } + figcaption { display: block; margin-top: 0.5em; }
响应式场景下，<figure></figure> 是理想的 flex 容器父级，可配合 flex-direction: column 或 grid 精确控制图文关系

真正难的是判断“是否独立”——很多开发者把所有图片都套 <figure></figure>，结果全文语义混乱；另一些人完全不用，放弃结构化表达。关键不是标签数量，而是每次插入前问一句：这段内容，删掉会影响主干逻辑吗？