标签仅用于语义明确、需机器识别的具体时间点或持续时长,必须搭配符合iso 8601规范的datetime属性,否则破坏可访问性或触发校验警告。

<time></time> 标签不是用来“表示时间”的万能容器,它只在语义明确、需被机器识别(比如搜索引擎、屏幕阅读器、日历应用)的时间场景下才该用。盲目套用反而破坏可访问性或触发校验警告。
什么时候必须用 <time></time> 标签
仅当内容是**具体可解析的时间点或持续时长**,且你希望浏览器或爬虫准确理解其含义:
- 发布日期:
<time datetime="2024-05-20">2024年5月20日</time> - 会议开始时间:
<time datetime="2024-05-20T14:00">下午2点</time> - 视频时长:
<time datetime="PT42M30S">42分30秒</time>(注意:必须用 ISO 8601 持续时间格式)
如果只是“营业时间:9:00–18:00”,没绑定具体日期,<time></time> 不适用——用 <span></span> 或普通文本更合适。
datetime 属性的格式不能靠猜
datetime 是唯一合法属性,且值必须严格符合规范,否则会被忽略或报错:
- 日期:用
YYYY-MM-DD,如2024-05-20(2024/05/20或2024年5月20日无效) - 日期+时间:用
YYYY-MM-DDThh:mm或更完整形式,T不能省略,时区建议显式写出(如Z或+08:00) - 持续时间:必须以
PT开头,如PT1H30M(1小时30分),P1D(1天),PT30S(30秒) - 绝对不要写
datetime="下午2点"或datetime="昨天"—— 这些无法被解析
常见错误:用了 <time></time> 却没加 datetime
HTML5 要求:如果 <time></time> 元素包含人类可读的时间文本(比如“五月二十号”),就必须提供 datetime 属性来给出机器可读版本。否则会触发 HTML 验证警告,部分辅助技术可能跳过该元素。
错误示例:<time>五月二十号</time>(缺失 datetime)
正确写法:<time datetime="2024-05-20">五月二十号</time>
例外:如果标签内是纯机器格式(如 <time datetime="2024-05-20">2024-05-20</time>),且两者完全一致,datetime 可省略 —— 但不推荐省,易维护性差。
真正难的不是写对格式,而是判断“这个时间值是否值得暴露给机器”。很多页面把“更新于:刚刚”“预计送达:约30分钟”硬套 <time></time>,结果 datetime 只能填个固定时间或留空,反而造成语义污染。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











