应使用<time datetime="ISO8601格式">预计...送达</time>标记预计送达时间，datetime属性必须为合法机器可读时间（如2025-04-05T14:00+08:00），文本内容保留自然语言，不可省略“预计”等语义词，以兼顾可访问性、SEO与业务准确性。
怎么用 time 标签标记预计送达时间
浏览器本身不渲染“预计送达”这种业务语义，但 <time> 标签能告诉机器这个文本代表一个具体时间点或范围，对可访问性、SEO 和未来自动化处理有实际价值。它不是用来格式化显示的，而是用来标注含义的。
常见错误是把 <time> 当成样式标签，写成 <time>预计明天14:00送达</time> —— 这样机器完全无法解析出时间，datetime 属性才是关键。
-
datetime必须是合法的机器可读格式（如2025-04-05T14:00或2025-04-05），不能是“明天”“下午两点”这类自然语言 - 如果送达是一个时间段（比如“14:00–16:00”），
datetime只能写起始时间；完整范围得靠文本内容表达，或用两个<time>分别标注 - 用户看到的仍是你的原文，比如
<time datetime="2025-04-05T14:00">预计明天14:00送达</time>，显示效果和普通<span>无异
JavaScript 动态计算并更新预计送达时间文本
静态写死 datetime 值在订单页可行，但物流页常需根据下单时间 + 配送时长实时算出预估时间。这时得靠 JS 计算后填入 datetime 和可视文本。
容易踩的坑是忽略时区：JS 的 Date 默认用本地时区，但服务器时间、物流系统时间往往按 UTC 或固定时区（如东八区）提供，直接 new Date() 加减小时会出错。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
Intl.DateTimeFormat或date-fns的addHours+formatISO，避免手撕毫秒数 -
datetime属性值必须是 ISO 8601 格式（含时区偏移），例如2025-04-05T14:00+08:00，否则屏幕阅读器可能误读 - 更新 DOM 时，只改
datetime属性和文本内容，不要反复重建整个<time>元素，否则会中断焦点或触发不必要的 reflow
示例：
const now = new Date(); // 假设服务端已告知使用东八区
const eta = new Date(now.getTime() + 48 * 60 * 60 * 1000); // 加48小时
const iso = eta.toISOString().slice(0, 16).replace('T', ' '); // 简单截取，实际建议用 formatISO
document.querySelector('time').setAttribute('datetime', eta.toISOString());
document.querySelector('time').textContent = `预计${iso}送达`;
“预计送达时间”在不同场景下的 HTML 写法差异
同一句话，在订单确认页、物流跟踪页、邮件模板里，结构意图不同，HTML 处理方式也该变。
比如邮件里用 HTML，<time> 标签在多数客户端（Outlook、Apple Mail）会被忽略甚至破坏布局，这时候语义让位于兼容性。
- Web 页面（可控环境）：用
<time datetime="...">预计...</time>，配合 CSS 控制显示样式 - 邮件模板：放弃
<time>，改用<span data-datetime="..."></span>保留机器可读性，同时保证渲染稳定 - 需要强调“预计”二字的不确定性：可在文本中显式写出“预计”，或加
aria-label，例如<time datetime="..." aria-label="预计送达时间：2025-04-05T14:00">2025-04-05 14:00</time>
CSS 控制“预计送达”文本的视觉提示
<time> 标签默认无样式，但你可以用属性选择器给它加视觉反馈，比如弱化“预计”二字、高亮具体时间部分。
注意：不要只靠颜色区分“预计”和“送达时间”，色觉障碍用户可能无法识别。更稳妥的是结合字体粗细、间距或图标。
- 用
time[datetime]选择器确保只作用于有语义的时间元素，避免误伤其他<time> - 如果文本中混有“预计”“左右”“前”等模糊词，可用
span包裹具体时间再单独设置font-weight: bold - 避免用
title属性做时间提示（如title="2025-04-05T14:00"），移动端不友好，且与datetime语义重复
时间语义的准确性和上下文强相关——同一个 datetime 值，在物流系统里可能是承诺时间，在客服话术里可能只是参考值。别只盯着格式对不对，先想清楚这行字到底要回答用户什么问题。
