html实现九宫格红绿相间

要实现九宫格红绿相间，可以使用HTML和CSS来实现。下面是一种实现方法：

HTML代码：

<div class="sudoku">
  <div class="row">
    <div class="cell red"></div>
    <div class="cell green"></div>
    <div class="cell red"></div>
  </div>
  <div class="row">
    <div class="cell green"></div>
    <div class="cell red"></div>
    <div class="cell green"></div>
  </div>
  <div class="row">
    <div class="cell red"></div>
    <div class="cell green"></div>
    <div class="cell red"></div>
  </div>
</div>

CSS代码：

.sudoku {
  width: 300px;
  height: 300px;
}

.row {
  display: flex;
}

.cell {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

/* 让第一行和第三行的奇数个格子为红色，偶数个格子为绿色 */
.row:nth-child(1) .cell:nth-child(odd),
.row:nth-child(3) .cell:nth-child(odd) {
  background-color: red;
}

.row:nth-child(1) .cell:nth-child(even),
.row:nth-child(3) .cell:nth-child(even) {
  background-color: green;
}

/* 让第二行和第四行的奇数个格子为绿色，偶数个格子为红色 */
.row:nth-child(2) .cell:nth-child(odd),
.row:nth-child(4) .cell:nth-child(odd) {
  background-color: green;
}

.row:nth-child(2) .cell:nth-child(even),
.row:nth-child(4) .cell:nth-child(even) {
  background-color: red;
}

相关问题：
1. HTML是什么？
2. CSS是什么？
3. 如何使用CSS样式来实现页面布局？
4. CSS中如何选择并修改指定元素的样式？
5. CSS中的flexbox布局是什么？如何使用？