des centaines d'astuces pour vous faciliter le quotidien

LES LISTES ET ÉNUMÉRATIONS HTML

LES LISTES ET ÉNUMÉRATIONS HTML

 

 

                        

 

 

 

Les "listes HTML" sont très pratiques pour énumérer des listes d'items ou d'éléments.

 

Un exemple d'application le sommaire ci-dessus. 

 

 

 


...
,
...
et
...
 : Liste de définitions
  • : Est le conteneur de la liste de définitions
  • : Est le conteneur d'un terme à définir
  • : Est le conteneur de la définitions
Ex :

Banane

Fruit jaune alongé

pomme

Fruit vert sphérique

Résultat :
Banane
Fruit jaune alongé
Pomme
Fruit vert sphérique
Compatibilité : IE Firefox
Attribut : aucun

 

 

... : Titre d'une liste
Ex :
Titre liste
  • Item 1

  • Item 2
Résultat :
Titre liste
  • Item 1
  • Item 2
Compatibilité : IE Firefox
Attribut : aucun
  • ...
  •  : Item ou élément d'une liste
Ex :
  • Item 1

  • Item 2
Résultat :
  • Item 1
  • Item 2
type="..." : 
  • Dans les listes ordonnées "
    1. " : spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
    2. Dans les listes non-ordonnées "
      • " : spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
Ex :

  1. Item 1 - En chiffres

  2. Item 2 - En lettres minuscules

  3. Item 3 - En lettres majuscules

  4. Item 4 - Romains minuscules

  5. Item 5 - Romains majuscules

Résultat :
  1. Item 1 - En chiffres
  2. Item 2 - En lettres minuscules
  3. Item 3 - En lettres majuscules
  4. Item 4 - Romains minuscules
  5. Item 5 - Romains majuscules
Ex :

  • Item 1 - Disque plein

  • Item 2 - Disque creux

  • Item 3 - Carré

Résultat :
  • Item 1 - Disque plein
  • Item 2 - Disque creux
  • Item 3 - Carré
value="..." : Utilisé dans les listes ordonnées "
  1. ". Permet d'imposer un numéro de départ
Ex :

  1. Item 1

  2. Item 2

  3. Item 3

Résultat :
  1. Item 1
  2. Item 2
  3. Item 3
Compatibilité : IE Firefox
  1. ...
 : Listes ordonnées
Ex :

  1. Item 1

  2. Item 2

Résultat :
  • Item 1
  • Item 2
type="..." : Spécifie le type d'énumération. Les valeurs admissibles sont : "1" (chiffres)(valeur par défaut), "a" (lettres minuscules), "A" (lettres majuscules), "a" (chiffres romains minuscules), "A" (chiffres romains majuscules).
Ex :

  1. Item 1 - En chiffres

  2. Item 2

Résultat :
  1. Item 1 - En chiffres
  2. Item 2
Ex :

  1. Item 1 - En minuscules

  2. Item 2

Résultat :
  1. Item 1 - En minuscules
  2. Item 2
Ex :

  1. Item 1 - En majuscules

  2. Item 2

Résultat :
  1. Item 1 - En majuscules
  2. Item 2
Ex :

  1. Item 1 - En romain minuscule

  2. Item 2

Résultat :
  1. Item 1 - En romain minuscule
  2. Item 2
Ex :

  1. Item 1 - En romain majuscule

  2. Item 2

Résultat :
  1. Item 1 - En romain majuscule
  2. Item 2
value="..." : Spécifie le numéro de départ de l'énumération
Ex :

  1. Item 1

  2. Item 2

  3. Item 3

Résultat :
  1. Item 1
  2. Item 2
  3. Item 3
Compatibilité : IE Firefox
  • ...
 : Listes non ordonnées
Ex :

  • Item 1

  • Item 2

Résultat :
  • Item 1
  • Item 2
