HTML <li> 標簽 · W3School HTML 參考手冊

# HTML <li> 標簽 ## 實例 ``` <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ``` （請在頁面底部查看更多實例） ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 <li> 標簽。 ## 定義和用法 <li> 標簽定義列表項目。 <li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。 ## HTML 與 XHTML 之間的差異在 HTML 4.01 中，li 元素的 "type" 和 "value" 屬性是不被贊成使用的。在 XHTML 1.0 Strict DTD 中，li 元素的 "type" 和 "value" 屬性是不被支持的。 ## 提示和注釋：提示：請使用 CSS 來定義列表和列表項目的類型。 ## 可選的屬性 | 屬性 | 值 | 描述 | | --- | --- | --- | | [type](/tags/att_li_type.asp "HTML <li> 標簽的 type 屬性") | `A` `a` `I` `i` `1` `disc` `square` `circle` |不贊成使用。請使用樣式取代它。規定使用哪種項目符號。 | | [value](/tags/att_li_value.asp "HTML <li> 標簽的 value 屬性") | _number_ |不贊成使用。請使用樣式取代它。規定列表項目的數字。 | ## 全局屬性 <li> 標簽支持 [HTML 中的全局屬性](/tags/html_ref_standardattributes.asp)。 ## 事件屬性 <li> 標簽支持 [HTML 中的事件屬性](/tags/html_ref_eventattributes.asp)。 ## TIY 實例 [一個無序列表](/tiy/t.asp?f=html_list_unordered) 本例演示一個無序列表。 ``` <html> <body> <h4>一個無序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html> ``` [不同類型的無序列表](/tiy/t.asp?f=html_lists_unordered) 本例演示不同類型的無序列表。 ``` <html> <body> <h4>Disc 項目符號列表：</h4> <ul type="disc"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ul> <h4>Circle 項目符號列表：</h4> <ul type="circle"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ul> <h4>Square 項目符號列表：</h4> <ul type="square"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ul> </body> </html> ``` [一個有序列表](/tiy/t.asp?f=html_list_ordered) 本例演示一個有序列表。 ``` <!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html> ``` [不同類型的有序列表](/tiy/t.asp?f=html_lists_ordered) 本例演示不同類型的有序列表。 ``` <html> <body> <h4>數字列表：</h4> <ol> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol> <h4>小寫字母列表：</h4> <ol type="a"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol> <h4>羅馬字母列表：</h4> <ol type="I"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol> <h4>小寫羅馬字母列表：</h4> <ol type="i"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ol> </body> </html> ``` [嵌套列表](/tiy/t.asp?f=html_lists_nested) 本例演示如何嵌套列表。 ``` <html> <body> <h4>一個嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li> </ul> </body> </html> ``` [嵌套列表 2](/tiy/t.asp?f=html_lists_nested2) 本例演示更復雜的嵌套列表。 ``` <html> <body> <h4>一個嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul> </body> </html> ``` ## 相關頁面 HTML DOM 參考手冊：[Li 對象](/jsref/dom_obj_li.asp "HTML DOM Li 對象")