前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库time element datetime 机器可读
HTML语义与文档

time 的 datetime 怎样把“明天下午”变成机器可读时间?

<time> 的文字给人看,datetime 提供机器可解析的日期或时间。显示“10 月 9 日下午 3 点”时,可用标准格式记录实际日期和时刻;跨时区场景还要明确偏移。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

人读文本与机器值分开

  1. <time>标记文中的日期或时间
  2. datetime提供可解析的标准时间值
  3. 时区偏移说明时刻对应哪个时间基准

没有时区的本地时间不能直接当成全球唯一瞬间使用。

核心回答

先记住这个答案

<time> 用于标记日期、时间或持续时间,元素里的文本可以写读者熟悉的说法,datetime 则给机器一个明确格式。例如页面显示“周五下午三点”,属性可以记录具体年月日和时间。若内容面向多个时区,仅写本地 15:00 还不能唯一确定一个瞬间,需要按业务约定补时区或偏移。

  • 可见文本可以自然表达时间
  • datetime 提供标准格式值
  • 相对时间要绑定实际日期
  • 跨时区约定应明确偏移

活动页面显示自然语言

活动列表希望标题简洁,用户看见“10 月 9 日 15:00”,机器仍能读到完整日期。用 datetime 避免让爬虫或脚本从不完整的可见文字猜年份。

可见文本与机器值HTML
<p>直播开始:
  <time datetime="2026-10-09T15:00:00+08:00">
    10 月 9 日 15:00(北京时间)
  </time>
</p>

属性里的 +08:00 表示这个时间与 UTC 的偏移,文字也写明面向读者的时区。可见文本和属性必须指向同一时刻,不能展示周五却在属性里写另一天。 活动若会因用户时区不同而显示不同本地时间,应在渲染时同步更新文本与 datetime。不要只换页面文字,留下旧的机器值。 例如同一场直播在北京时间是 10 月 9 日 15:00,在另一个时区可能已是当天凌晨或前一天。先保存一个带时区的确定时刻,再针对访问者格式化可见文字;datetime 仍应指向那一时刻。这样分享链接、缓存页面和客户端切换语言时,机器值不会与屏幕文字各说各话。

相对时间要有确定日期

“明天上午”对今天访问的用户和下周访问的用户不是同一天。若页面内容会缓存或长期保存,把这个相对词写在可见文本里时,datetime 应有实际日期,并在日期变化时更新。

datetime 不是任意自然语言字段。要遵循元素允许的日期、时间或持续时间格式;缺少年份或时区是否可接受,取决于要表达的是本地日历值还是全球唯一时刻。

持续时间也是 <time> 的用途,例如文章标注“阅读约 5 分钟”时,可写成 <time datetime="PT5M">5 分钟</time>。这与“2026 年 10 月 9 日”不是同一种值,不能把五分钟写成时钟时间 00:05,否则机器会按另一种含义理解。

改期时别只改页面标题。活动数据若同时进入结构化数据、邮件和页面 <time>,应从同一个确定时间生成各处展示;否则用户看到的是新时间,机器读取的 datetime 却还留着旧值。

回答前,多想一步

容易答错的地方

只在 datetime 里写“明天”
相对词无法作为稳定的机器时间值。应写明确日期或时间。
可见文本与属性不一致
读者和机器会得到不同信息,尤其活动改期后容易出现这个问题。
试着用自己的话回答

面试官还会怎么问?

只有日期可以用 <time> 吗?

可以,datetime 可写标准日期形式,例如 2026-10-09。

什么时候必须考虑时区?

当内容代表跨地域共享的确切时刻时,要记录时区或偏移;仅表示本地日历日期则不一定需要。

<time> 能自动本地化展示吗?

不能。元素提供语义和值,按用户地区格式化文本仍需业务或渲染逻辑完成。

从一道题,走向一组知识

把知识连起来

语义与文档

视频的 subtitles 和 captions 轨道有什么区别?

字幕文件按时间码显示文字,<time datetime> 标记页面中的日期或持续时间;两者格式不能混用。

表单与输入

form 的 accept-charset 会改变什么?不写会怎样?

若表单收集活动日期,accept-charset 管提交字节编码,<time datetime> 管页面时间的机器值。

参考资料

  • HTML:语义与文档参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 活动页面显示自然语言
  3. 相对时间要有确定日期
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