img src="..." : Permet de remplacer les puces standards par celles que vous aurez choisi.
Ex :

  • Item 1

    Item 2

    Item 3


Résultat :


  • Item 1Item 2Item 3

type="..." : Spécifie le type de puce. Les valeurs admissibles sont : "disc" (disque plein) (valeur par défaut), "circle" (disque creux), "square" (disque plein).
Ex :

    Disque plein
  • Item 1

  • Item 2

Résultat :
    Disque plein
  •  
  • Item 1
  • Item 2
Ex :

    Disque creux
  • Item 1

  • Item 2

Résultat :
    Disque creux
  •  
  • Item 1
  • Item 2
Ex :

    carré
  • Item 1

  • Item 2

Résultat :
    Carré
  •  
  • Item 1
  • Item 2
Compatibilité : IE Firefox
Listes imbriquées ou à plusieurs niveaux : Vous pouvez concevoir des listes à plusieurs niveaux et même mélanger les types de listes. Voyez les exemples ci-dessous.
Premier exemple : Voyez le résultat avec 3 niveaux de listes à puces. Remarquez le changement de type de puce (automatiquement) à chaque niveau de l'arborescence. Cet exemple étant devenu plus complexe, il est bon d'indenter les lignes de code afin d'avoir une bonne visualisation des balises ouvertes et fermées, cela évite bien des erreures.
Ex :

			
  • Item 1
    • Item 1.1
      • Item 1.1.1
      • Item 1.1.2
    • Item 1.2
  • Item 2
    • Item 2.1
    • Item 2.2
Résultat :
  • Item 1
    • Item 1.1
      • Item 1.1.1
      • Item 1.1.2
    • Item 1.2
  • Item 2
    • Item 2.1
    • Item 2.2
Deuxième exemple : Ici les listes à puces (non ordonnées) et listes ordonnées ont été alternées.
Ex :

			
  • Item 1
    1. Item 1.1
      • Item 1.1.1
      • Item 1.1.2
    2. Item 1.2
  • Item 2
    1. Item 2.1
    2. Item 2.2
Résultat :
  • Item 1
    1. Item 1.1
      • Item 1.1.1
      • Item 1.1.2
    2. Item 1.2
  • Item 2
    1. Item 2.1
    2. Item 2.2
Compatibilité : IE Firefox

 

Rechercher dans le site

Contact

MAC ASTUCE1

ASTUCES INFORMATIQUE WINDOWS

17/03/2016 19:06

Bon plan, les meilleurs sites et applications pour mini budget

  Vous êtes un radin ou simplement n’aimez pas dépenser un sou !   Ne vous inquiétez pas vous n'êtes pas le seul, des applications et sites Web sont spécialement dédiés à ceux qui traquent  les bonnes affaires. Radins.com    accompagne les...

TOUTS SAVOIR SUR LES DRONES

13/03/2015 10:55

Le drone DJI capture l'image d'un objet volant non identifié

Le drone DJI aurait  filmé un objet volant non identifié au-dessus de la Silicon Valley. La vidéo fait grand bruit sur Internet et suscite les hypothèses les plus variées.  La vidéo a été mise en ligne le 8 mars. Les images auraient été tournées par un drone DJI...
08/03/2015 12:58

Le drone DJI S1000+ hexacopter photo pro

Le DJI S1000+ hexacopter est un drone prêt à voler et à capturer le summum de la photographie aérienne.   Si vous cherchez un drone professionnel pour des inspections, agricole de précision, la photographie, la cinématographie, l'arpentage et plus, le S-1000 est le...

 

BEAUTÉ A PETIT PRIX

03/12/2012 22:56

Comment prendre un bain adoucissant

    Quand on veut prendre un bain adoucissant, on peut se préparer le mélange maison soi-même et en plus il est naturel.   Il faut mélanger une demi-tasse de miel avec deux grosses cuillères d’essence de lavande et rajouter le tout dans...
 

  PARTENAIRE