热门话题列表应使用语义化HTML结构：用<ol>包裹，每项为<li>内含<a>链接，标题用<h3>，热度数用<span class="trend-count" aria-hidden="true">；CSS需移除序号、设inline-block布局、防溢出、加悬停反馈；前端仅负责渲染动态数据，不可写死内容。
直接用 HTML + CSS 做「热门话题列表」本身没有标准组件，但实际开发中你真正需要的不是纯静态 HTML，而是可交互、可更新、带样式和语义的结构——否则它只是个不能点、不能排序、不能响应数据变化的摆设。
怎么写语义正确又利于 SEO 的话题列表结构
热门话题本质是“带权重的链接集合”，<ol> 比 <ul> 更合适（热度天然有顺序），每个话题必须是 <a>，且 href 指向真实搜索页或专题页。别用 <div> + JS 模拟链接——爬虫不认、屏幕阅读器难读、Ctrl+点击新标签页失效。
- 标题用
<h3>包裹整体（如「今日热门话题」），别用<h1>或<h2>冲突页面主结构 - 每个话题项用
<li>，内部放<a href="/t/ai">#AI</a>，不要把#写死在文本里，应由后端或 JS 注入，方便国际化和统计 - 如果带热度数字（如「24.5 万讨论」），用
<span class="trend-count">包裹，加aria-hidden="true"避免读屏重复播报
CSS 怎么让话题列表既紧凑又可读
默认 <ol> 有左侧序号和缩进，热门列表通常不需要序号（或改用热度图标），且需横向换行、限制行数、悬停高亮。关键不是“好看”，而是“不挤、不截断、不误触”。
- 去掉原生序号：
ol { list-style: none; padding: 0; } - 横向流式布局：
li { display: inline-block; margin-right: 8px; }，比flex兼容性更好（IE11 也 OK） - 防文字溢出：
a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; display: inline-block; } - 悬停反馈必须明显：
a:hover { text-decoration: underline; background: #f0f5ff; }，纯变色不够，用户不确定是否可点
为什么不能只靠 HTML 实现“热门”逻辑
HTML 是描述结构的，热度排序、实时更新、用户行为过滤（如已关注/屏蔽）、地域适配——这些全在 JS 或服务端。常见错误是把“热门”当静态文案写死在 HTML 里，结果上线三天数据就过期。
立即学习“前端免费学习笔记（深入）”；
- 前端只负责渲染：接收 JSON 数组（如
[{ "name": "React", "count": 12450 }]），用forEach插入<li>，别手写 10 个<li> - 避免内联 JS：
<script>document.write(...) </script>会阻塞渲染，且无法缓存 - 如果服务端能直出（SSR），优先用模板（如 EJS/Thymeleaf）生成初始 HTML，再由 JS 接管后续刷新
- 注意
href路径一致性：本地开发用/t/react，上线可能要加 base path，别硬编码成https://example.com/t/react
真正容易被忽略的是焦点管理：键盘 Tab 切换时，话题链接必须能获得焦点并有清晰 outline；移动端点击区域至少 44×44px；如果列表支持“查看更多”，按钮得有 role="button" 和 tabindex="0"——这些不是锦上添花，而是让列表真正可用的底线。
