<ol> 用于语义化新闻排行榜，自带序号、支持 CSS 计数器和 reversed 倒序，配合 <h3> 标题、<p class="summary"> 摘要、<footer class="source"> 与 <time datetime="ISO8601"> 时间，确保 SEO 与无障碍合规；需懒加载、唯一锚点及合理 CSS 排版。
用 <ol> 实现语义化新闻排行
新闻排行榜本质是有序列表，<ol> 不仅结构清晰，还自带序号、支持 CSS 计数器定制，比用 <div> + 手动编号更可靠。浏览器和读屏软件能正确识别“第1名”“第2名”的层级关系。
常见错误是套一层 <ul> 或全用 <div>，导致 SEO 降权、无障碍访问失败，且后续想加倒序、跳号（如“TOP3”单独高亮）时得重写逻辑。
-
<ol reversed>可倒序显示（适合“最新上榜”从上往下递减） - 序号样式用
list-style-type: decimal-leading-zero能输出 “01.” “02.” - 避免在
<li>里再嵌套<ol>做子排行——语义混乱，建议用<details>或独立区块展开
标题+摘要+来源的最小可用结构
每条新闻至少包含标题、简短摘要、发布源/时间，三者缺一不可。用 <h3> 包标题（不推荐 <h4> 或 <span>），用 <p class="summary"> 包摘要，用 <footer class="source"> 包媒体名和时间。
容易踩的坑：把来源写进 <h3> 里（破坏标题纯净性）、用 <small> 标签替代语义化容器（已废弃）、时间用纯文本而非 <time datetime="2024-06-15">（丧失机器可读性）。
立即学习“前端免费学习笔记（深入）”；
-
<time>的datetime属性必须为 ISO 8601 格式（如2024-06-15T09:30），否则无法被爬虫或日历工具解析 - 摘要不宜超过 2 行，超出部分用
text-overflow: ellipsis截断，但需确保完整内容仍可通过 hover tooltip 或点击展开获取 - 媒体来源建议加
rel="nofollow"（如果链接到站外），避免权重误导
响应式折叠与加载性能控制
榜单通常只展示前 10 条，但用户可能想看更多。直接渲染全部 50 条会拖慢首屏，也增加 DOM 节点压力。推荐用 IntersectionObserver 懒加载后续条目，或用 <details><summary> 折叠“查看更多”区域。
别用 display: none 预埋所有数据——它仍会解析、布局、触发图片加载；也别在点击时用 fetch() 拉 HTML 片段再 innerHTML 注入——XSS 风险高，且破坏 SSR 友好性。
- 服务端应按需返回 JSON，前端用
for...of循环生成<li>，避免模板字符串拼接（易 XSS） - 移动端小屏幕下，考虑将“来源+时间”合并为一行，用
font-size: 0.85em和color: #666弱化视觉权重 - 每条新闻加
id="news-1"这类唯一锚点，方便分享直达某条（如#news-7）
CSS 排版关键控制点
视觉层次靠间距、粗细、颜色区分，不是靠字体大小堆砌。头条需突出，但不能比页面主标题 <h1> 还大；末位条目要有足够呼吸感，不能挤成一团。
最常被忽略的是行高与垂直对齐：摘要文字若跨行，line-height: 1.5 是底线；图标（如 ?、?）和文字基线不齐时，用 vertical-align: -0.125em 微调，别硬塞 <br> 或 margin-top。
- 序号数字用
counter-increment+::before伪元素，比默认<ol>序号更易控制颜色/背景 - 悬停高亮用
background-color: #f8f9fa，禁用outline（干扰焦点样式） - 避免给整个
<ol>设固定高度或overflow: hidden——会截断 tooltip、下拉菜单等浮动内容
<time> 属性是否有效、滚动加载是否真触发。 
