推荐关注列表需用语义化HTML（如<ul>+<li>+<article>）结构化展示，头像带alt、用户名用<h3>、按钮用<button>并支持无障碍交互，配合CSS响应式布局与JS动态控制状态。
怎么用 HTML + CSS 实现轻量级推荐关注列表
纯 HTML 无法“动态推荐”，所谓“推荐关注列表”本质是结构化展示 + 样式控制，后端或 JS 决定内容，HTML 只负责呈现。关键在于语义清晰、可访问、易扩展。
推荐用 <ul> 包裹 <li>，每个用户项用 <article> 或带 role="article" 的 <div>，避免用 <div> 堆砌无意义嵌套。
- 头像用
<img>，必须带alt（如alt="@xiaoming 的头像"），不可为空 - 用户名用
<h3>或<p>+role="heading"，别用<span>加粗伪装 - “关注”按钮用
<button>，不是<div onclick>；禁用状态加disabled属性 - 每项加唯一
id（如id="user-123"），方便 JS 绑定事件或埋点
为什么不能只靠 CSS Grid / Flex 布局就完事
CSS 布局决定排列方式，但不解决数据来源、交互逻辑和响应式断点适配。常见误判是：写了 display: grid 就以为“推荐列表做好了”。实际会立刻遇到三个硬问题：
- 小屏下头像+用户名+按钮挤成一团 → 需配合
@media (max-width: 480px)把<li>改为垂直流式，按钮下沉 - 加载中状态没占位 → 列表高度跳动，建议用
min-height或骨架屏<div class="skeleton"> - 键盘焦点顺序错乱 → 若用
flex-direction: column-reverse调换按钮位置，必须同步改tabindex，否则 Tab 键先聚焦按钮再回用户名
如何让“关注”按钮支持 JS 交互又不破坏语义
按钮本身要可点击、可聚焦、可读屏，同时留出 JS 操作入口。核心是分离行为与描述：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 按钮文字写实义内容，如
<button>关注</button>，不要写<button>Click me</button></li> <li>加 <code>data-user-id="456"
属性存用户 ID，JS 通过event.target.dataset.userId获取，别塞在class里解析 - 异步请求中加
aria-busy="true"和disabled，完成后移除；失败时用aria-live="polite"区域播报错误 - 关注成功后，按钮文字应变为
已关注，并加aria-pressed="true"，符合 toggle 按钮规范
容易被忽略的细节：无障碍与 SEO 影响
一个没加 aria-label 的关注按钮，对屏幕阅读器用户就是“按钮”，完全不知道作用对象是谁；而搜索引擎抓取时，如果所有用户名都用 <span>，可能无法识别这是用户实体列表。
- 整个列表加
aria-label="推荐关注的用户列表"，比仅靠<h2>更可靠 - 用户名链接（如有）必须指向真实用户页，
href不可用#或javascript:void(0) - 若列表由 JS 动态注入，确保首次渲染时 HTML 已含基础结构（哪怕空
<ul></ul>），避免 SSR/SEO 失效 - 头像
<img>的loading="lazy"要慎用——首屏推荐列表建议删掉，防止滚动时头像闪入
真正难的不是写出列表，而是让每个 <li> 在键盘、读屏器、低网速、JS 失败等任意条件下，依然能表达“这是谁、能干嘛、现在什么状态”。
