HTML5中处理日期格式的纪元时间，核心是使用<time>标签配合datetime属性，同时需要遵循纪元时间的规范表示规则，确保时间数据既能被浏览器正确解析，也能被搜索引擎和辅助工具识别。
纪元时间的基本概念
纪元时间也常被称为Unix时间戳，它的定义是从1970年1月1日00:00:00 UTC开始经过的毫秒数，是一个纯数字的时间表示形式，不包含时区、日期格式等额外信息，在计算机系统中常用于时间存储和传输。
在HTML5的场景下，我们既需要展示给用户可读的日期格式，也需要保留机器可解析的纪元时间数据，这时候就需要结合HTML5的语义化标签来实现。
HTML5中表示纪元时间的标准写法
HTML5新增的<time>标签就是专门用于定义日期或时间内容的，它的datetime属性可以接收多种时间格式，其中就包含纪元时间的表示方式。
基础语法规则
<time>标签的datetime属性表示纪元时间时，格式为纯数字字符串，不需要添加额外的符号，标签内部可以放置用户可见的格式化日期内容。
示例代码如下：
<!-- 表示2024年1月1日0点0分0秒的纪元时间 --> <time datetime="1704067200000">2024-01-01 00:00:00</time>
注意事项
datetime属性中的纪元时间必须是字符串形式的数字，不能包含空格、字母或其他符号，否则浏览器无法正确识别为纪元时间。- 标签内部的内容可以是任意用户可读的日期格式，比如"2024年1月1日"、"01/01/2024"等，不影响机器对纪元时间的解析。
- 纪元时间默认是UTC时区的时间，如果需要表示特定时区的时间，需要在内部展示内容中说明，或者在
datetime属性中使用带时区偏移的格式，但此时就不再是纯纪元时间格式了。
JavaScript中生成纪元时间并嵌入HTML5
实际开发中，纪元时间往往是通过JavaScript动态生成的，然后插入到<time>标签中，下面是常见的实现方式。
获取当前时间的纪元时间
JavaScript中可以通过Date.now()方法直接获取当前时间的纪元时间，示例代码如下：
// 获取当前时间的纪元时间
const currentTimestamp = Date.now();
// 将纪元时间转换为可读日期
const currentDate = new Date(currentTimestamp);
// 格式化日期为YYYY-MM-DD HH:mm:ss格式
const formatDate = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 动态生成time标签
const timeElement = document.createElement('time');
timeElement.setAttribute('datetime', currentTimestamp.toString());
timeElement.textContent = formatDate(currentDate);
// 将标签插入到页面中
document.body.appendChild(timeElement);
指定日期转换为纪元时间
如果需要将指定的日期转换为纪元时间，可以使用Date对象的构造函数，示例代码如下：
// 将指定日期转换为纪元时间
const targetDate = new Date('2024-06-01 12:00:00');
const targetTimestamp = targetDate.getTime();
// 生成对应的time标签
const targetTimeElement = document.createElement('time');
targetTimeElement.setAttribute('datetime', targetTimestamp.toString());
targetTimeElement.textContent = '2024年6月1日 12:00:00';
console.log(targetTimeElement.outerHTML);
// 输出：<time datetime="1717200000000">2024年6月1日 12:00:00</time>
常见错误写法示例
下面是一些不符合规范的纪元时间写法，开发者需要避免：
| 错误写法 | 错误原因 |
|---|---|
| <time datetime="1704067200000ms">2024-01-01</time> | datetime属性中添加了单位后缀，浏览器无法识别为纪元时间 |
| <time datetime="1,704,067,200,000">2024-01-01</time> | 数字中包含了逗号分隔符，不符合纯数字字符串的要求 |
| <time>1704067200000</time> | 没有设置datetime属性，标签内部仅放纪元数字，语义化不足，机器无法区分是普通数字还是时间 |
总结
HTML5中表示日期格式的纪元时间，核心是使用<time>标签，将纪元时间作为字符串赋值给datetime属性，标签内部放置用户可读的格式化日期内容。动态生成时可以通过JavaScript的Date相关方法获取或转换纪元时间，避免使用带符号、带单位的错误格式。这种写法既符合HTML5的语义化规范，也能保证时间数据被各类工具正确解析。