Balise HTML <li>

Définition et utilisation

<li> Balise définissant un élément de liste.

<li> Balise utilisée pour les listes ordonnées (<ol>)、listes sans ordre (<ul>) et les listes de menu (<menu>) .

Dans <ul> et <menu>, les éléments de liste sont généralement affichés avec des points de liste.

Dans <ol>, les éléments de liste sont généralement affichés avec des nombres ou des lettres.

Astuce :Utilisez CSS pourDéfinir le style de la liste.

Veuillez également consulter :

Tutoriel HTML :Listes HTML

Manuel de référence HTML DOM :Objet Li

Tutoriel CSS :Définir le style d'une liste

Exemple

Exemple 1

Une liste ordonnée (<ol>) et une liste sans ordre (<ul>) pour une liste HTML :

<ol>
  <li> Café</li>
  <li>Thé</li>
  <li> lait</li>
</ol>
<ul>
  <li> Café</li>
  <li>Thé</li>
  <li> lait</li>
</ul>

Essayez-le vous-même

Exemple 2

Utiliser l'attribut value dans une liste ordonnée :

<ol>
  <li value="100">Café</li>
  <li>Thé</li>
  <li> lait</li>
  <li>Eau pure</li>
  <li>Jus</li>
  <li>Bière</li>
</ol>

Essayez-le vous-même

Exemple 3

Définir différents types de styles de liste (en utilisant CSS) :

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

Essayez-le vous-même

Exemple 4

Créer une liste dans une liste (liste imbriquée) :

<ul>
  <li> Café</li>
  <li> Thé</li>
    <ul>
      <li> Pu'er</li>
      <li>Thé vert</li>
    </ul>
  </li>
  <li> lait</li>
</ul>

Essayez-le vous-même

Exemple 5

Créez une liste imbriquée plus complexe :

<ul>
  <li> Café</li>
  <li> Thé</li>
    <ul>
      <li> Pu'er</li>
      <li> Thé vert</li>
        <ul>
          <li> Biluochun</li>
          <li> Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li> lait</li>
</ul>

Essayez-le vous-même

Attribut

Attribut Valeur Description
value Numérique Seulement applicable aux listes <ol>. Définit la valeur de départ de l'élément de liste. Les éléments de liste suivants seront incrémentés de ce nombre.

Attributs globaux

<li> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<li> Les balises prennent également en charge Attributs d'événement dans HTML.

Configuration CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <li> Élément :

li {
  display: list-item;
}

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support