HTML <li> 标签
实例
HTML 两个列表实例： 一个有序列表 (<ol>) 和 一个无序列表 (<ul>) :
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
亲自试一试 »
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
下面有更多实例。
定义和用法
<li> 标签定义列表项目。
<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
在 <ul> 和 <menu>中，列表项通常显示为项目符号。
在 <ol>中，列表项通常以数字或字母显示。
提示: 使用CSS设置列表样式。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| value | number | 不赞成使用。请使用样式取代它。规定列表项目的数字。 |
全局属性
<li> 标签支持 HTML 中的全局属性。
事件属性
<li> 标签支持 HTML 中的事件属性。
更多实例
实例
在有序列表中使用 value 属性：
<ol>
<li value="100">咖啡</li>
<li>茶</li>
<li>牛奶</li>
<li>水</li>
<li>果汁</li>
<li>啤酒</li>
</ol>
亲自试一试 »
<li value="100">咖啡</li>
<li>茶</li>
<li>牛奶</li>
<li>水</li>
<li>果汁</li>
<li>啤酒</li>
</ol>
实例
设置不同的列表样式类型 (使用 CSS):
<ol>
<li>咖啡</li>
<li style="list-style-type:lower-alpha">茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li style="list-style-type:square">茶</li>
<li>牛奶</li>
</ul>
亲自试一试 »
<li>咖啡</li>
<li style="list-style-type:lower-alpha">茶</li>
<li>牛奶</li>
</ol>
<ul>
<li>咖啡</li>
<li style="list-style-type:square">茶</li>
<li>牛奶</li>
</ul>
实例
一个嵌套列表
<ul>
<li>咖啡</li>
<li>Tea
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
亲自试一试 »
<li>咖啡</li>
<li>Tea
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
实例
创建更复杂的嵌套列表：
<ul>
<li>咖啡</li>
<li>Tea
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
亲自试一试 »
<li>咖啡</li>
<li>Tea
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
相关页面
HTML 教程: HTML Lists
HTML DOM 参考手册: Li 对象
CSS 教程: Styling Lists
默认CSS设置
大多数浏览器将使用以下默认值显示 <li> 元素:
li {
display: list-item;
}
display: list-item;
}
