标签页标题必须使用语义化交互元素：优先用<button type="button" role="tab">并配aria-controls和aria-selected，禁用<div onclick>或href="#"；<a>仅限跳转场景且须块级、有href、设role；<map>完全不适用。
标签页标题本身不是可点击区域——它只是文字或按钮，真正需要可点击的是 <a> 或 <button> 元素。直接给 <h2>、<div> 这类纯容器加 href 属性是无效的，必须用语义正确的交互元素承载点击逻辑。
用 <button> 做标签页标题最稳妥
标签页（tab）本质是切换控制行为，不是跳转链接，所以优先选 <button> 而非 <a>。屏幕阅读器会正确识别 role="tab"，键盘用户也能用 Tab/方向键操作。
- 把每个标题包在
<button type="button" role="tab">里，不要用<div onclick>模拟 - 必须配
aria-controls="panel-id"，指向对应内容区的id - 当前激活项要加
aria-selected="true"，其他为false - JavaScript 中别只改样式，一定要同步更新这两个 ARIA 属性，否则对读屏软件不可见
<a> 标签也能当标签页标题，但有硬约束
如果标签页确实要跳转（比如 SPA 的路由切换），可以用 <a>，但必须满足：它是块级元素、有明确 href、不嵌套其他可交互元素。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加
display: block或inline-block，否则点击热区只有文字部分 - 用
padding扩展可点击区域，别靠margin—— 它不增加热区 - 必须设
role="tab"和aria-controls，否则无法被辅助技术识别为标签页组件 - 禁止
href="#"+onclick阻止默认行为——这会让键盘用户按 Enter 后跳到页面顶部
coords 和 <map> 不适用于标签页标题
<map> + <area> 是为图像热点设计的，坐标基于原始图片像素值，和标签页这种 DOM 结构无关。强行套用会导致：
立即学习“前端免费学习笔记（深入）”；
- 响应式缩放后
coords全部偏移，点击错位 - 没有键盘支持，
Tab键无法聚焦到任意“区域” - 屏幕阅读器完全无法解析这些坐标区域的意义
-
usemap="#xxx"必须严格匹配<map name="xxx">，少个#就失效
标签页标题的可点击性，核心不在“怎么画区域”，而在“用对元素+补全 ARIA + 同步状态”。漏掉 aria-selected 或没把 <button> 设为 type="button"，都可能导致表单意外提交或焦点管理失控。
