Liste HTML


HTML prend en charge les listes ordonnées, non ordonnées et définies :

Liste HTML

< tr class="firstRow">

Liste ordonnée

  1. Premier élément de la liste

    有序列表

    1. 第一个列表项

    2. 第二个列表项

    3. 第三个列表项

    无序列表

    • 列表项

    • 列表项

    • 列表项

    < /li>

  2. Deuxième élément de la liste

  3. Troisième élément de la liste

Liste non ordonnée

  • Éléments de la liste

  • Éléments de la liste

    tryitimg.gif

    在线实例

    < /li>

  • Liste des éléments<🎜>

<🎜 ><🎜><🎜>tryitimg.gif

Exemple en ligne<🎜>

1. Liste non ordonnée
Cet exemple montre une liste non ordonnée.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

2. Liste ordonnée
Cet exemple montre une liste ordonnée.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

(D'autres exemples peuvent être trouvés au bas de cette page.)

Liste HTML non ordonnée

Une liste non ordonnée est une liste d'éléments, avec des éléments dans Des points gras (généralement de petits cercles noirs) sont marqués.

La liste non ordonnée utilise la balise <ul> li>

</ul>

Le navigateur s'affiche comme suit :

Café

  • Lait

  • Liste commandée HTML

    • De même, une liste ordonnée est également une liste d'articles , et les éléments de la liste sont marqués de chiffres. La liste ordonnée commence par la balise <ol> Chaque élément de la liste commence par une balise <li>
Les éléments de la liste sont numérotés.

<ol>

<li>Café</li>

<li>Lait</li>

</ol>

Le navigateur affiche comme suit :

Café

  1. Lait

  2. Liste personnalisée HTML

    3. Une liste personnalisée n'est pas seulement une liste d'éléments, mais une combinaison d'éléments et de leurs commentaires.
Les listes personnalisées commencent par une balise <dl> Chaque élément de liste personnalisée commence par <dt>. La définition de chaque élément de liste personnalisée commence par <dd>. 

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Le navigateur s'affiche comme suit :
Café

  • - boisson chaude noire

  • Lait

  • - boisson froide blanche

  • Notes- Conseils utiles

Astuce :
Les paragraphes, sauts de ligne, images, liens, autres listes, etc. peuvent être utilisés dans les éléments de la liste.

Plus d'exemples

1. Différents types de listes ordonnées
Cet exemple montre différents types de listes ordonnées.

Instance


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

2. Différents types de listes non ordonnées Cet exemple montre différents types de listes non ordonnées.

Instance


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>


Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Listes imbriquées
Cet exemple montre comment imbriquer des listes. .

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

4. Liste imbriquée 2
Cet exemple montre une liste imbriquée plus complexe.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

5. Liste personnalisée
Cet exemple montre une liste de définitions.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Balise de liste HTML

< /tr >
TagDescription
<ol>
标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述
Définir une liste ordonnée
<ul>Définir un liste non ordonnée
<li><🎜>Définir les éléments de la liste
<dl><🎜>Liste de définitions
< ;dt><🎜>Éléments de liste personnalisés
<dd><🎜>Définir la description de l'élément de liste personnalisé
<🎜>
←
→