使用<article>而非<div>因语义正确可确保日期被屏幕阅读器识别、提升SEO权重并支持RSS抓取；<time>需带ISO 8601格式datetime属性，CSS控制显示，服务端写死时间值，避免JS动态插入或格式化。
新闻列表用 <article> 而不是 <div> 的原因
语义错误会导致日期无法被屏幕阅读器识别、SEO 权重稀释，甚至被 RSS 抓取器忽略。浏览器对 <article> 内部的 <time> 元素有原生解析逻辑，而 <div> 里塞个 <span class="date"> 只是视觉模拟。
实操建议：
-
<article>每条新闻一个，不要套在总容器里再统一加日期 -
<time>必须带datetime属性，值为 ISO 8601 格式（如2024-05-20或2024-05-20T14:30:00+08:00），否则<time>失去机器可读性 - 避免用 JavaScript 动态插入日期——服务端或静态生成时就写死
datetime，否则爬虫和离线缓存看不到真实时间
日期格式化：CSS 控制显示，不靠 JS 拼字符串
用户看到的「2024年5月20日」或「5月20日」是呈现层问题，<time> 的 datetime 仍必须保持标准格式。用 CSS 的 ::before 和属性选择器做样式映射，比 JS 格式化更轻量、更稳定。
示例（支持中英文切换）：
立即学习“前端免费学习笔记（深入）”；
<time datetime="2024-05-20">2024-05-20</time>
CSS：
time[datetime^="2024"]::before { content: "【2024年】"; }
time[datetime^="2024-05"]::before { content: "【5月】"; }
/* 注意：属性选择器匹配前缀，不是精确值 */常见坑：
- 用
innerText读取<time>内容再格式化 → 丢掉datetime原始值，且阻塞渲染 - 把中文日期直接写进 HTML → 搜索引擎可能误判为无关文本，且无法按时间排序
- 用
toLocaleDateString()但没传 locale → 不同系统显示成 “5/20/2024” 或 “20/05/2024”，破坏一致性
响应式排版：日期和标题不在同一行时的断行控制
小屏下日期常需换行，但默认 <time> 是 inline 元素，容易被截断或撑开容器。不能只靠 flex-wrap，要明确主次关系。
推荐结构：
<article>
<header>
<h3>标题</h3>
<time datetime="2024-05-20">2024-05-20</time>
</header>
<p>摘要...</p>
</article>CSS 关键点：
-
header { display: flex; flex-direction: column; }→ 强制标题在上、日期在下 -
time { order: 2; font-size: 0.85em; color: #666; }→ 日期后置、缩小、降权 - 大屏用
@media (min-width: 768px) { header { flex-direction: row; align-items: center; } time { order: 1; margin-left: 1em; } }
别用 float 或 position: absolute —— 会脱离文档流，影响后续 <p> 的间距计算。
排序与分页：纯前端实现的性能临界点
如果新闻条目超过 50 条，用 JavaScript 对 <time datetime> 排序会卡顿，尤其在低端安卓机上。优先走服务端排序；若必须前端处理，得限制范围。
安全做法：
- 只对当前 DOM 中已渲染的
<article>排序，不用document.querySelectorAll('article')扫全页 —— 避免重复查询 - 提取
datetime值时用el.getAttribute('datetime')，别用el.dateTime（后者是只读属性，且 IE 不支持） - 排序函数用
new Date(a).getTime() - new Date(b).getTime()，别用字符串比较（"2024-05-20" - 分页建议用 IntersectionObserver 预加载，而不是一次性渲染 200 条再 hide/show —— 页面体积和重排压力会陡增
日期本身不是装饰元素，它参与排序、归档、订阅逻辑。漏掉 datetime 属性或格式错误，后面所有功能都会失效，而且很难排查。
