请基于bootstrap5 使用TAB标签生成 2个标签页分别为中考高考

以下是基于Bootstrap 5的代码，生成2个标签页，分别为中考和高考：

<!-- 导航标签页 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="zhongkao-tab" data-bs-toggle="tab" data-bs-target="#zhongkao" type="button" role="tab" aria-controls="zhongkao" aria-selected="true">中考</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="gaokao-tab" data-bs-toggle="tab" data-bs-target="#gaokao" type="button" role="tab" aria-controls="gaokao" aria-selected="false">高考</button>
  </li>
</ul>

<!-- 标签页内容 -->
<div class="tab-content" id="myTabContent">
  <!-- 中考标签页 -->
  <div class="tab-pane fade show active" id="zhongkao" role="tabpanel" aria-labelledby="zhongkao-tab">
    <h1>中考内容</h1>
    <p>这里是中考标签页的内容。</p>
  </div>
  <!-- 高考标签页 -->
  <div class="tab-pane fade" id="gaokao" role="tabpanel" aria-labelledby="gaokao-tab">
    <h1>高考内容</h1>
    <p>这里是高考标签页的内容。</p>
  </div>
</div>

在以上代码中，我们首先创建了一个ul元素，并在其中添加了2个li元素，分别代表中考和高考标签页。每个li元素包含一个button元素，用于在点击时切换到相应的标签页。

我们还创建了一个div元素，用于包含标签页内容。在其中，我们创建了2个div元素，分别代表中考和高考标签页的内容。每个div元素都有一个id属性，与相应的button元素的data-bs-target属性相对应。

注意，我们的中考标签页是默认显示的（show active类），而高考标签页是隐藏的。这是因为我们在ul元素中的第一个li元素上添加了active类，以使中考标签页成为默认标签页。