HTML是網(wǎng)頁的標(biāo)準(zhǔn)語言，它使用結(jié)構(gòu)化標(biāo)記來描述web頁面的結(jié)構(gòu)和內(nèi)容。在網(wǎng)頁中，很常見的就是左側(cè)導(dǎo)航欄了。下面我們就來學(xué)習(xí)一下HTML的左側(cè)導(dǎo)航欄代碼。 在HTML中，創(chuàng)建左側(cè)導(dǎo)航欄的最常見方法就是使用無序列表（ul）和列表項(xiàng)（li）元素。下面是一個(gè)簡單的左側(cè)導(dǎo)航欄代碼：

<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關(guān)于我們</a></li>
<li><a href="#services">服務(wù)項(xiàng)目</a></li>
<li><a href="#portfolio">我們的作品</a></li>
<li><a href="#blog">博客</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>

在上面的代碼中，我們使用ul和li標(biāo)簽來創(chuàng)建一個(gè)無序列表。每個(gè)列表項(xiàng) li 都包含了一個(gè)鏈接元素 a， 鏈接指向頁面中的具體部分（也稱為錨點(diǎn)）。在這種情況下，鏈接指向頁面頂部的“home”、“about”、“services”、 “portfolio”、“blog”或“contact”部分。 當(dāng)然，你也可以在無序列表中添加多個(gè)鏈接和子列表，如果你想要?jiǎng)?chuàng)建具有層次結(jié)構(gòu)的導(dǎo)航欄的話。下面是相應(yīng)的代碼：

<ul>
<li><a href="#home">首頁</a></li>
<li>
<a href="#about">關(guān)于我們</a>
<ul>
<li><a href="#about-team">團(tuán)隊(duì)介紹</a></li>
<li><a href="#about-history">公司歷史</a></li>
<li><a href="#about-careers">招聘信息</a></li>
</ul>
</li>
<li><a href="#services">服務(wù)項(xiàng)目</a></li>
<li><a href="#portfolio">我們的作品</a></li>
<li><a href="#blog">博客</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>

在這段代碼中，我們創(chuàng)建了一個(gè)子列表（ul），并在列表項(xiàng)（li）元素中包含了該子列表，從而創(chuàng)建了更具有層次結(jié)構(gòu)的導(dǎo)航欄。當(dāng)鼠標(biāo)懸停在“關(guān)于我們”鏈接上時(shí)，子列表（ul）會(huì)顯示出來，供用戶瀏覽。 總結(jié)一下，左側(cè)導(dǎo)航欄通過無序列表（ul）和列表項(xiàng)（li）元素來創(chuàng)建，有多個(gè)鏈接時(shí)可以使用子列表來構(gòu)建層次結(jié)構(gòu)。靈活運(yùn)用這些HTML元素可以讓我們創(chuàng)建出美觀而簡潔的左側(cè)導(dǎo)航欄。