HTML5无图文标注联动内置机制，需用语义化标签组合实现：用结构确保图与说明语义关联，仅用于临时高亮，锚点链接实现文字跳转图片，复杂标注依赖SVG或CSS定位并补充文本替代方案。
HTML5 本身没有“图文标注联动”的内置机制，所谓“重点标注”和“图片说明联动”，得靠语义化标签组合 + CSS 控制 + （可选）少量 JS 实现，不是加个属性就能自动同步。
用 <figure></figure> 和 <figcaption></figcaption> 套住图与说明
这是最基础也最被忽略的语义化起点。很多开发者直接用 <div> 包图加文字，结果搜索引擎和屏幕阅读器完全无法识别“这行字就是这张图的说明”。
<p>正确写法：</p>
<pre class="brush:php;toolbar:false;"><figure>
<img src="chart.png" alt="2023年用户增长趋势图">
<figcaption>图1：Q2起增速明显提升，主要来自移动端新用户</figcaption>
</figure></pre>
<p>要点：</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><figure></figure> 可以独立于主文流存在，适合被引用（比如论文里“见图1”）
<figcaption></figcaption> 必须是 <figure></figure> 的第一个或最后一个子元素alt 属性仍不可省——它面向的是“图不可见”的场景（如加载失败、读屏），而 <figcaption></figcaption> 是面向“图可见但需补充上下文”的场景给重点内容加 <mark></mark>，但别滥用
<mark></mark> 是 HTML5 明确定义的“高亮标记”语义标签，适用于需要视觉突出且有临时性/上下文相关性的文本（比如搜索结果中的关键词、文档批注）。它不是样式工具，不能替代 <span class="highlight"></span>。
常见误用：
- 用
<mark></mark>标长期有效的关键定义（该用<strong></strong>或<dfn></dfn>） - 在
<figcaption></figcaption>里堆砌多个<mark></mark>导致语义混乱 - 没配 CSS 就依赖默认黄底——不同浏览器渲染差异大，移动端可能看不清
建议搭配最小样式：
mark { background: #ffeb3b; color: #212121; padding: 0 2px; }
想让点击文字跳转到图？用 id + <a href="#xxx"></a> 最稳
所谓“联动”，常指“点一段说明文字，页面滚动到对应图片”。这不是靠某个新 API，而是锚点链接的老办法，但必须确保目标元素有唯一 id。
实操步骤：
- 给
<figure></figure>加id="fig-traffic" - 在正文中写
<a href="#fig-traffic">详见流量趋势图</a> - （可选）加
scroll-margin-top防止标题栏遮挡：figure { scroll-margin-top: 60px; }
注意：不要用 <img alt="HTML5怎么标注重点怎样与图片说明文字联动_图文标注整合指南【教程】" > 自身的 id 做锚点——如果图后面紧跟 <figcaption></figcaption>，滚动停靠位置可能不准；<figure></figure> 才是逻辑容器。
复杂标注（如热区、箭头指向）得靠 CSS 定位或 SVG
如果需求是“在图上标出 A 区域代表服务器，B 区域代表客户端”，HTML5 标签无能为力。这时候有两个务实选择：
- 用
<svg></svg>叠加路径+文字——适合静态图，可缩放不失真，语义可控（加<title></title>和<desc></desc>） - 用绝对定位的
<div> 覆盖在 <code><img alt="HTML5怎么标注重点怎样与图片说明文字联动_图文标注整合指南【教程】" >上——必须配合position: relative父容器，且所有坐标需按图片原始尺寸计算，响应式时容易错位关键提醒：无论哪种方式，都得额外提供文本替代方案（例如在
<figcaption></figcaption>里写清各区域含义），否则对无障碍访问和 SEO 是硬伤。真正难的不是怎么标，而是判断“哪里值得标”——一张图里同时标 5 个点，等于没标；一段说明里连续
<mark></mark>三处，反而稀释重点。语义和克制，比技巧更重要。
