标签需配合javascript动态更新textcontent和datetime属性才能实现实时时间显示，仅写死datetime属性无效；datetime必须为iso 8601格式，且应与显示文本语义一致。
time 标签本身不支持动态更新
直接写 <time datetime="2024-05-20">今天</time>，浏览器只渲染静态时间戳，不会随秒针跳动。它只是语义化容器，不是时钟组件。
想让页面显示“实时时间”，必须用 JavaScript 主动修改 textContent 或 innerText，<time></time> 标签只是个合适的宿主——语义对、可被屏幕阅读器识别、能被搜索引擎理解为时间数据。
- 错误做法：只靠 html 写死
datetime属性，以为加了这个属性就能自动刷新 - 正确思路：HTML 提供结构 + js 负责更新内容 + 同步维护
datetime属性值（比如用new Date().toISOString()） - 注意：别把
datetime写成中文格式（如"2024年5月20日"），它必须是 ISO 8601 格式（"2024-05-20T14:30:00Z"），否则语义失效
怎么用 JavaScript 更新 time 元素内容
最简方案就是定时器 + document.querySelector，但要注意更新频率和 dom 操作开销。
示例代码：
立即学习“前端免费学习笔记（深入）”；
const $time = document.querySelector('time'); function updateClock() { const now = new Date(); $time.textContent = now.toLocaleTimeString('zh-CN'); // 显示“14:30:22” $time.setAttribute('datetime', now.toISOString()); // 同步 ISO 时间 } updateClock(); setInterval(updateClock, 1000);- 别用
innerHTML更新<time></time>，纯文本用textContent更安全、更快 - 如果页面有多个
<time></time>需要独立更新（比如不同地区时间），得用 class 或 data-* 属性区分，不能全靠querySelector('time') -
setInterval设 1000ms 是权衡：设太短（如 100ms）对低端设备压力大；设太长（如 5000ms）看起来“卡顿”
datetime 属性到底要不要同步更新
要，但取决于使用场景。不更新它，<time></time> 的语义价值就只剩视觉标签了。
- seo 或结构化数据（如 Google 富媒体搜索）依赖
datetime值，静态值会让机器认为这是“过去某个固定时刻”，而非“当前实时时间” - 辅助技术（读屏软件）可能朗读
datetime属性，而不是显示的中文文本——所以两者语义需一致 - 如果只是做 ui 装饰（比如右上角一个跳动的时钟），其实不用
<time></time>，用<span></span>更轻量；用了<time></time>就该认真对待它的语义
兼容性与 SSR 场景下的坑
服务端渲染（如 Next.js、Nuxt）里，<time></time> 初始值只能是服务器时间，客户端 JS 加载后才开始更新——用户会看到“闪动”（从服务端时间跳到本地时间）。
- 解决方法：JS 初始化时先取
Date.now()算出时间差，再补偿渲染，避免跳变 - 旧版 IE 不支持
<time></time>标签（IE9+ 开始支持），但不影响显示，只是没语义；如果项目还需兼容 IE8，建议 fallback 用<span role="time"></span> - 不要在
datetime里塞毫秒级精度（如"2024-05-20T14:30:22.123Z"），多数场景秒级足够，且部分解析器会截断
实际用的时候，最容易漏的是同步 datetime 属性——人眼只盯着显示文字，机器却只认那个属性值。