HTML中如何创建一个简单的日历结构-html教程-PHP中文网

table是实现语义清晰日历的最佳html方案，因其天然支持二维时间网格结构，配合caption、thead、tbody可确保可访问性与兼容性。

html中如何创建一个简单的日历结构

用 `table` 实现语义清晰的日历骨架

HTML 本身没有原生日历元素，table 是最直接、可访问性好、兼容性强的方案。别被“table 不适合布局”的说法带偏——日历本质是二维时间网格，table 正是为此设计的。

关键点在于结构语义：用 caption 标明月份年份，thead 固定星期头，tbody 填日期单元格。避免用 div + CSS Grid 模拟表格，否则屏幕阅读器无法正确识别行列关系。

示例片段：

2024 年 6 月
日	一	二	三	四	五	六
		1	2	3	4	5

填充日期时注意空单元格和跨月逻辑

第一行开头常有空白格（比如 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 或事件监听处理。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

常见疏漏：

没考虑时区：用户本地时间 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');
}
});</p>