语义清晰的社交媒体链接页应使用<nav>包裹、<ul>列表结构和带明确文字描述的<a>标签；必须添加rel="noopener noreferrer"，用inline SVG图标并设aria-hidden="true"，同时链接文字注明平台名以保障可访问性。
用纯 HTML 写出语义清晰的链接列表
不需要框架或 CSS 框架也能做出干净、可访问、易维护的社交媒体链接页——关键不是“怎么好看”，而是“怎么被正确识别”。<nav> 包裹 + <ul> 结构 + 带描述的 <a> 是基础底线。
- 别用
<div>堆链接，屏幕阅读器无法识别导航意图 - 每个链接必须有明确文字说明，避免 “点击这里” 或纯图标（没加
aria-label的图标对辅助技术不可见） -
rel="noopener noreferrer"必须加上，尤其外链，防止 opener 泄露和安全风险 - 链接顺序建议按使用频率或品牌权重排，不是按字母顺序
图标用 inline SVG 而不是字体或外部图片
字体图标（如 Font Awesome）要额外加载 CSS，外部 PNG 无法缩放且无配色控制；inline SVG 直接内联、可设 fill、体积小、高 DPI 友好。
- 从 Simple Icons 下载对应平台的 SVG，删掉多余
<style>和注释，只留<svg>...</svg> - 把
width/height改成width="24"这类固定值，用 CSS 控制整体大小更稳 - 给
<svg>加aria-hidden="true"，同时在<a>文字里写明平台名，双重保障可访问性
避免常见可访问性翻车点
很多“简洁主页”上线后被反馈“读屏软件念不出链接是干啥的”，问题常出在视觉优先的设计思路上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不用
title属性替代可见文字——它延迟触发、不被所有读屏器可靠支持 - 别隐藏文字只留图标：
text-indent: -9999px或font-size: 0会让链接失去可访问文本 - 如果真想纯图标显示，必须用
aria-label，例如：<a href="https://twitter.com/xxx" aria-label="关注我的 Twitter">...</a> - 检查焦点顺序：按
Tab键时，链接是否按 DOM 顺序依次获得焦点？跳转错乱说明用了tabindex="1"之类硬编码
响应式排版靠 CSS，但 HTML 要预留弹性
HTML 本身不处理换行或堆叠，但它得为 CSS 提供合理结构。用 <nav> + <ul> + <li> 就是为媒体查询打基础。
立即学习“前端免费学习笔记（深入）”；
- 每个链接独立成
<li>，别合并进一个<li>里——否则移动端 flex wrap 或 grid layout 会失效 - 避免在 HTML 里写
style="display: inline-block"这类内联样式，它会覆盖后续媒体查询 - 如果想让链接在小屏竖排，在 CSS 里对
nav ul设flex-direction: column即可，HTML 不用动
最简但合格的结构，往往是最难坚持写对的那部分——比如漏掉 rel、忽略 aria、或把 SVG 当装饰性元素处理。这些地方不报错，但一上线就卡在审核或用户反馈上。
