HTML和CSS是網頁制作的兩個重要技術。HTML作為標記語言，用于描述頁面的內容和結構，而CSS則用于定義頁面的樣式和布局。在網頁制作過程中，標簽頁是一個常見的元素，它可以幫助用戶方便地瀏覽網站的各個頁面。接下來將介紹如何使用HTML和CSS制作標簽頁。

<div class="tab">
<button class="tab-button active" onclick="openTab(event, 'home')">首頁</button>
<button class="tab-button" onclick="openTab(event, 'news')">新聞</button>
<button class="tab-button" onclick="openTab(event, 'about')">關于</button>
<div id="home" class="tab-content">
<h2>歡迎來到我的網站！</h2>
<p>這里是首頁的內容。</p>
</div>
<div id="news" class="tab-content">
<h2>最新新聞</h2>
<p>這里是新聞的內容。</p>
</div>
<div id="about" class="tab-content">
<h2>關于我們</h2>
<p>這里是關于我們的內容。</p>
</div>
</div>

上述代碼中，我們使用了一個div元素作為外層容器，并給它添加了一個class為"tab"，方便以后對整個標簽頁進行樣式定義。接著，我們用button元素作為標簽頁的每個選項，給它們一個class為"tab-button"，并通過JavaScript的事件監聽器（onclick）來控制顯示哪個選項的內容。這些選項對應的內容則使用div元素，并給它們一個自定義的id，方便在JavaScript中調用。

為了讓標簽頁更加美觀，我們需要給選項按鈕和內容容器添加CSS樣式。以下是一些簡單的示例：

.tab {
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.tab-button {
background-color: #f1f1f1;
border: none;
color: black;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
float: left;
transition: background-color 0.3s ease-in-out;
}
.tab-button.active {
background-color: #ccc;
}
.tab-button:hover {
background-color: #ddd;
}
.tab-content {
display: none;
padding: 20px;
clear: both;
}
.tab-content.active {
display: block;
}

在上面的CSS樣式中，我們給選項按鈕設置了一個跳轉效果和鼠標懸停效果，并對當前選中的按鈕應用了一個不同的背景色。對于內容容器，我們通過display屬性隱藏了所有的內容，并對當前選中的容器應用了display:block的屬性，以顯示它的內容。

通過以上的代碼和樣式，我們就可以制作出一個簡單的標簽頁。可以根據自己的需求增加選項和內容，以及調整樣式來滿足不同的頁面需求。