标签必须配合 datetime 属性使用，值需符合 iso 8601 格式（如 2024-05-20 或 2024-05-20t14:30:00+08:00），仅包裹文本无效；推荐用于标注博客“最后修改时间”或“发布日期”，并可通过 aria-label 区分语义，服务端生成时须确保时区明确、格式规范。
<time></time> 标签是 HTML5 中专门用于标记机器可读时间信息的语义化元素。在博客文章中，用它包裹“最后修改时间”不仅提升可访问性，还能帮助搜索引擎、日历工具或阅读器准确识别时间含义。
基本用法：必须提供 datetime 属性
仅用 <time></time> 包裹文字（如 <time>2024年5月20日</time>）是无效的——它缺乏标准化的时间值，无法被程序解析。正确做法是通过 datetime 属性提供符合 ISO 8601 格式 的时间字符串：
- 推荐写法（含时区，最严谨）：
<time datetime="2024-05-20T14:30:00+08:00">2024年5月20日 14:30</time> - 简化写法（仅日期，适合不强调具体时刻的场景）：
<time datetime="2024-05-20">2024年5月20日</time> - 避免写法：
<time>上周三更新</time>（无datetime，且内容非规范时间）
在博客文章中合理标注“最后修改时间”
通常放在文章元信息区域（如标题下方或文末），并明确说明其含义，例如：
<p>最后更新于：<time datetime="2024-05-20T14:30:00+08:00">2024年5月20日 14:30</time></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>- 若使用英文界面，可保持
datetime不变，仅改变显示文本：<time datetime="2024-05-20T14:30:00+08:00">Updated on May 20, 2024</time> - 不要与发布日期混淆；如需同时展示，建议分别用两个
<time></time>元素，并通过pubdate（已废弃）或上下文区分——现代做法靠属性名或 ARIA 标注，例如：<time datetime="2024-04-10" aria-label="Published on April 10, 2024">发布于 2024-04-10</time><time datetime="2024-05-20" aria-label="Last modified on May 20, 2024">更新于 2024-05-20</time>
动态生成时注意时区与格式一致性
服务端渲染（如 PHP、Node.js）或静态站点生成器（如 Hugo、Jekyll）输出 datetime 值时，应确保：
- 使用协调世界时（UTC）或本地时区并显式标注偏移（如
+08:00），避免歧义 - 避免用 JavaScript 动态插入
datetime值（影响 SEO 和离线阅读），优先服务端生成 - 中文站点常见错误：用
"2024/05/20"或"2024年5月20日"直接填入datetime—— 这不符合标准，会导致解析失败
辅助理解：浏览器不会自动美化 time 标签
<time></time> 是纯语义标签，浏览器默认不改变其样式或行为。如需视觉优化，可用 CSS 控制外观，例如：
也可结合 title 属性增强提示：<time datetime="2024-05-20T14:30:00+08:00" title="最后修改时间：2024年5月20日 14:30">2024-05-20</time>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
