使用HTML time标签结合JavaScript可语义化且动态地显示时间。首先通过<time>标签定义机器可读的日期时间，如<time datetime="2024-04-05">四月五日</time>，再利用JavaScript获取当前时间new Date()，格式化后更新到页面元素，并通过setInterval每秒刷新。示例中将当前时间的文本和ISO格式分别赋值给textContent和dateTime属性，确保内容对用户友好且对搜索引擎和辅助技术可识别。建议始终设置datetime属性以提升可访问性和SEO，同时注意时间格式标准化与定时器的合理管理，实现既规范又实用的时间展示方案。
在网页中显示日期和时间是常见需求，HTML 提供了 time 标签来语义化地表示时间，而 JavaScript 可用于动态更新当前时间。下面介绍如何结合使用它们。
使用 HTML time 标签标记时间
time 标签用于定义日期或时间（或两者），有助于搜索引擎和辅助技术理解内容中的时间信息。
基本语法：<time datetime="2024-04-05">2024年4月5日</time>
其中 datetime 属性提供机器可读的时间格式，内容部分可以是用户友好的显示格式。
立即学习“Java免费学习笔记（深入）”；
常见用法示例：- 仅日期：<time datetime="2024-04-05">四月五日</time>
- 带时间：<time datetime="2024-04-05T13:30">下午1:30</time>
- 仅时间：<time datetime="14:00">两点整</time>
- 带时区：<time datetime="2024-04-05T10:00+08:00">上午10点（北京时间）</time>
用 JavaScript 动态显示当前时间
静态的 time 标签适合固定时间，若要实时显示当前时间，需借助 JavaScript 定期更新。
- 在 HTML 中预留一个元素（如 span 或 time 标签）用于显示时间
- 使用 JavaScript 获取当前日期时间并格式化
- 通过 setInterval 每秒更新一次显示
示例代码：
<p>当前时间：
<time id="current-time" datetime=""></time>
</p>
<script>
function updateDateTime() {
const now = new Date();
const formattedTime = now.toLocaleTimeString();
const isoTime = now.toISOString();
document.getElementById('current-time').textContent = formattedTime;
document.getElementById('current-time').dateTime = isoTime;
}
updateDateTime(); // 立即执行一次
setInterval(updateDateTime, 1000); // 每秒更新
</script>
增强可访问性与SEO
结合 time 标签和 JavaScript 不仅让页面美观，还能提升可访问性和搜索引擎识别能力。
- 为屏幕阅读器用户提供清晰的时间语义
- datetime 属性支持结构化数据提取
- 动态更新的内容仍保持语义正确
建议始终填写 datetime 属性，即使内容已人工格式化。
基本上就这些。HTML 的 time 标签让时间更有意义，JavaScript 让它动起来。两者结合，既规范又实用。不复杂但容易忽略细节，比如格式标准化和定时器管理。
