年历视图需用html表格或grid布局实现，核心是javascript计算每月1日星期几和当月天数；热力图需归一化数据并用css自定义属性控制颜色渐变，避免硬编码与性能陷阱。
用纯 HTML + CSS 实现年历视图，核心是表格布局和日期计算
年历视图不是靠某个现成的 HTML 标签生成的——<input type="date"> 只能选单日，<calendar></calendar> 标签根本不存在。必须自己组织 <table> 或 <code><div> 网格，按年份拆出 12 个月，每页月视图再按周排列日期单元格。<p>关键难点在「某年 1 月 1 日是星期几」和「该月总天数」，得用 JavaScript 补齐（哪怕只渲染静态年历，也得算）。常见错误是直接硬编码 31 天/月，结果 2 月或小月错位、跨行混乱。</p>
<ul>
<li>用 <code>new Date(year, month, 1).getDay() 获取当月 1 日星期几（0=周日）
new Date(year, month + 1, 0).getDate() 获取当月天数（利用“下月第 0 天”自动回退）<td></td>）补足起始 weekday 前的空单元格float: left 拼月格——响应式下易折行错乱，优先用 display: grid 或语义化 <table>
<h3>热力图年历的关键：把日期映射为颜色强度，不是加个 class 就完事</h3>
<p>热力图本质是「数值 → 颜色」映射，不是简单给每个日期加 <code>class="hot"。你得先有每个日期的原始数据（比如当日访问量、提交次数），再归一化到 0–1 区间，最后用 HSL 或 CSS 自定义属性控制亮度/饱和度。
容易踩的坑是直接用原始数值设 background-color，结果 1 和 10000 在视觉上没区分度；或者用固定阈值分档（如 50 红），但数据分布偏斜时大量格子挤在同色档里。
- 先收集全年每日数据，存为对象：
{'2024-01-01': 23, '2024-01-02': 47, ...} - 用
Math.max(...Object.values(data))得最大值，做线性归一化：intensity = value / maxValue - CSS 中用
background-color: hsl(200, 100%, calc(80% - ${intensity * 60}%));实现蓝→白渐变（越热越浅） - 别忘了空日期（如未记录日）设默认色，比如
background-color: #f0f0f0
性能瓶颈常出现在 DOM 节点过多：12×42≈500 个格子，但 365 个 <div> 不等于慢<p>年历视图 DOM 节点数固定（12 个月 × 每月最多 6 周 × 7 天 = 504），看似多，其实远不到性能临界点。真正拖慢的是反复读写样式、无节制重排、或每个格子绑独立事件监听器。</p>
<p>典型低效写法：给 365 个 <code><td> 全部加 <code>onclick 属性；或用 element.style.backgroundColor = '...' 动态设热力色（触发重绘）。- 用事件委托：绑定
<table> 或年历容器的 <code>click，再用 event.target.dataset.date 拿点击日期 - 热力色统一用 CSS 类 + 自定义属性控制，比如
<td data-date="2024-01-01" style="--intensity: 0.37">，CSS 写 <code>td { background-color: hsl(200, 100%, calc(80% - var(--intensity) * 60%)); } - 若需支持年份切换，别整个
innerHTML = '' 重写，用 documentFragment 批量创建再 append，减少重排次数
兼容性陷阱：CSS Grid 在旧版 Safari 和 IE 上行为不一致
想用 display: grid 做紧凑年历？小心 iOS 15.4 之前 Safari 对 grid-template-columns: repeat(7, 1fr) 的解析 bug，可能让周头（周日）错位到第二行。IE 则完全不支持 Grid，连 flex-wrap 对齐都难搞。
务实方案不是放弃 Grid，而是降级兜底：现代浏览器用 Grid，老设备切回 table 布局（<table> 本身语义正确，且兼容性完美）。<ul>
<li>用 <code>@supports (display: grid) 包裹 Grid 样式，否则 fallback 到 table 规则
<table> 或年历容器的 <code>click，再用 event.target.dataset.date 拿点击日期<td data-date="2024-01-01" style="--intensity: 0.37">，CSS 写 <code>td { background-color: hsl(200, 100%, calc(80% - var(--intensity) * 60%)); }innerHTML = '' 重写，用 documentFragment 批量创建再 append，减少重排次数兼容性陷阱：CSS Grid 在旧版 Safari 和 IE 上行为不一致
想用 display: grid 做紧凑年历？小心 iOS 15.4 之前 Safari 对 grid-template-columns: repeat(7, 1fr) 的解析 bug，可能让周头（周日）错位到第二行。IE 则完全不支持 Grid，连 flex-wrap 对齐都难搞。
务实方案不是放弃 Grid，而是降级兜底：现代浏览器用 Grid，老设备切回 table 布局（<table> 本身语义正确，且兼容性完美）。<ul>
<li>用 <code>@supports (display: grid) 包裹 Grid 样式，否则 fallback 到 table 规则
grid-area 或 place-items 等较新特性，基础 grid-template-columns + grid-column-start 更稳<table> —— 它不是过时，是可靠<p>热力图年历最难的从来不是画格子，而是数据怎么对齐到正确的格子里：时区偏差会让 UTC 时间戳落在前一天；农历节日需要额外转换；跨年数据缺失会导致空月整块消失。这些细节不处理，视觉再漂亮也是错的。</p>
</table>
