纯静态周历可用html+css实现：用table结构，th标记星期，td内嵌time和ul事件列表，配合table-layout:fixed与等宽列控制布局，语义化标签确保无障碍与打印友好。
用纯 HTML + CSS 实现周历，别碰 JavaScript 就能跑起来
纯静态周历完全可行，关键是把“周一到周日”和“日期+事件”拆成两层结构：表格行控制星期，单元格内用 <time></time> 标记日期、<ul></ul> 列事件。不需要 JS 渲染，也不依赖任何框架——只要知道当前周的起止日期（比如 2024-06-10 到 2024-06-16），就能手写或服务端生成。
常见错误是硬编码 <tr> 套死七天，结果跨月时日期错位；或者把事件塞进 <code>data-* 属性里却忘了显式渲染——HTML 本身不解析这些属性，必须靠 JS 才能读取，这就违背了“纯静态”前提。
- 用
<table> 是最稳妥选择，语义清晰、屏幕阅读器友好、打印样式稳定 <li>表头用 <code><th scope="col"> 明确标识星期几，避免 <code><td> 混用 <li>每列第一行放日期（如 <code><time datetime="2024-06-10">6/10</time>），后续行放事件项 - 如果某天没事件，留空
<td></td>，别塞 - 给
<table> 设 <code>width: 100%和table-layout: fixed，强制列宽均分 - 给每个
<th> 和 <code><td> 设 <code>width: 14.2857%（≈100% ÷ 7），避免浏览器自动计算偏差 - 日期文字用
font-size: 0.9em+line-height: 1.2，防止换行切字 - 事件列表用
margin: 0; padding: 0.25em 0 0;，去掉默认间距，紧凑堆叠 - 事件主体用
<strong></strong>包标题（如会议主题），普通文本描述放外面，不用额外 class - 重要日程加
aria-label="今日有团队站会，14:00-14:30"，辅助技术可读，不影响视觉 - 避免嵌套
<div> <p><span> 多层包装，单个 <code><li>足够承载一条日程示例片段：
<td> <time datetime="2024-06-10">6/10</time><ul> <li> <time datetime="2024-06-10T09:30">09:30</time><strong>需求评审</strong> </li> <li> <time datetime="2024-06-10T16:00">16:00</time> 同步接口文档</li> </ul> </td>打印或导出 PDF 时日期错位？检查 media query 和字体继承
网页上看正常，一按 Ctrl+P 就日期偏移、事件重叠——大概率是打印样式未重置，或字体在无衬线环境下渲染异常。
- 加
@media print { table { font-size: 10pt; } }，避免浏览器缩放干扰 - 为
<time></time>单独设font-family: "Segoe UI", system-ui, sans-serif;，防止打印时 fallback 到等宽字体拉宽单元格 - 删掉所有
background-color和阴影，PDF 打印机通常忽略或转成灰度，反而影响可读性 - 测试前先用 Chrome 的“另存为 PDF”，比直接打印机驱动更接近最终效果
真正难处理的是跨周日程（比如一个会议从周五持续到周一），纯 HTML 表格无法原生合并单元格横跨多列——这种必须拆成每日条目，或改用 JS 动态渲染。静态方案只适合单日独立事件。
- 加
CSS 控制周历宽度和对齐，别让文字挤成一团
默认表格会随内容撑开，导致周历在小屏上横向滚动——这不是预期行为。必须限制整体宽度，并让日期列等宽。
注意：不要对 <td> 设 <code>white-space: nowrap，否则长事件名会撑破列宽；改用 text-overflow: ellipsis 配合 overflow: hidden 和 max-width 更可控。
填充真实日程数据时，用语义化标签替代 div 堆砌
很多人用一堆 <div class="event"> 塞事件，结果搜索、打印、无障碍访问全出问题。HTML5 提供了更合适的标记方式。
<ul>
<li>用 <code><time datetime="2024-06-10T14:00">14:00</time> 标记时间点，比纯文本“下午2点”更可靠
