Etiqueta <li> de HTML

Definición y uso

<li> La etiqueta <li> define el elemento de lista.

<li> La etiqueta <ol> se usa para lista ordenada (<ol>)、lista sin orden (<ul>) y lista de menú (<menu>)。

En <ul> y <menu>, los elementos de la lista se muestran generalmente con puntos.

En <ol>, los elementos de la lista se muestran generalmente con números o letras.

Consejo:Use CSS paraEstablecer el estilo de la lista.

Vea también:

Tutorial de HTML:Lista de HTML

Manual de referencia de HTML DOM:Objeto Li

Tutorial de CSS:Establecer el estilo de la lista

Ejemplo

Ejemplo 1

Una lista ordenada (<ol>) y una lista sin orden (<ul>) de la lista HTML:

<ol>
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ol>
<ul>
  <li>Café</li>
  <li>Té</li>
  <li>Leche</li>
</ul>

Prueba personalmente

Ejemplo 2

Usar la propiedad value en la lista ordenada:

<ol>
  <li value="100">Café</li>
  <li>Té</li>
  <li>Leche</li>
  <li>Agua pura</li>
  <li>Jugo</li>
  <li>Cerveza</li>
</ol>

Prueba personalmente

Ejemplo 3

Establecer diferentes tipos de estilos de lista (usar CSS):

<ol>
  <li>Café</li>
  <li style="list-style-type:lower-alpha">Té</li>
  <li>Leche</li>
</ol>
<ul>
  <li>Café</li>
  <li style="list-style-type:square">Té</li>
  <li>Leche</li>
</ul>

Prueba personalmente

Ejemplo 4

En la lista, crear una lista (lista anidada):

<ul>
  <li>Café</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>Leche</li>
</ul>

Prueba personalmente

Ejemplo 5

Crea una lista anidada más compleja:

<ul>
  <li>Café</li>
  <li>Té</li>
    <ul>
      <li>Pu'er</li>
      <li>Te verde
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Leche</li>
</ul>

Prueba personalmente

Atributo

Atributo Valor Descripción
value Números Sólo se aplica a las listas <ol>. Establece el valor de inicio del elemento de lista. Los elementos de lista posteriores aumentarán en número.

Atributos globales

<li> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<li> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <li> Elemento:

li {
  display: list-item;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte