HTML怎样标记文档的图例说明_HTML标记文档图例说明元素【元素】

才是标记图片/媒体图例的正确元素，必须嵌套在内且为首个或末个子元素；仅限内作表单分组标题，二者语义不同，不可混用。

HTML 里没有专门的“图例说明”元素

直接说结论：<legend></legend> 只能用在 <fieldset></fieldset> 里，且只负责表单分组标题，不是通用图例；<figcaption></figcaption> 才是真正用来标记图片/媒体图例的，但必须嵌套在 <figure></figure> 内部——这两个标签常被混用，结果语义出错、屏幕阅读器读不准、SEO 也打折。

什么时候该用 <figcaption></figcaption>

只在需要为一张图、一段代码、一个图表或嵌入式媒体（比如 <img alt="HTML怎样标记文档的图例说明_HTML标记文档图例说明元素【元素】" >、<svg></svg>、<pre class="brush:php;toolbar:false;">&lt;/code&gt;）提供独立、可访问的说明文字时才用。它不是装饰性标注，而是内容的一部分。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;figcaption&gt;&lt;/code&gt; 必须是 &lt;code&gt;&lt;figure&gt;&lt;/code&gt; 的第一个或最后一个子元素，不能放中间&lt;/li&gt; &lt;li&gt;如果图有标题+说明，建议把标题用 &lt;code&gt;&lt;h3&gt;&lt;/code&gt; 放在 &lt;code&gt;&lt;figcaption&gt;&lt;/code&gt; 里，而不是另起一行&lt;/li&gt; &lt;li&gt;不要为了“看起来像图例”硬套 &lt;code&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/code&gt; —— 比如表格下方那行小字说明，用 &lt;code&gt;&lt;caption&gt;&lt;/code&gt; 更合适&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;&lt;legend&gt;&lt;/code&gt; 的唯一合法位置&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;legend&gt;&lt;/code&gt; 不是图例，是表单控件分组的标题，只能出现在 &lt;code&gt;&lt;fieldset&gt;&lt;/code&gt; 开始处。浏览器会把它渲染在边框左上角，视觉上像“图例”，但语义和用途完全不同。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/1801&quot; title=&quot;万兴爱画&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/ai_manual/000/000/000/175680369151191.png&quot; alt=&quot;万兴爱画&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/ai/1801&quot; title=&quot;万兴爱画&quot;&gt;万兴爱画&lt;/a&gt; &lt;p&gt;万兴爱画AI绘画生成工具&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/ai/1801&quot; title=&quot;万兴爱画&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;常见错误：把图表下方说明写成 &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;fieldset&gt;&lt;legend&gt;数据来源：国家统计局&lt;/legend&gt;&lt;/fieldset&gt;&lt;/li&gt; &lt;li&gt;这样会导致辅助技术误判为表单控件组，键盘焦点行为异常&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;legend&gt;</pre> 里不能放链接、按钮等交互元素，否则部分屏幕阅读器会跳过 <h3>纯文本图例说明怎么写才稳妥</h3> <p>如果只是段落里顺带解释某个术语或符号（比如“● 表示已完成，○ 表示未开始”），别强行套语义标签。用普通段落 + 简单 HTML 就够了。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>符号对齐用 <code><span></span> 配合 CSS（比如 display: inline-block; width: 1.2em;），别依赖表格或 <pre class="brush:php;toolbar:false;"></pre>