在前端開發中，選項卡是一個常見的功能，但在一個頁面中使用多個選項卡時，如何規范化代碼，使頁面結構清晰，成為了一個需要考慮的問題。CSS提供了多種方案來實現多個選項卡，以下是其中兩種方法的代碼示例：

/* 方法一：使用偽元素 */
.tab {
display: flex;
}
.tab label {
margin-right: 20px;
cursor: pointer;
}
.tab input[type="radio"] {
display: none;
}
.tab input[type="radio"]:checked + label {
color: #fff;
background-color: #333;
border-bottom: 2px solid #fff;
}
.tab-content {
display: none;
}
.tab input[type="radio"]:checked + label + .tab-content {
display: block;
}
/* 方法二：使用class切換 */
.tab {
display: flex;
}
.tab label {
margin-right: 20px;
cursor: pointer;
}
.tab input[type="radio"] {
display: none;
}
.tab-content {
display: none;
}
.tab .active {
color: #fff;
background-color: #333;
border-bottom: 2px solid #fff;
}
.tab .active + .tab-content {
display: block;
}

以上兩種方法的實現思路類似，都是通過改變樣式來顯示相應的選項卡內容。方法一使用了CSS的偽元素，通過設置:checked來判斷是否被選中，從而激活對應的內容。方法二則是通過添加class類來實現激活狀態的切換。

總的來說，無論選擇哪種方式，都需要清晰的HTML結構和對應CSS樣式，同時需要規范化代碼，使頁面的可維護性更加高效。