<time>标签必须带符合ISO 8601规范的datetime属性才具语义有效性，仅文本内容无法被解析；支持日期型、日期时间型、周/年/月型三类格式，且需确保机器可读、逻辑一致、不嵌套。
time标签必须带datetime属性才有效
单独写 <time>2024年3月15日</time> 是无效的语义化标记，浏览器和屏幕阅读器无法解析时间含义。HTML5 要求 <time> 元素必须包含 datetime 属性，其值需为机器可读的 ISO 8601 格式。
常见错误包括：
- 用中文日期（如
2024年3月15日）直接填入datetime - 省略
datetime，只靠文本内容表达时间 - 格式不规范：漏掉时区、使用斜杠分隔（
2024/03/15）、缺零填充（2024-3-5）
正确写法示例：
<time datetime="2024-03-15">2024年3月15日</time> <time datetime="2024-03-15T14:30:00+08:00">下午2:30</time> <time datetime="2024-W11-5">本周五</time>
datetime属性支持的三种ISO格式
datetime 值不是任意字符串，必须严格匹配 HTML5 规范定义的子集。主流支持以下三类：
立即学习“前端免费学习笔记（深入）”；
-
日期型：
YYYY-MM-DD（如2024-03-15），用于仅需日期的场景（发布日期、截止日） -
日期时间型：
YYYY-MM-DDThh:mm:ss±hh:mm（如2024-03-15T10:22:18+08:00），含时区，适合精确到秒的时间戳 -
周/年/月型：
YYYY-Www（第几周）、YYYY-MM（年月），适用于周期性事件（每周例会、2024年Q1报告）
注意：T 和 ± 是字面量，不可省略；时区若为本地时间且无明确偏移，建议显式写 +00:00 或使用 Z（UTC）。
time标签不负责格式化显示，样式由CSS控制
<time> 是纯语义容器，它不会自动把 2024-03-15 渲染成“2024年3月15日”，也不提供本地化格式转换。显示效果完全取决于你写的 CSS 或 JS。
常见误操作：
- 以为加了
<time>就能自动汉化日期 —— 实际仍需 JS（如Intl.DateTimeFormat）或后端处理 - 用
<time>替代<span class="date">却不加datetime，失去语义价值 - 在
datetime里塞冗余信息（如datetime="2024-03-15 (周五)"），违反机器可读原则
推荐搭配方式（保留语义 + 可读显示）：
<time datetime="2024-03-15">3月15日（周五）</time>
SEO与无障碍支持依赖完整结构
搜索引擎和读屏软件（如 NVDA、VoiceOver）会提取 datetime 值做时间排序或播报。但前提是：
-
datetime值真实有效（不能是占位符如XXXX-XX-XX） - 文本内容与
datetime在逻辑上一致（例如datetime="2024-03-15"对应 “3月15日”，而非 “下周三”） - 避免嵌套其他时间相关元素（如不要再在
<time>里套<time>）
动态生成时尤其要注意：服务端渲染需确保 datetime 是静态计算出的真实时间值；客户端 JS 注入时，务必同步设置 datetime 属性，不能只改 innerText。
