新闻门户首页须用语义化结构：main 包含带 aria-labelledby 的 section 划分头条、热点等区块；图片必设 src+loading="lazy"+宽高；时间戳严格采用 ISO 8601 格式。
新闻门户首页不是“堆内容”，而是用语义化结构+响应式流式布局控制信息权重和加载节奏。直接上手，别绕弯。
用 main + section 划分核心内容区块，别全塞进一个 div
新闻门户首页的信息密度高，但浏览器和爬虫只认语义。把“头条”“热点”“视频”“本地”这些栏目各自包进独立的 section，再统一放在 main 里——这样既满足 W3C 对主内容区域的定义，又让屏幕阅读器能跳转到具体板块。
-
section必须带aria-labelledby或内部有h2，否则会被当成普通容器忽略 - 避免嵌套过深：比如
section > div > article > div > p，应压到section > article > h3 + p - 头条区可额外加
role="region" aria-label="今日头条"，方便语音导航快速定位
图片懒加载必须配 src + loading="lazy"，srcset 是加分项不是替代项
首页首屏常有大图轮播或焦点图，不处理好会拖慢 LCP（最大内容绘制）。loading="lazy" 是浏览器原生支持的最小成本优化，但它依赖 src 存在才能降级生效。
- 错误写法：
src，老浏览器白屏，Lighthouse 直接报错 - 正确写法：
-
width和height必须写，否则触发 CLS（累积布局偏移），尤其在移动端横竖屏切换时抖动明显
时间戳必须用
新闻时效性极强，搜索引擎靠 datetime 属性判断发布时间。写成“刚刚”“2小时前”或“2026/04/19”都无效，会被忽略或判为低质信号。
- ISO 8601 格式是硬性要求：
YYYY-MM-DDThh:mm:ss±hh:mm，不能省略秒、时区 - 显示文本（如“4月19日 22:46”）可以自定义，但
datetime值必须机器可解析 - 若需标注更新时间，加
itemprop="dateModified"（配合 Schema.org）；发布用itemprop="datePublished"
导航栏固定但不遮挡正文，position: sticky 比 fixed 更安全
门户首页需要常驻顶部导航，但用 position: fixed 容易导致正文第一屏被遮盖、滚动定位错乱、iOS Safari 键盘弹出后导航卡住。
- 推荐写法：
header { position: sticky; top: 0; z-index: 100; }，父容器不能是overflow: hidden - 必须给
main加margin-top等于导航高度，防止 sticky 启动前内容上滑闪动 - 不要给
sticky元素设transform，部分安卓 WebView 下会失效
真正难的是图文混排时的浮动图与段落缩进冲突——text-indent 对 figure 无效，但对紧随其后的 p 仍生效，结果就是文字从图片底下“钻出来”。这时候得用 clear: both 或把图文整体包进 article 再用 Flex 控制流，而不是调 text-indent 值硬凑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
