年历视图需用HTML表格或Grid布局实现，核心是JavaScript计算每月1日星期几和当月天数；热力图需归一化数据并用CSS自定义属性控制颜色渐变，避免硬编码与性能陷阱。
用纯 HTML + CSS 实现年历视图，核心是表格布局和日期计算
年历视图不是靠某个现成的 HTML 标签生成的——<input type="date"> 只能选单日，<calendar> 标签根本不存在。必须自己组织 <table> 或 <div> 网格，按年份拆出 12 个月，每页月视图再按周排列日期单元格。
关键难点在「某年 1 月 1 日是星期几」和「该月总天数」，得用 JavaScript 补齐（哪怕只渲染静态年历，也得算）。常见错误是直接硬编码 31 天/月，结果 2 月或小月错位、跨行混乱。
- 用
new Date(year, month, 1).getDay()获取当月 1 日星期几（0=周日） - 用
new Date(year, month + 1, 0).getDate()获取当月天数（利用“下月第 0 天”自动回退） - 首行留空格（
<td></td>）补足起始 weekday 前的空单元格 - 避免用
float: left拼月格——响应式下易折行错乱，优先用display: grid或语义化<table>
热力图年历的关键：把日期映射为颜色强度，不是加个 class 就完事
热力图本质是「数值 → 颜色」映射，不是简单给每个日期加 class="hot"。你得先有每个日期的原始数据（比如当日访问量、提交次数），再归一化到 0–1 区间，最后用 HSL 或 CSS 自定义属性控制亮度/饱和度。
容易踩的坑是直接用原始数值设 background-color，结果 1 和 10000 在视觉上没区分度；或者用固定阈值分档（如 <10 灰、10–50 黄、>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> 不等于慢
年历视图 DOM 节点数固定（12 个月 × 每月最多 6 周 × 7 天 = 504），看似多，其实远不到性能临界点。真正拖慢的是反复读写样式、无节制重排、或每个格子绑独立事件监听器。
典型低效写法：给 365 个 <td> 全部加 onclick 属性；或用 element.style.backgroundColor = '...' 动态设热力色（触发重绘）。
- 用事件委托：绑定
<table>或年历容器的click，再用event.target.dataset.date拿点击日期 - 热力色统一用 CSS 类 + 自定义属性控制，比如
<td data-date="2024-01-01" style="--intensity: 0.37">，CSS 写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> 本身语义正确，且兼容性完美）。
- 用
@supports (display: grid)包裹 Grid 样式，否则 fallback 到 table 规则 - 避免依赖
grid-area或place-items等较新特性，基础grid-template-columns+grid-column-start更稳 - 如果项目必须支持 IE11，老老实实用
<table>—— 它不是过时，是可靠
热力图年历最难的从来不是画格子，而是数据怎么对齐到正确的格子里：时区偏差会让 UTC 时间戳落在前一天；农历节日需要额外转换；跨年数据缺失会导致空月整块消失。这些细节不处理，视觉再漂亮也是错的。
