最稳妥方案是用<aside>包裹图标链接并配CSS定位，SVG内联+aria-label+focusable="false"，固定定位用top:50%和transform居中，移动端隐藏，CSS变量统一管理颜色。
用 <aside> 包裹图标链接最稳妥
直接在 index.html 的主体结构旁加一个语义化容器，比用 <div class="sidebar"> 更利于可访问性和 SEO。浏览器默认不渲染 <aside> 为侧边栏，所以必须配 CSS 定位——这点容易被忽略，很多人加了标签但没写样式，结果图标堆在顶部。
- 把社交图标 HTML 放在
<body>内、主内容（比如<main>或<article>）同级的位置，不要嵌进主内容里 - 每个图标用
<a>包裹，href指向对应平台主页（如https://github.com/yourname），别漏写https:// - 图标本身推荐用 SVG 内联（不是图片链接），体积小、缩放无损、可直接用 CSS 控制颜色和大小
SVG 图标要加 aria-label 和 focusable="false"
纯视觉图标对屏幕阅读器不可见，用户 tab 导航时还可能意外聚焦到 SVG 上。不加可访问性处理，实际使用中会卡住部分访客。
- 每个
<a>加aria-label，例如aria-label="GitHub 主页"，别写“点击跳转”这种冗余信息 - SVG 标签内加
focusable="false"，防止键盘 tab 进入 SVG 内部节点 - 避免用
<img src="icon.svg">，外部 SVG 无法用 CSS 改颜色，且加载失败时无 fallback
<a href="https://twitter.com/you" aria-label="Twitter 主页">
<svg focusable="false" width="24" height="24" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.564-2.005.974-3.127 1.195a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.926 4.926 0 00-.413 2.103c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061c0 2.385 1.708 4.374 3.943 4.827a4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.2 0-.402-.015-.602.94-.677 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
position: fixed 是侧边栏定位的常见选择，但得设 top 和 right 偏移
很多人只写 position: fixed，忘了指定位置，结果图标贴左上角挡住导航栏。移动端也容易出问题：固定定位在 iOS Safari 上滚动时可能闪烁或错位。
- 推荐用
top: 50%; transform: translateY(-50%)垂直居中，比top: 200px更适应不同屏幕高度 - 用
right: 20px控制距右边界距离，别用left，否则在 RTL 页面（如阿拉伯语）会错乱 - 加
@media (max-width: 768px)把侧边栏设为display: none，手机屏宽度不够，硬塞侧边栏反而影响阅读
图标颜色和悬停效果用 CSS 变量统一控制
硬编码颜色（如 fill: #1da1f2）会让后续换主题或适配深色模式非常麻烦。CSS 变量能一处改、全局生效，也方便 JS 动态切换。
立即学习“前端免费学习笔记（深入）”；
- 在
:root里定义变量，例如--social-github: #24292e; --social-twitter: #1da1f2; - SVG 的
fill设为var(--social-github)，<a>的:hover用filter: brightness(1.2)比改fill更平滑 - 深色模式下只需重置变量值，不用动 HTML 或 JS
