HTML <li> 標籤
示例
一個有序列表(<ol>)和一個無序列表(<ul>)
<ol>
<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> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
value | 數字 | 僅用於 <ol> 列表。 指定列表項的起始值。後續列表項將從該數字遞增 |
全域性屬性
<li> 標籤還支援 HTML 中的全域性屬性。
事件屬性
<li> 標籤還支援 HTML 中的事件屬性。
更多示例
示例
在有序列表中使用 value 屬性
<ol>
<li value="100">Coffee</li>
<li>茶</li>
<li>牛奶</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</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>
自己動手試一試 »
示例
建立巢狀列表(一個列表中的列表)
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
自己動手試一試 »
示例
建立更復雜的巢狀列表
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
自己動手試一試 »
相關頁面
HTML 教程:HTML 列表
HTML DOM 參考: Li 物件
CSS 教程:樣式列表
預設 CSS 設定
大多數瀏覽器會顯示 <li> 元素,並帶有以下預設值
li {
display: list-item;
}