HTML <li>用法及代码示例

HTML中的<li>标记用于定义HTML文档中的列表项。它在有序列表<ol>或无序列表<ul>中使用。 <li>标记需要一个开始标记和结束标记。注意：如果列表项后紧跟另一个<li>元素，或者如果其父元素中没有更多内容，则可以省略end标记。

用法:

<li> List Items </li>

属性值：

value：value属性用于指定列表项的起始编号。列表项从该数字开始，并在每次增加项目时增加其值。 value属性仅适用于有序列表，即<ol>标记。

范例1：此示例在有序列表中使用<li>标记。

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML li Tag</h2> 
  
    <ol> 
        <li>Geeks</li> 
        <li>Sudo</li> 
        <li>Gfg</li> 
        <li>Gate</li> 
        <li>Placement</li> 
    </ol> 
</body> 
  
</html>

输出：

范例2：此示例将<li>标记与无序列表一起使用。

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>HTML li Tag</h2> 
  
    <ul> 
        <li>Geeks</li> 
        <li>Sudo</li> 
        <li>Gfg</li> 
        <li>Gate</li> 
        <li>Placement</li> 
    </ul> 
</body> 
  
</html>

输出：

范例3：本示例使用具有值属性的<li>标记创建列表。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>HTML li Tag</h2> 
  
    <ol> 
        <li value="5">Geeks</li> 
        <li>Sudo</li> 
        <li>Gfg</li> 
        <li>Gate</li> 
        <li>Placement</li> 
    </ol> 
</body> 
  
</html>

输出：

将样式应用于<li>标签：某些CSS属性也可以用于设置<li>元素的样式，这些元素是：list-style，list-style-image，list-style-position和list-style-type。这些属性可以直接应用于<li>元素，尽管它们通常应用于父元素。

支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自MayankKhare大神的英文原创作品 HTML <li> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。