可点击区域需由语义、结构、样式和可访问性共同保障；仅用div+onclick模拟链接会丧失焦点、键盘跳转、屏幕阅读器识别及SEO支持，才是唯一原生支持导航语义的元素。
可点击区域不是靠“加个 onclick 就完事”，而是由语义、结构、样式和可访问性共同决定的。用错标签或忽略边界条件，轻则点击无效，重则被屏幕阅读器跳过、SEO 降权、移动端失焦。
为什么 <a> 必须包裹内容，不能只靠 CSS 模拟
很多人试图用 <div> + onclick + cursor: pointer 模拟链接，但这绕过了 HTML 的导航语义。浏览器不会将其计入链接计数，键盘用户按 Tab 键无法聚焦，Enter 键不触发跳转，screen reader 也不会读作“链接”。
-
<a href="...">是唯一原生支持焦点、键盘跳转、下载协议（download）、邮件（mailto:）、电话（tel:）的元素 - 若必须用非
<a>元素（如<button>），需手动补全：添加role="link"、tabindex="0"、监听Enter和Space键事件 - 用
<span>或<div>包裹<a>是合法的，但反过来——把<a>塞进<button>——是非法嵌套，HTML 解析器会自动拆解，行为不可控
usemap 和 <map> 热区点击失效的常见原因
图像热区（image map）依赖坐标与原始图片尺寸严格对齐。缩放、响应式、CSS 裁剪都会导致 coords 失效，且现代框架中动态加载图片时，<map> 往往早于图片挂载完成。
-
coords值必须基于图片原始像素尺寸，不是渲染后尺寸；用width/height属性缩放图片时，coords不自动缩放 -
<img>必须有usemap="#name"，<map>的name必须完全匹配（大小写敏感），且不能带# - 移动端 Safari 对
poly形状支持不稳定，建议优先用rect或circle；复杂区域推荐 SVG 替代 - 热区无
alt属性时，屏幕阅读器无法描述该区域用途，WCAG 不合规
表格单元格里放链接，为什么整格点不动
表格单元格（<td>）本身不是可聚焦元素，<a> 默认只覆盖其内部文本高度，未撑满单元格。这不是 bug，是 CSS 盒模型的自然表现。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 让整格可点，最简方案是给
<a>加display: block或inline-block，再设height: 100%和width: 100% - 若单元格有 padding，
<a>需额外设置box-sizing: border-box，否则宽高会溢出 - 避免给
<tr>加onclick：它不语义，且在部分安卓 WebView 中点击区域识别异常 - 不要用
href="#"再 JS 跳转——这会把页面滚回顶部，且破坏前进/后退历史；应改用href="javascript:void(0)"或更优的button+ ARIA
新窗口打开链接时，rel="noopener noreferrer" 为什么不能省
漏掉 rel 属性不只是“少个安全提示”，而是直接暴露 window.opener 接口，允许新开页通过 opener.location 控制原页面跳转，甚至窃取原页 cookies（尤其在同域下）。
-
target="_blank"默认赋予新页面对原页面的完整控制权，这是浏览器历史遗留行为 -
rel="noopener"切断window.opener引用，noreferrer还额外阻止Referer头发送 - 若需兼容老 IE（
noopener不支持），可用 JS 动态设置：el.addEventListener('click', e => { window.open(url, '_blank', 'noopener'); e.preventDefault(); }); - 注意：Vue/React 等框架中，
v-bind或props若未显式透传rel，容易被忽略
真正难的不是写出能点的链接，而是让每一次点击都对键盘用户、屏幕阅读器、爬虫、移动端和安全审计都“刚刚好”。坐标、属性名大小写、rel 值、DOM 挂载时机——这些细节不报错，但一出问题就很难定位。
