日历html需用固定42格（6×7），先算当月1日星期几确定首行空单元格数，dom创建元素替代字符串拼接，桌面用表格、移动端换div+aria，统一时区处理并预设星期本地化。
用 <table> 实现固定行列的日历结构
<p>HTML 表格本身不带日期逻辑，但能稳定控制行列对齐——这是日历渲染最基础也最关键的约束。关键不是“怎么画格子”，而是“怎么让 1 号落在正确的列（星期几）”。必须先算出当月 1 日是星期几，再决定第一行要补几个空单元格 <code><td>。
<p>常见错误是直接硬写 7×6 的表格，结果每月第一天都从周日开始，或者忽略月份天数差异导致最后一行多出无效日期。</p>
<ul>
<li>每月起始列 = <code>(firstDayOfWeek + 6) % 7（JavaScript 中 new Date(year, month, 1).getDay() 返回 0（周日）到 6（周六），需转换为周一为 0 的习惯时，常加 6 再取模）
<td> 填充，避免浏览器自动折行破坏布局
<li>不要用 <code><th> 放星期标题后又混用 <code><td> 放日期——语义混乱且容易被 CSS 误样式化
<h3>生成日期单元格时避开 <code>document.write() 和拼接字符串
用字符串拼接 <table>...</table> 看似简单，但一旦需要绑定点击事件、动态高亮今日或节假日，就会陷入难维护的 HTML 字符串里。更稳妥的做法是用 DOM 方法逐个创建元素，或用现代框架的响应式更新机制。
例如：用 document.createElement('tr') 和 appendChild() 构建行与单元格，比 innerHTML += '...' 更可控，也避免 XSS 风险（尤其当日期含用户输入时）。
- 循环生成 42 个
<td>，对前 <code>offset个设为空文本，中间有效日期用textContent设置，后面补空 - 给当天日期的
<td> 加 class <code>"today"，别用内联样式——否则后续主题切换或暗色模式会冲突 - 避免在
<td> 里嵌套 <code><div> 或 <code><p></p>：日历单元格应保持扁平，CSS 用display: flex居中即可响应式断点下表格列宽塌陷问题
原生
<table> 在小屏上不会自动换行，7 列挤在一起文字重叠，这不是“美化问题”，而是可访问性失效。不能靠 <code>table-layout: fixed强撑宽度，得承认：纯表格在移动端就是不适用的。实际做法是用媒体查询把桌面端的
<table> 替换为语义等价的 <code><div> 布局，但保持相同 ARIA 标签（如 <code>role="grid"、aria-label="2024年5月日历"），确保屏幕阅读器仍能按行列导航。- 桌面端用
<table>，移动端用 <code><div role="grid"> + <code><div role="row"> + <code><div role="gridcell"> <li>禁用 <code>overflow-x: auto滚动方案——它破坏键盘 tab 导航顺序，且 iOS Safari 对表格滚动支持差 - 如果必须保留表格，至少给
<table> 加 <code>width: 100%和font-size: clamp(12px, 2.5vw, 16px)缩放文字时区和本地化带来的日期偏移
用
new Date(2024, 4, 1)创建对象时，构造函数默认按本地时区解析，但服务器返回的 ISO 字符串如"2024-05-01T00:00:00Z"是 UTC 时间。两者混用会导致某些时区（如新加坡 +8）显示 4 月最后一天为 1 号。解决方法不是“统一转成 UTC”，而是明确所有日期操作都在同一时区上下文里进行：要么全用本地时间（适合纯前端日历），要么全用 UTC 时间（适合与后端 API 对接）。
- 判断是否需要 UTC：若日历用于展示航班、会议等跨时区事件，用
new Date(Date.UTC(year, month, day)) - 显示星期名称时别用
toLocaleDateString('zh-CN', { weekday: 'short' })直接调用——它依赖用户系统语言，应预设 locale 或由业务配置 - 不要用
getMonth()返回值直接当数组索引：它返回 0–11，而月份名数组通常按 1–12 排列，容易越界
真正麻烦的不是画出格子，而是让每个格子里的数字既准确又可交互——日期计算、DOM 更新、无障碍支持、响应式切换，这四件事只要漏掉一个，用户就会在某个场景下卡住。
- 判断是否需要 UTC：若日历用于展示航班、会议等跨时区事件，用
- 桌面端用
