用HTML制作日历表

HTML是一种非常流行的网页制作语言，除了可以编写网页的文本内容，还可以利用HTML标签来设计网页结构、排版和样式。其中，制作日历表是一个非常有趣的HTML项目，不仅可以丰富网页的内容，也可以提高网页设计的能力。

制作一个简单的日历表

首先，我们来看一下如何利用HTML标签制作一个简单的日历表。

示例代码如下：

<table>
  <thead>
    <tr>
      <th colspan="7" style="text-align: center;">2022年1月</th>
    </tr>
    <tr>
      <th>周日</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
      <th>周六</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="gray">26</td>
      <td class="gray">27</td>
      <td class="gray">28</td>
      <td class="gray">29</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
    </tr>
  </tbody>
</table>

上述代码中，我们使用了HTML的<table>标签来创建一个表格，使用<thead>标签创建表头，使用<tbody>标签创建表体。在表头中，使用<th>标签来创建表头单元格。在表体中，使用<tr>标签来创建表格行，使用<td>标签来创建表格单元格。其中，我们通过设置colspan属性将表头单元格合并为一列，并使用CSS样式将文字居中和表头单元格进行区分。

除此之外，我们还使用CSS样式设置了一些类名为“gray”的单元格为灰色，这样就能够更好地区分日期。

运行上述代码，我们就可以得到一个简单的日历表了。

进阶操作：利用JavaScript制作动态日历表

除了静态的日历表，我们还可以利用JavaScript编写一些代码来制作动态日历表，例如添加日期选择、高亮当前日期等功能。

示例代码如下：

<div id="calendar"></div>

<script>
  function buildCalendar() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    var firstDayOfMonth = new Date(year, month, 1).getDay();

    var calendarHTML = '<table>';
    calendarHTML += '<thead><tr><th colspan="7">';
    calendarHTML += year + '年' + (month + 1) + '月';
    calendarHTML += '</th></tr><tr>';
    calendarHTML += '<th>周日</th>';
    calendarHTML += '<th>周一</th>';
    calendarHTML += '<th>周二</th>';
    calendarHTML += '<th>周三</th>';
    calendarHTML += '<th>周四</th>';
    calendarHTML += '<th>周五</th>';
    calendarHTML += '<th>周六</th></tr></thead>';

    var day = 1;
    var row = '<tr>';
    for (var i = 0; i < 7; i++) {
      if (i < firstDayOfMonth) {
        row += '<td class="gray"></td>';
      } else {
        row += '<td>' + day + '</td>';
        day++;
      }
    }
    row += '</tr>';
    calendarHTML += '<tbody>' + row;
    for (var i = 2; i <= 6; i++) {
      var row = '<tr>';
      for (var j = 0; j < 7; j++) {
        if (day > daysInMonth) {
          row += '<td class="gray"></td>';
        } else {
          row += '<td>' + day + '</td>';
          day++;
        }
      }
      row += '</tr>';
      calendarHTML += row;
    }
    calendarHTML += '</tbody></table>';

    document.getElementById('calendar').innerHTML = calendarHTML;
  }

  buildCalendar();
</script>

上述代码中，我们定义了一个JavaScript函数buildCalendar()，该函数的功能是利用JavaScript动态生成一个日历表。我们首先获取当前日期的年份和月份，然后根据这些参数计算出这个月有多少天，以及这个月第一天是星期几。接下来，我们使用循环语句来生成日历表的表体，将相应的日期填入表格单元格中。在循环过程中，我们还需要考虑当月的第一天不是星期日时，需要用空白单元格来占位，以保证表格的正确性。最后，我们将日历表插入到HTML文档中的一个具有唯一ID值的<div>元素中。

运行上述代码，我们就可以得到一个动态的日历表了，该日历表可以随着时间的变化而改变日期，并且可以让用户选择不同的日期，或者高亮显示当前日期等。