新闻列表应使用 <ul>，因其语义准确、利于无障碍访问和SEO；每条新闻用 <li> 包裹，标题用 <h3> 或 <h4>，辅助信息用 <time> 或 <small>；标题截断用 CSS text-overflow: ellipsis；图片懒加载用 loading="lazy"（首屏除外）；链接必须为真实URL路径。
新闻列表用 <ul> 还是 <div>？
语义优先，选 <ul>。新闻条目本质是“一组并列、无序的独立内容”，<ul> 比 <div> 更准确，对屏幕阅读器友好，也方便后续用 CSS 的 :nth-child() 做样式分隔或高亮。
别为了“看着顺手”全用 <div> 套娃——浏览器不报错，但语义丢失后，SEO 和无障碍访问会悄悄打折。
- 每条新闻用
<li>包裹，不要用<p>或<section>替代 -
<li>里必须有标题（<h3>或<h4>），不能只用<span> - 日期、来源这类辅助信息，统一放在
<time>或<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"> - 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 href="#" onclick="go(123)">。前者可直链、可刷新、可被搜索引擎收录；后者点开后地址栏还是 #，分享出去就是废链接。
如果后端还没准备好路由，至少模拟一个静态路径，比如 /archive/20240520-title-slug.html，比 javascript:void(0) 强十倍。
- href 值必须是合法 URL，哪怕只是相对路径
- 避免
onclick绑定跳转逻辑——那是交互增强阶段的事，不是结构搭建阶段该干的 - 锚点链接（
#detail）只适合页面内跳转，资讯列表不该用
结构没立住之前，别急着加动画、卡片阴影、响应式断点——先把语义、链接、图片加载这三件事做对，后面所有优化才有基础。
