ul li 無序列表標簽

我們在很多時候都需要列表屬性，列表通常分為有序列表和無序列表。這一章節我們就先來介紹無序列表。無序列表，顧名思義就是沒有順序的列表，每一個列表項沒有前后順序之分，呈同級關系。例如以下效果：

如果在 HTML 當中想要呈現無序列表的效果，那么我們就需要 ul 和 li 標簽了。

1. ul li 標簽的使用

我們在之前的章節中介紹過，理論上標簽與標簽之間是可以任意嵌套的。但是 ul 和 li 標簽比較特殊，ul 標簽里只能嵌套 li 標簽。ul 代表整個列表，li 標簽代表無序列表的每一個選項。我們可以把 ul 標簽 理解為一個殼，里面嵌套著 li 代表的選項。如下圖所示：

<ul>
    <li>蘋果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

2. ul li 標簽的作用

ul li 標簽用來定義無序列表，但 ul li 標簽會有默認樣式，所有的列表選項前面會有一個實心的圓點，如想修改該圓點的樣式，需要借助 CSS 樣式。通常無序列表代表每一個選項沒有特定順序，呈同級關系，且相互之間沒有影響。無序列表不僅可以代表列表選項，也可以用來導航欄、側邊欄等的顯示。

3. UL LI 標簽的特點

1. ul 標簽代表整個列表，里面只能 li 標簽，li 標簽代表列表的每一項；

2. ul li 標簽的程序方式默認為豎向排列，如想橫向排列，需要借助 CSS ；

3. ul li 標簽列表項前默認會有一個實心黑點的樣式；

4. 每一個列表項并無順序，呈同級關系；

5. li 標簽里可以再嵌套 ul 標簽，如 li 標簽嵌套了 ul 標簽，內層列表的默認樣式會改變，為黑色空心點，具體如下圖所示：

   <ul>
       <li>
         <ul>
           <li>紅蘋果</li>
           <li>青蘋果</li>
         </ul>
       </li>
       <li>香蕉</li>
       <li>橘子</li>
     </ul>
   

   
   這樣代表外層的列表的第一個選項又是一個列表。

4. 注意事項

1. ul 標簽里只能嵌套 li 標簽， 而 li 標簽里可以嵌套任意標簽；
2. ul 和 li 均為雙標簽，都有首尾標簽；
3. ul 和 li 默認為豎向排列；
4. li 標簽默認樣式為前面有一個黑色實心點。如內層 還有 li 標簽，默認樣式為黑色空心點。

5. 真實案例分享

淘寶網（部分）

 <ul> 
     <li>
         <div><a><span>親，請登錄</span> </a></div>
     </li>
     <li>
         <div>
             <a><span>手機逛淘寶</span> </a>
         </div>
     </li>
     <li>
     </li>
</ul>

<ul>
    <li>
        <div>
            <a> <span>淘寶網首頁</span> </a>
        </div>
    </li>
    <li>
        <div>
            <a><span>我的淘寶</span></a>
        </div>
        <div>
            <div>
                <a>已買到的寶貝</a>
                <a>我的足跡</a>
            </div>
        </div>
    </li>
</ul>

京東（部分）

 <ul>
     <li>
        <a>你好，請登錄</a>  <a>免費注冊</a>
     </li>
     <li></li>
     <li>
         <div><a>我的訂單</a></div>
     </li>
     <li></li>
     <li>
         <div><a>我的京東</a></div>
     </li>
     <li></li>
     <li>
         <div><a>京東會員</a></div>
     </li>
     <li></li>
     <li>
         <div><a>企業采購</a></div>
     </li>
 </ul>

6. 小結

1. ul li 標簽代表無序列表， ul 代表列表整體，li 代表列表的每一個選項。
2. ul 標簽里面只能嵌套 li 標簽， li 標簽可以嵌套任意標簽。
3. ul li 標簽默認為豎向排列。
4. ul li 標簽默認樣式為每個列表選項前有一個黑色實心點。