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 对象")