必须用<a>包裹<img>，确保链接功能与无障碍支持；<a>需含rel="noopener noreferrer"，<img>的alt须描述动作（如“在LinkedIn上分享本页”），优先选用SVG图标并设vertical-align: middle或Flex布局对齐。
表格里放社交媒体图标，必须用 <a> 包裹 <img>
直接把 <img> 塞进 <td> 里不是不行，但会丢掉链接功能和无障碍支持。真正可用的结构是：用 <a> 作为容器，<img> 作为其唯一子元素——这样点击区域完整、语义清晰、屏幕阅读器能正确播报。
常见错误包括：<img> 单独写在 <td> 里没加链接；或 <a> 里混写文字和图片导致焦点混乱；或漏掉 rel="noopener noreferrer" 导致安全风险。
-
<a>的href必须指向平台官方分享 intent URL（如 Twitter 是https://twitter.com/intent/tweet?text=...），不能只写主页地址 -
<img>的alt必须描述动作，例如alt="在 LinkedIn 上分享本页"，而不是alt="LinkedIn 图标" - 所有外部链接的
<a>都要加rel="noopener noreferrer"，否则可能被恶意脚本劫持window.opener
<img> 的 src 该选 PNG、SVG 还是字体图标？
优先选 SVG —— 它缩放无损、体积小、可内联、支持 CSS 控制颜色和尺寸。PNG 次之，适合兼容老 IE（但已基本淘汰）。字体图标（如 Font Awesome）在表格中容易受父级 font-size 干扰，且无法单独控制宽高，调试麻烦。
用 SVG 时注意两点：一是确保 <svg> 标签有 aria-hidden="true"（因为已有 <a> 的 aria-label 或 alt）；二是如果外链 SVG，仍需保留 alt 属性作兜底。
立即学习“前端免费学习笔记（深入）”；
- 内联 SVG 示例：
<a href="..." rel="noopener noreferrer"><svg aria-hidden="true" width="24" height="24">...</svg></a> - 外链 SVG 示例：
<a href="..." rel="noopener noreferrer"><img src="linkedin.svg" alt="在 LinkedIn 上分享本页" width="24" height="24"></a> - 避免用
<i class="fab fa-twitter"></i>这类字体图标嵌套在表格单元格里——它依赖 CSS 加载，且无法设置width/height精确控制
表格布局下图标对齐与响应式容易出问题
默认情况下，<img> 在 <td> 中会基线对齐，导致上下留白、视觉偏移。加上 vertical-align: middle 可修复；但更稳妥的是统一用 Flex 布局控制单元格内容。
移动端小屏时，图标挤在一起或换行错乱很常见。不要只靠 width/height 固定尺寸，应配合 CSS 的 max-width: 100% 和媒体查询做收缩。
- 推荐单元格样式：
td { display: flex; align-items: center; justify-content: center; } - 图标尺寸建议用 rem 或 em，例如
width: 1.5rem; height: 1.5rem;，方便随文本缩放 - 避免在
<table>上设table-layout: fixed后又让图标撑开列宽——此时应给<td>设min-width或用white-space: nowrap
为什么不能省略 alt 或写成空字符串？
这不是“有没有”的问题，而是“是否合规”和“能否被读屏软件识别”的问题。空 alt="" 表示图像是纯装饰性的，但社交媒体图标明显承载导航功能；留空会让屏幕阅读器跳过整个链接，等于废掉无障碍入口。
实际测试中，JAWS、NVDA 和 VoiceOver 都会把带空 alt 的 <img> 当作无意义节点忽略，用户根本不知道这里有可点击项。
- 正确写法：
alt="在 Mastodon 上关注我们"（动词开头，说明动作+平台） - 错误写法：
alt=""、alt="Mastodon"、alt="Mastodon 图标" - 如果用了内联 SVG，
<img>就不存在了，此时必须在<a>上加aria-label，例如<a aria-label="在 Mastodon 上关注我们" href="...">
alt 文本的动词导向写法和 rel 属性的强制添加。 
