HTML5通过time标签和列表结构实现时间线。1. time标签定义机器可读的日期时间，提升可访问性与SEO；2. 使用ul/li组织时间顺序事件，构建清晰结构；3. CSS添加样式，如连接线与圆点，形成视觉时间轴；4. 结合JavaScript增强交互，适用于简历、项目展示等场景。
HTML5本身没有专门的“时间线”标签，但可以通过语义化标签结合CSS和JavaScript来构建美观且结构清晰的时间线。常用标签如 time、section、article 和 ul/li 能帮助组织时间顺序内容，尤其是 time 标签，在表示具体时间时非常关键。
1. time 标签：定义时间与日期
time 是HTML5新增的语义化标签，用于标记机器可读的时间或日期，对搜索引擎和辅助工具友好。
基本语法：
<time datetime="2024-05-20">2024年5月20日</time><br/><time datetime="14:30">下午2:30</time><br/><time datetime="2024-05-20T14:30:00">2024年5月20日下午2:30</time>
说明：
- datetime 属性提供标准格式的时间，用户看不到，但程序可识别。
- 显示文本可以是自然语言形式，便于阅读。
2. 使用列表构建时间线结构
时间线通常是按时间顺序排列的事件集合，使用 ul（无序列表）或 ol（有序列表）最为合适。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<ul class="timeline">
<li>
<time datetime="2023-01-15">2023年1月</time>
<p>项目启动</p>
</li>
<li>
<time datetime="2023-06-20">2023年6月</time>
<p>完成原型设计</p>
</li>
<li>
<time datetime="2024-01-10">2024年1月</time>
<p>正式上线</p>
</li>
</ul>3. 配合CSS美化时间线样式
通过CSS可以将列表转化为垂直或水平时间线，添加连接线、图标等视觉元素。
简单CSS示例：
.timeline {
position: relative;
padding-left: 30px;
list-style: none;
}
.timeline::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background: #007acc;
}
.timeline li {
margin-bottom: 20px;
position: relative;
}
.timeline li::before {
content: '';
position: absolute;
left: -28px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
border: 2px solid #007acc;
}这样就能呈现一条带圆点和竖线的典型垂直时间线。
4. 实际应用建议
在博客、简历、项目展示中，时间线常用于展示经历或里程碑。推荐做法：
- 始终使用 time 标签包裹时间，提升可访问性与SEO
- 用 data- 属性存储额外信息（如地点、状态）
- 配合JavaScript实现展开/收起、动画滚动等交互效果
- 确保移动端适配，避免时间线过宽或重叠
基本上就这些。HTML5虽无专用时间线标签，但通过语义化结构 + CSS样式即可实现专业效果。关键是合理使用 time 和列表标签，保持代码清晰可维护。
