最稳结构是语义化标签组合：用标记时间点、表达任务顺序、CSS Grid控制横向时间比例；避免table模拟或absolute硬堆，确保datetime属性、minmax列宽、内容截断及IE11 Flex降级。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
HTML 甘特图用什么结构最稳
纯 HTML 不适合画带刻度的甘特图，但能搭出可读、可维护、语义清晰的时间线占位结构——关键是别用 <table> 模拟时间轴，也别靠一堆 <code><div> + <code>position: absolute 硬堆日期。稳妥做法是用语义化标签组合：<time></time> 标记时间点，<dl></dl> 或 <ol></ol> 表达任务顺序，再用 CSS Grid 控制横向时间比例。
-
<time datetime="2024-03-15">3月15日</time>必须写datetime属性，否则无法被辅助工具识别，也不方便后续 JS 解析 - 任务项用
<ol></ol>而非<ul></ul>，因为时间线天然有序，<ol></ol>的隐式序号可作视觉锚点（哪怕 CSS 关掉） - 避免把所有时间单位（天/周/月）塞进 class 名，比如
class="day-7"—— 这会让 CSS 难以扩展，改周期就得批量修 class
CSS Grid 实现等宽时间槽的坑
想让“第1周”“第2周”在横向上等宽，直接写 grid-template-columns: repeat(12, 1fr) 看似合理，实际会因内容撑开列宽，尤其当某任务标题很长时，整行错位。真正可控的方式是固定列数 + 强制最小宽度 + 内容截断。
- 用
minmax(120px, 1fr)替代纯1fr，防止窄屏下时间槽压缩到看不见 - 对任务标题加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则换行会破坏 Grid 行高一致性 - 别给
<time></time>元素设display: block后又居中——它默认是 inline，强行 block 容易引发基线对齐问题，改用text-align: center更安全
如何让“跨多周任务”在 HTML 中自然表达
静态甘特图里最麻烦的是横跨多个时间单元的任务条。HTML 没有原生“跨列”语义，硬用 colspan 会破坏 Grid 布局；用 width 百分比又难对齐真实日期。解法是放弃“一个任务一个元素”，改用“一个时间槽一个容器”，内部判断是否属于该任务。
- 每个时间槽（如“第3周”）是一个
<li>，里面放<span class="task" data-task-id="t2"></span> - JS 初始化时遍历所有
data-task-id，查其起止时间，再给对应时间槽的<span></span>加class="active"和style="grid-column-start: 3; grid-column-end: 6;" - 纯静态场景下，可手动写
style="grid-column: 3 / 6;"，但必须确保数字和实际列索引严格对应，错一位就偏移整段
IE11 兼容时 Grid 时间轴的降级策略
如果项目仍需支持 IE11，display: grid 会失效，但不必整个重写为 float 布局。可以用 @supports 分层，对不支持 Grid 的环境启用 Flex 降级，同时保留结构语义。
立即学习“前端免费学习笔记（深入）”；
- 写两套样式：
.timeline { display: grid; }和@supports not (display: grid) { .timeline { display: flex; flex-wrap: wrap; } } - Flex 下时间槽用
flex: 0 0 120px固定宽度，而非试图模拟等分，否则 IE11 的flex: 1行为不可控 - 千万别在 IE11 下尝试用
display: -ms-grid—— 微软早已废弃该语法，现代构建工具（如 PostCSS）也不再转译
日期计算逻辑永远别信浏览器自动解析 new Date("2024-03")，不同引擎对缺省日/时区处理差异极大；静态图虽不交互，但若后续加 JS 扩展，这个坑会在某天突然炸开。
