标签页标题必须使用语义化交互元素：优先用并配aria-controls和aria-selected，禁用或href="#"；仅限跳转场景且须块级、有href、设role；完全不适用。

标签页标题本身不是可点击区域——它只是文字或按钮，真正需要可点击的是 <a></a> 或 <button></button> 元素。直接给 <h2></h2>、<div> 这类纯容器加 <code>href 属性是无效的，必须用语义正确的交互元素承载点击逻辑。

用 <button></button> 做标签页标题最稳妥

标签页（tab）本质是切换控制行为，不是跳转链接，所以优先选 <button></button> 而非 <a></a>。屏幕阅读器会正确识别 role="tab"，键盘用户也能用 Tab/方向键操作。

• 把每个标题包在 <button type="button" role="tab"></button> 里，不要用 <div onclick> 模拟 <li>必须配 <code>aria-controls="panel-id"，指向对应内容区的 id
• 当前激活项要加 aria-selected="true"，其他为 false
• JavaScript 中别只改样式，一定要同步更新这两个 ARIA 属性，否则对读屏软件不可见

<a></a> 标签也能当标签页标题，但有硬约束

如果标签页确实要跳转（比如 SPA 的路由切换），可以用 <a></a>，但必须满足：它是块级元素、有明确 href、不嵌套其他可交互元素。


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 加 display: block 或 inline-block，否则点击热区只有文字部分
• 用 padding 扩展可点击区域，别靠 margin —— 它不增加热区
• 必须设 role="tab" 和 aria-controls，否则无法被辅助技术识别为标签页组件
• 禁止 href="#" + onclick 阻止默认行为——这会让键盘用户按 Enter 后跳到页面顶部

coords 和 <map></map> 不适用于标签页标题

<map></map> + <area> 是为图像热点设计的，坐标基于原始图片像素值，和标签页这种 DOM 结构无关。强行套用会导致：

• 响应式缩放后 coords 全部偏移，点击错位
• 没有键盘支持，Tab 键无法聚焦到任意“区域”
• 屏幕阅读器完全无法解析这些坐标区域的意义
• usemap="#xxx" 必须严格匹配 <map name="xxx"></map>，少个 # 就失效

标签页标题的可点击性，核心不在“怎么画区域”，而在“用对元素+补全 ARIA + 同步状态”。漏掉 aria-selected 或没把 <button></button> 设为 type="button"，都可能导致表单意外提交或焦点管理失控。