HTML5无原生标签，需用语义化标签搭骨架并依赖JS库（如vis-timeline）或手写DOM实现；使用时须注意容器高度、数据格式、HTML转义及移动端touch-action等关键细节。
时间轴不是原生 HTML5 标签，得靠 JS 库或手写 DOM 控制
HTML5 本身没有 、）搭骨架，再靠 JavaScript 渲染交互逻辑和动画效果。
常见错误是直接写
- 推荐起步用轻量库：
vis-timeline（支持拖拽、缩放、多组数据）、chronology.js（专注线性时间流）或timeline-js（适合图文混排） - 若需完全自控样式和行为，用
document.createElement('div')+CSS transforms手动布局节点，配合IntersectionObserver做可视区懒加载 - 注意：所有时间值必须转成
Date对象或 ISO 字符串（如"2024-03-15T09:30:00"），传错格式会导致NaN或空白条目
用 vis-timeline 插入时间轴的最小可行步骤
vis-timeline 是目前兼容性好、文档全、不依赖 jQuery 的主流选择。插入流程不复杂，但有三个硬性前提不能漏：
- 引入 CSS 和 JS：
和 - 准备一个带
id的空容器：，且该元素必须有明确高度（如style="height: 400px;"），否则渲染失败 - 数据格式必须是数组，每项含
id、start（必填）、end（可选）、content（HTML 字符串或文本）
示例代码片段：
立即学习“前端免费学习笔记（深入）”；
const container = document.getElementById('timeline');
const items = new vis.DataSet([
{ id: 1, content: '启动项目', start: '2024-01-01' },
{ id: 2, content: '完成设计稿', start: '2024-02-15', end: '2024-02-20' }
]);
const timeline = new vis.Timeline(container, items);
时间轴内容里嵌 HTML 标签会被转义？要开 template 选项
默认情况下，vis-timeline 会把 content 当纯文本处理，写 content: '重点' 显示出来就是字面量，不会加粗。
想让内容支持 HTML，必须启用模板函数，并在初始化时传入 template 配置：
- 定义模板：
const itemTemplate = (item, element, data) => item.content;—— 这里直接返回原始字符串，不转义 - 初始化时加配置：
new vis.Timeline(container, items, { template: itemTemplate }) - 注意：模板函数里不要直接操作
element.innerHTML，否则可能破坏内部事件绑定；如需动态渲染，建议用item.className加 CSS 控制样式
移动端时间轴滑不动？检查 CSS touch-action 和容器 overflow
在 iOS Safari 或安卓 Chrome 上，时间轴常出现“点得中、拖不了”的问题，本质是浏览器阻止了默认触摸行为。
- 给时间轴容器加 CSS：
touch-action: pan-x;（允许水平拖动），禁用touch-action: none或未声明该属性 - 确保父级容器没设
overflow: hidden，否则滚动区域被截断 - 如果用了
position: fixed或transform: translateZ(0)，某些旧版 WebView 会禁用 touch 事件，临时去掉验证是否是此原因 - 性能敏感场景下，避免在
onMove回调里频繁更新 DOM，改用requestAnimationFrame节流
时间轴真正的难点不在“画出来”，而在“时间粒度对齐”“跨时区处理”“服务端分页加载”——这些往往在 demo 里看不到，上线后才冒头。
