在HTML中，我们可以使用<nav>标签来创建标签页，以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>标签页示例</title>
<style>
.tab {
overflow: hidden;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab content {
display: none;
padding: 6px 12px;
background-color: #ccc;
}
.tab button.active {
background-color: #ccc;
}
.tab content.active {
display: block;
}
</style>
</head>
<body>
<h2>标签页示例</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">标签1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">标签2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">标签3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>标签1</h3>
<p>这是标签1的内容。</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>标签2</h3>
<p>这是标签2的内容。</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>标签3</h3>
<p>这是标签3的内容。</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementsByClassName("tablinks")[0].click();
</script>
</body>
</html>
在这个例子中，我们首先创建了一个包含三个按钮的<div>元素，每个按钮代表一个标签页，我们为每个标签页创建了一个<div>元素，其中包含该标签页的内容。
我们使用CSS来样式化这些元素。.tab类设置了标签页的背景颜色和溢出隐藏属性，.tab button类设置了按钮的样式，.tab content类设置了内容区域的样式。
我们使用JavaScript来处理用户的点击事件，当用户点击一个按钮时，openTab函数会被调用，这个函数首先隐藏所有的内容区域，然后显示被点击的标签页的内容区域，并更新按钮的样式。