清爽新闻列表需用<article>封装每条新闻，含<h2>标题、唯一id、<figure><img><figcaption>配图、ISO 8601 <time datetime>，配合CSS Grid/Flex布局、loading="lazy"及真实宽高或aspect-ratio。

用 `

` 包每条新闻，标题用 `

`，配图用 `

` 组合，时间必须写 ``，图文内部用 Flex 或 Grid 布局，图片加 `loading="lazy"` 和真实宽高（或 `aspect-ratio`），整页用 `

` 包列表区，`

` 和 `

` 各司其职——结构语义对了，样式才立得住。

每条新闻必须用 `

` 封装

不是 `

`，而是原生 `

`。它告诉搜索引擎、RSS 阅读器和屏幕阅读器：“这是一条独立、可分发的新闻”。漏掉这个标签，SEO 收录可能降权，视障用户无法用快捷键跳转到下一条。

每条 `

` 还需满足：

• 含且仅含一个 `

  ` 标题（不能只用 `

  ` 或 `

  ` 模拟）
• 有唯一 `id`，如 `id="news-20260903-001"`，方便锚点跳转和 JS 操作
• 若带图，必须用 `

  ` 包裹 `` 和 `

  `，不可裸放 ``

图文混排要靠容器逻辑，不靠浮动或绝对定位

每组“图+文”应封装在独立容器中（推荐 `

` 或 `

`），内部用现代布局控制排列：

• 左右图文：容器设 `display: flex; flex-direction: row; gap: 1.5rem;`，图片固定宽度（如 `width: 320px;`），文字部分用 `flex: 1;` 自适应
• 上下图文：`display: flex; flex-direction: column; align-items: center;`，图片加 `width: 100%; height: auto;` 保证响应式
• 避免 `float` 布局——易导致父容器塌陷、RTL 支持差；更别用 `position: absolute` 破坏文档流

图片必须带语义、尺寸与加载控制

新闻图不是装饰，是内容的一部分。三项硬要求缺一不可：



html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• 结构语义：必须 `

  AI模型训练现场实拍

  `，`
  ` 提供图注，`alt` 描述画面实质（非“配图”“示意图”）
• 尺寸可控：`` 必须带真实 `width` 和 `height` 属性（防 CLS 布局抖动），或用 CSS `aspect-ratio: 16 / 9;` 替代（Safari 15.4+ 支持）
• 懒加载合规：必须加 `loading="lazy"`，且 `src` 属性不可省略（它是降级兜底地址）

时间、主容器与整体层级不能错位

发布时间不是“看着对就行”，机器必须能解析：

• 标签必须带 `datetime` 属性，值为 ISO 8601 格式，如 `9月3日 10:20`；中文日期、简写（如 `09-03`）或缺时分秒均无效
• 整页结构分层明确：
  只放 logo、站名、全局搜索；

  主导航独立存在（不在

  内嵌套）；

  是且仅是新闻列表的直接父容器；

  放版权信息
• 分页控件（如“上一页/下一页”）也要用 `
  `，不用 `

  ` 或裸 `

  `