time 元素的 datetime 属性必须使用 w3c 标准机器可读格式，如 yyyy-mm-dd 或 yyyy-mm-ddthh:mm:ss±hh:mm，不可用“昨天”“10/5/2024”等非标准写法，且仅限表示真实时间信息，不得用于版本号、编号等非时间内容。
time 元素的 datetime 属性必须是合法的机器可读格式
浏览器和搜索引擎依赖 datetime 属性值做解析，不是随便写个“2024年10月5日”或“昨天”就能被识别的。它必须符合 W3C 定义的日期时间格式，否则语义化就失效了。
常见错误现象：<time datetime="2024-10-05">昨天</time> —— 这里显示文本是“昨天”，但 datetime 值却是静态日期，导致机器无法推断相对性；更糟的是写成 datetime="10/5/2024" 或 datetime="2024年10月5日"，这些都不被标准支持。
-
datetime为完整时间：用YYYY-MM-DDThh:mm:ss±hh:mm（如2024-10-05T14:30:00+08:00） - 仅日期：用
YYYY-MM-DD（如2024-10-05） - 仅时间（无日期）：用
hh:mm或hh:mm:ss（如14:30），但注意——这种用法在可访问性和 SEO 中价值极低，不推荐单独使用 - 时区尽量显式声明，避免依赖用户本地时区推测；
+00:00表示 UTC，+08:00是北京时间
显示文本和 datetime 值不必一致，但语义需对齐
很多人误以为 <time></time> 只是用来“美化日期显示”，其实它的核心作用是分离「人类可读」和「机器可读」两层信息。你可以自由控制显示内容，只要 datetime 值准确、无歧义。
使用场景举例：文章发布时间写成“3小时前”，但 datetime 必须是绝对时间戳；活动倒计时页显示“还剩2天”，背后仍得填真实截止日期。
- 正确：
<time datetime="2024-10-05T09:00:00+08:00">本周六上午9点</time> - 也正确：
<time datetime="2024-10-05T09:00:00+08:00">距今还有 2 天</time>（前提是页面 JS 动态更新该文本） - 错误：
<time datetime="2024-10-05">距今还有 2 天</time>—— 静态datetime和动态语义文本矛盾，机器无法验证
不要用 time 包裹非时间类内容，比如纯数字或版本号
<time></time> 是严格语义化标签，只适用于表示时间点、时间段或持续时间。把它滥用在版本号（如 v2.3.1）、编号（如 #123）、价格（¥99）上，不仅无效，还会干扰屏幕阅读器和结构化数据提取。
常见错误现象：SEO 工具报出“time 元素包含非时间内容”，Google Rich Results Test 拒绝识别事件结构化数据。
- ✅ 正确用途：发布日期、更新时间、会议开始/结束、视频时长（用
PT1H23M格式） - ❌ 错误用途：
<time datetime="2.3.1">v2.3.1</time>、<time datetime="123">#123</time> - 替代方案：版本号用
<span></span>+aria-label（如需要辅助说明），编号直接用普通内联元素
搭配 meta 或 script 生成结构化数据时，time 的 datetime 是唯一可信源
如果你在页面中同时用了 <time></time> 和 JSON-LD，Google 等搜索引擎会优先信任 <time datetime></time> 的值来填充事件的 startDate、endDate 字段。一旦这里出错，整个富媒体搜索结果可能失败。
性能与兼容性影响：现代浏览器对 <time></time> 几乎零渲染开销，但旧版 IE 完全忽略该标签（仅回退为普通内联元素）。无需 polyfill，但别指望它触发样式或行为。
- 确保 JSON-LD 中的
"startDate"和最近一个<time itemprop="startDate"></time>的datetime值完全一致（字符级相同） - 避免在
<time></time>上加id后用 JS 反向读取并塞进 JSON-LD —— 容易因执行时机导致取到空值或旧值 - 多时间点场景（如活动起止）：分别用两个
<time></time>，各自带对应itemprop，不要合并成一个
datetime 当作“可选装饰”来处理——它不是锦上添花，而是语义化的锚点。一旦填错，所有依赖它的功能（无障碍、SEO、自动化摘要）都会静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
