新闻列表应使用 ，因其语义准确、利于无障碍访问和seo；每条新闻用 包裹，标题用 或 ，辅助信息用 或 ；标题截断用 css text-overflow: ellipsis；图片懒加载用 loading="lazy"（首屏除外）；链接必须为真实url路径。
新闻列表用 <ul></ul> 还是 <div>？
<p>语义优先，选 <code><ul></ul>。新闻条目本质是“一组并列、无序的独立内容”，<ul></ul> 比 <div> 更准确，对屏幕阅读器友好，也方便后续用 CSS 的 <code>:nth-child() 做样式分隔或高亮。
别为了“看着顺手”全用 <div> 套娃——浏览器不报错，但语义丢失后，SEO 和无障碍访问会悄悄打折。
<ul>
<li>每条新闻用 <code><li> 包裹，不要用 <p></p> 或 <section></section> 替代
<li> 里必须有标题（<h3></h3> 或 <h4></h4>），不能只用 <span></span>
<time></time> 或 <small></small> 里，别塞进标题标签标题超长怎么截断又不伤 SEO？
别用 JavaScript 截断，也别在 HTML 里手动写省略号。CSS 的 text-overflow: ellipsis 是标准解法，前提是配合 white-space: nowrap 和 overflow: hidden。
注意：这个组合只对单行生效。如果想多行截断，就得用 display: -webkit-box + -webkit-line-clamp，但 Safari 和旧版 Android 支持不稳定——小白建议先守住单行，更稳妥。
- 给标题加 class，比如
<h3 class="news-title"></h3> - CSS 写：
`.news-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }` - 别忘了设
max-width，否则ellipsis不触发
图片懒加载怎么写才真有效？
直接写 <img loading="lazy"> 就够了。这是原生支持，不用 JS 库，Chrome 76+、Firefox 75+、Safari 15.4+ 都认。
但容易踩坑：如果图片在首屏（比如列表前 2 条），加 loading="lazy" 反而可能延迟渲染，导致用户第一眼看到空白。这时候应该只对滚动后才进入视口的图片加。
- 首屏图片留空
loading属性（即默认 eager） - 其余图片统一写
loading="lazy" - 别信“所有图片都加 lazy 就能提速”——实测可能增加首屏渲染阻塞
- 如果要兼容老浏览器，再加个
data-src+ 简单 JS 回填，但新手建议先跑通原生方案
点击跳转时 URL 怎么保持干净？
每条新闻链接用 <a href="/news/123"></a> 这种真实路径，别用 <a href="#" onclick="go(123)"></a>。前者可直链、可刷新、可被搜索引擎收录；后者点开后地址栏还是 #，分享出去就是废链接。
如果后端还没准备好路由，至少模拟一个静态路径，比如 /archive/20240520-title-slug.html，比 javascript:void(0) 强十倍。
- href 值必须是合法 URL，哪怕只是相对路径
- 避免
onclick绑定跳转逻辑——那是交互增强阶段的事，不是结构搭建阶段该干的 - 锚点链接（
#detail）只适合页面内跳转，资讯列表不该用
结构没立住之前，别急着加动画、卡片阴影、响应式断点——先把语义、链接、图片加载这三件事做对，后面所有优化才有基础。
