HTML左側選項卡是網頁設計中常見的界面元素，可以讓用戶方便地選擇不同的內容和功能。本文將介紹如何使用HTML和CSS實現一個簡單的左側選項卡。 首先，我們需要在HTML中創建一個包含選項卡的容器。可以使用無序列表（ul）和列表項（li）來實現：

<div class="tab-container">
<ul class="tab-menu">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<p>選項卡1的內容...</p>
<p>選項卡2的內容...</p>
<p>選項卡3的內容...</p>
</div>
</div>

在這個容器中，我們創建了一個ul標記，用于顯示選項卡的菜單。每個選項卡通過一個li標記實現，其中第一個選項卡被默認激活（即添加了active類）。 與此同時，我們也創建了一個包含選項卡內容的div標記。每個選項卡的內容通過p標記實現，在這里我們只是填充了一些占位文本。 接下來，我們需要使用CSS樣式來美化這個界面元素。我們將使用以下樣式：

.tab-container {
display: flex;
}
.tab-menu {
background-color: #F5F5F5;
list-style-type: none;
padding: 10px;
margin: 0;
width: 120px;
border-right: 1px solid #DDD;
}
.tab-menu li {
padding: 10px;
margin-bottom: 2px;
cursor: pointer;
}
.tab-menu li.active {
background-color: #FFF;
border-left: 4px solid #4CAF50;
}
.tab-content {
padding: 10px;
margin: 0;
flex: 1;
}

這些樣式將容器與選項卡菜單和內容中的元素進行了美化。 在這里，我們使用了flexbox布局來使得菜單和內容在容器中占據不同的寬度。然后，我們使用了一些背景色和邊框樣式來美化菜單，使其看起來更加吸引人。選項卡被激活時，我們也使用了不同的樣式來突出顯示它。 此外，我們還使用了一個簡單的hover特效，使得鼠標懸停在選項卡上時，菜單的背景色會有所變化。 以上就是使用HTML和CSS實現一個簡單左側選項卡的代碼和樣式，你可以根據自己的需求和設計來修改和擴展這個界面元素。