首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

li

HTML 的<li>元素用于在列表中表示的项。它必须包含在父元素中:有序列表(<ol>),无序列表(<ul>)或菜单(<menu>)。在菜单和无序列表中,列表项通常使用项目符号来显示。在有序列表中,它们通常在左侧以升序计数器显示,如数字或字母。

内容类别

允许的内容

流量内容。

标签省略

如果列表项紧跟着另一个<li>元素,或者其父元素中没有更多内容,则可以省略结束标记。

允许父母

一个<ul>,<ol>或<menu>元素。尽管不是一致的用法,但过时的<dir>也可以是父级。

允许的 ARIA 角色

menuitem,menuitemcheckbox,menuitemradio,选项,演示文稿,收音机,分隔符,选项卡,树形结构

DOM 接口

HTMLLIElement

属性

该元素包含全局属性。

value这个整数属性表示由<ol>元素定义的列表项的当前序号值。该属性唯一允许的值是一个数字,即使该列表以罗马数字或字母显示。列出这一项后面的项目,继续从值集编号。所述属性具有用于无序列表(没有意义<ul>)或菜单(<menu>)。

注意:此属性在 HTML4中 已被弃用,但在 HTML5 中重新引入。

注意:在 Gecko 9.0 之前,负值被错误地转换为0.从 Gecko 9.0 开始,所有整数值都被正确解析。

type此字符属性指示编号类型:

  • a: 小写字母
  • A: 大写字母
  • i:小写的罗马数字
  • I:大写的罗马数字
  • 1:数字

如果有的话,此类型将覆盖其父元素<ol>所使用的类型。

用法说明:此属性已被弃用:list-style-type改为使用 CSS 属性。

示例

代码语言:javascript
复制
<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>	

上面的 HTML 会输出:

  1. 第一项
  2. 第二项
  3. 第三项
代码语言:javascript
复制
<ol type="I">
    <li value="3">third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ol>	

上面的 HTML 会输出:

  1. 第三项
  2. 第四项
  3. 第五项
代码语言:javascript
复制
<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>
  • 第一项
  • 第二项
  • 第三项

有关更详细的示例,请参阅 <ol> 和 <ul> 页面。

规范

Specification

Status

Comment

HTML Living StandardThe definition of '<li>' in that specification.

Living Standard

?

HTML5The definition of '<li>' in that specification.

Recommendation

?

HTML 4.01 SpecificationThe definition of '<li>' in that specification.

Recommendation

The type attribute has been deprecated.

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

value

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

type

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

value

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

type

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com