新闻列表页必须用<article>包每条新闻、<main>包列表区、<header>和<footer>分管导航与版权；仅用<div>会导致SEO降权、读屏体验差，且<time>的datetime须为ISO 8601格式。
新闻列表页不是“堆标题+摘要”就行，结构错一个标签，SEO 和屏幕阅读器就直接掉档。
必须用 article 包每条新闻，别用 div
搜索引擎和读屏软件靠 article 识别“这是一条独立可分发的新闻”。只用 div class="news-item"> 看似能跑，实际埋了三个坑：
- Google Search Console 可能报
NewsArticle类型缺失，影响新闻类索引优先级 - 视障用户按
article键跳转时，会卡在一堆无意义的div里，无法快速定位下一条 - 后续加 JSON-LD 结构化数据时，
article能自动映射@type: "NewsArticle"；div得手动补全所有字段，包括datePublished、headline、description
time 标签的 datetime 属性不能省，格式必须严格
发布时间不是写个“2026年4月30日”就完事。datetime 值必须是机器可解析的 ISO 8601 格式，否则 Google 会判定时间无效：
- ✅ 正确：
<time datetime="2026-04-30T14:22:00+08:00">2026年4月30日</time> - ❌ 错误：
<time datetime="2026年4月30日">2026年4月30日</time>（含中文字符） - ❌ 错误：
<time datetime="04-30">4月30日</time>（缺年份、缺时分秒） - 更新时间要额外加
itemprop="dateModified"（若用 Schema.org）
整页容器必须分层：用 main 包列表区，header/footer 各司其职
常见错误是把整个页面塞进一个 section 或全用 div 套娃。正确分层逻辑是：
立即学习“前端免费学习笔记（深入）”；
-
<main>只包裹新闻列表主体区域（即所有article的父容器），不包含顶部导航、底部版权 -
<header>仅放站点级标识：logo、主站名、全局搜索框；别把主导航栏硬塞进去 - 主导航必须单独用
<nav>，放在<header>下方或与<main>并列 - 分页控件（如“上一页/下一页”）也要用
<nav aria-label="新闻列表分页">，不能用p或裸div
图片懒加载 + 响应式必须同时写，但有三处硬约束
新闻页首图若没处理好，CLS（累积布局偏移）会直接拉低 Core Web Vitals 分数。安全写法要满足：
-
src属性必须存在，它是降级兜底地址；不能只靠srcset -
width和height必须写，否则浏览器无法预留空间，触发 CLS - 避免套
<picture>——除非真需要 art direction（比如横竖屏换完全不同的图）；多数新闻图用srcset+sizes就够 - 示例：
<img src="news-800.jpg" srcset="news-400.jpg 400w, news-800.jpg 800w" sizes="(max-width: 768px) 100vw, 800px" width="800" height="450" loading="lazy" alt="长江溪大桥爆破现场">
真正容易被忽略的是：时间语义和容器语义必须同步成立——article 里漏了 time[datetime]，或者把 nav 塞进 header 当装饰，结构就残了一半，后续所有优化都得返工。
