HTML5无图文标注联动内置机制，需用语义化标签组合实现：用结构确保图与说明语义关联，仅用于临时高亮，锚点链接实现文字跳转图片，复杂标注依赖SVG或CSS定位并补充文本替代方案。
HTML5 本身没有“图文标注联动”的内置机制，所谓“重点标注”和“图片说明联动”，得靠语义化标签组合 + CSS 控制 + （可选）少量 JS 实现，不是加个属性就能自动同步。
用
这是最基础也最被忽略的语义化起点。很多开发者直接用 正确写法： 要点： 立即学习“前端免费学习笔记（深入）”； 常见误用： 建议搭配最小样式： 注意：不要用 如果需求是“在图上标出 A 区域代表服务器，B 区域代表客户端”，HTML5 标签无能为力。这时候有两个务实选择： 关键提醒：无论哪种方式，都得额外提供文本替代方案（例如在 真正难的不是怎么标，而是判断“哪里值得标”——一张图里同时标 5 个点，等于没标；一段说明里连续
alt 属性仍不可省——它面向的是“图不可见”的场景（如加载失败、读屏），而 给重点内容加
，但别滥用 是 HTML5 明确定义的“高亮标记”语义标签，适用于需要视觉突出且有临时性/上下文相关性的文本（比如搜索结果中的关键词、文档批注）。它不是样式工具，不能替代 。
标长期有效的关键定义（该用 或 ） 导致语义混乱mark { background: #ffeb3b; color: #212121; padding: 0 2px; }
想让点击文字跳转到图？用
id +
id 防止标题栏遮挡： id="fig-traffic" 自身的 详见流量趋势图 做锚点——如果图后面紧跟 scroll-margin-top，滚动停靠位置可能不准；figure { scroll-margin-top: 60px; } 才是逻辑容器。复杂标注（如热区、箭头指向）得靠 CSS 定位或 SVG
id 和 上——必须配合
