ul li 無(wú)序列表標(biāo)簽

我們?cè)诤芏鄷r(shí)候都需要列表屬性，列表通常分為有序列表和無(wú)序列表。這一章節(jié)我們就先來(lái)介紹無(wú)序列表。無(wú)序列表，顧名思義就是沒(méi)有順序的列表，每一個(gè)列表項(xiàng)沒(méi)有前后順序之分，呈同級(jí)關(guān)系。例如以下效果：

如果在 HTML 當(dāng)中想要呈現(xiàn)無(wú)序列表的效果，那么我們就需要 ul 和 li 標(biāo)簽了。

1. ul li 標(biāo)簽的使用

我們?cè)谥暗恼鹿?jié)中介紹過(guò)，理論上標(biāo)簽與標(biāo)簽之間是可以任意嵌套的。但是 ul 和 li 標(biāo)簽比較特殊，ul 標(biāo)簽里只能嵌套 li 標(biāo)簽。ul 代表整個(gè)列表，li 標(biāo)簽代表無(wú)序列表的每一個(gè)選項(xiàng)。我們可以把 ul 標(biāo)簽 理解為一個(gè)殼，里面嵌套著 li 代表的選項(xiàng)。如下圖所示：

<ul>
    <li>蘋(píng)果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

2. ul li 標(biāo)簽的作用

ul li 標(biāo)簽用來(lái)定義無(wú)序列表，但 ul li 標(biāo)簽會(huì)有默認(rèn)樣式，所有的列表選項(xiàng)前面會(huì)有一個(gè)實(shí)心的圓點(diǎn)，如想修改該圓點(diǎn)的樣式，需要借助 CSS 樣式。通常無(wú)序列表代表每一個(gè)選項(xiàng)沒(méi)有特定順序，呈同級(jí)關(guān)系，且相互之間沒(méi)有影響。無(wú)序列表不僅可以代表列表選項(xiàng)，也可以用來(lái)導(dǎo)航欄、側(cè)邊欄等的顯示。

3. UL LI 標(biāo)簽的特點(diǎn)

1. ul 標(biāo)簽代表整個(gè)列表，里面只能 li 標(biāo)簽，li 標(biāo)簽代表列表的每一項(xiàng)；

2. ul li 標(biāo)簽的程序方式默認(rèn)為豎向排列，如想橫向排列，需要借助 CSS ；

3. ul li 標(biāo)簽列表項(xiàng)前默認(rèn)會(huì)有一個(gè)實(shí)心黑點(diǎn)的樣式；

4. 每一個(gè)列表項(xiàng)并無(wú)順序，呈同級(jí)關(guān)系；

5. li 標(biāo)簽里可以再嵌套 ul 標(biāo)簽，如 li 標(biāo)簽嵌套了 ul 標(biāo)簽，內(nèi)層列表的默認(rèn)樣式會(huì)改變，為黑色空心點(diǎn)，具體如下圖所示：

   <ul>
       <li>
         <ul>
           <li>紅蘋(píng)果</li>
           <li>青蘋(píng)果</li>
         </ul>
       </li>
       <li>香蕉</li>
       <li>橘子</li>
     </ul>
   

   
   這樣代表外層的列表的第一個(gè)選項(xiàng)又是一個(gè)列表。

4. 注意事項(xiàng)

1. ul 標(biāo)簽里只能嵌套 li 標(biāo)簽， 而 li 標(biāo)簽里可以嵌套任意標(biāo)簽；
2. ul 和 li 均為雙標(biāo)簽，都有首尾標(biāo)簽；
3. ul 和 li 默認(rèn)為豎向排列；
4. li 標(biāo)簽?zāi)J(rèn)樣式為前面有一個(gè)黑色實(shí)心點(diǎn)。如內(nèi)層 還有 li 標(biāo)簽，默認(rèn)樣式為黑色空心點(diǎn)。

5. 真實(shí)案例分享

淘寶網(wǎng)（部分）

 <ul> 
     <li>
         <div><a><span>親，請(qǐng)登錄</span> </a></div>
     </li>
     <li>
         <div>
             <a><span>手機(jī)逛淘寶</span> </a>
         </div>
     </li>
     <li>
     </li>
</ul>

<ul>
    <li>
        <div>
            <a> <span>淘寶網(wǎng)首頁(yè)</span> </a>
        </div>
    </li>
    <li>
        <div>
            <a><span>我的淘寶</span></a>
        </div>
        <div>
            <div>
                <a>已買到的寶貝</a>
                <a>我的足跡</a>
            </div>
        </div>
    </li>
</ul>

京東（部分）

 <ul>
     <li>
        <a>你好，請(qǐng)登錄</a>  <a>免費(fèi)注冊(cè)</a>
     </li>
     <li></li>
     <li>
         <div><a>我的訂單</a></div>
     </li>
     <li></li>
     <li>
         <div><a>我的京東</a></div>
     </li>
     <li></li>
     <li>
         <div><a>京東會(huì)員</a></div>
     </li>
     <li></li>
     <li>
         <div><a>企業(yè)采購(gòu)</a></div>
     </li>
 </ul>

6. 小結(jié)

1. ul li 標(biāo)簽代表無(wú)序列表， ul 代表列表整體，li 代表列表的每一個(gè)選項(xiàng)。
2. ul 標(biāo)簽里面只能嵌套 li 標(biāo)簽， li 標(biāo)簽可以嵌套任意標(biāo)簽。
3. ul li 標(biāo)簽?zāi)J(rèn)為豎向排列。
4. ul li 標(biāo)簽?zāi)J(rèn)樣式為每個(gè)列表選項(xiàng)前有一個(gè)黑色實(shí)心點(diǎn)。