table是实现语义清晰日历的最佳HTML方案，因其天然支持二维时间网格结构，配合caption、thead、tbody可确保可访问性与兼容性。
用 table 实现语义清晰的日历骨架
HTML 本身没有原生日历元素，table 是最直接、可访问性好、兼容性强的方案。别被“table 不适合布局”的说法带偏——日历本质是二维时间网格，table 正是为此设计的。
关键点在于结构语义：用 caption 标明月份年份，thead 固定星期头，tbody 填日期单元格。避免用 div + CSS Grid 模拟表格，否则屏幕阅读器无法正确识别行列关系。
示例片段：
<table>
<caption>2024 年 6 月</caption>
<thead>
<tr>
<th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<!-- 后续行依此类推 -->
</tbody>
</table>填充日期时注意空单元格和跨月逻辑
第一行开头常有空白格（比如 6 月 1 日是周六，那周日到周五共 6 天要留空），最后一行末尾也可能补空。这些必须用空的 td 占位，不能省略或用 填充——否则会破坏表格结构，影响键盘导航和读屏顺序。
立即学习“前端免费学习笔记（深入）”；
生成逻辑要点：
- 用
new Date(2024, 5, 1)获取当月第一天（注意月份从 0 开始） - 调用
getDay()得到星期几（0=周日），算出前置空格数 - 用
new Date(2024, 6, 0).getDate()获取当月总天数 - 遍历时用
date.setDate(i)逐日推进，避免手动加减引发的闰年/大小月错误
让当天高亮且支持点击需要 JS 配合
纯 HTML 只能静态展示。若需标记今天、禁用过去日期、或点击跳转，必须加 JS。核心是给对应 td 添加 class 或 data 属性，再用 CSS 或事件监听处理。
常见疏漏：
- 没考虑时区：用户本地时间 vs 服务器时间，
new Date()返回的是客户端时间，一般够用 - 点击事件绑定在
td上，但未阻止默认行为或未做防抖，导致快速点击触发多次 - 用
innerHTML插入日期时未转义，若日期含特殊字符（极少但可能）会引发 XSS（实际中几乎不会，但逻辑上存在）
简单高亮当天的 JS 片段：
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // 注意 0 起始
const dateNum = today.getDate();
<p>document.querySelectorAll('td').forEach(td => {
const dayText = td.textContent.trim();
if (dayText && parseInt(dayText) === dateNum &&
td.closest('table').querySelector('caption')?.textContent.includes(<code>${year} 年 ${month + 1} 月</code>)) {
td.classList.add('today');
}
});CSS 控制样式时优先用 border-collapse: collapse
默认 table 的单元格边框有间隔，看起来松散。加 border-collapse: collapse 才能实现紧凑日历效果。同时建议显式设置 table-layout: fixed，防止内容撑宽列宽导致错位。
其他实用技巧：
- 用
th的scope="col"提升可访问性 - 给
caption加text-align: center和font-weight: bold更符合视觉习惯 - 禁用日期可用
opacity: 0.5+pointer-events: none，比单纯去背景色更明确传达状态
真正难的不是画出格子，而是让每个 td 的日期值、可访问性角色、交互反馈三者对齐。尤其是多语言环境里，星期顺序、首日定义（周日 or 周一）、农历节气标注等，都会让基础结构迅速复杂化。
