Décrivez une liste numérotée en utilisant HTML. Listes à puces

Une liste à puces est définie en ajoutant une petite puce, généralement sous la forme d'un cercle plein, avant chaque élément de la liste. La liste elle-même est formée à l'aide d'un conteneur

comme indiqué ci-dessous.
- Premier point
- Deuxième point
- Troisième point
La liste doit contenir une balise de fermeture

, sinon une erreur se produira. Balise de fermeture Bien que cela ne soit pas obligatoire, nous recommandons toujours de l’ajouter à des éléments de liste clairement séparés.

L'exemple 11.1 montre le code HTML permettant d'ajouter une liste à puces à une page Web.

Exemple 11.1. Créer une liste à puces

Liste à puces

Cheburachka
Géna Crocodile
Shapokliak
Rat Larisa

Résultat cet exemple montré sur la fig. 11.1.

Riz. 11.1. Vue liste à puces

Faites attention au remplissage en haut, en bas et à gauche de la liste. De tels retraits sont ajoutés automatiquement.

Les marqueurs peuvent prendre l’une des trois formes suivantes : cercle (par défaut), cercle et carré. Pour sélectionner un style de marqueur, utilisez l'attribut type de la balise

Valeurs valides

Type de liste	Code HTML	Exemple
Liste avec marqueurs de cercle		D'abord Deuxième Troisième
Liste avec des puces circulaires		D'abord Deuxième Troisième
Liste à puces carrées		D'abord Deuxième Troisième

L'apparence du marqueur peut varier légèrement en fonction différents navigateurs, ainsi que lors de la modification de la police et de la taille du texte.

La création d'une liste avec des puces carrées est illustrée dans l'exemple 11.2.

Exemple 11.2. Type de marqueurs

Liste à puces

Changer les croyances

changement de foi religieuse (facultatif : bouddhisme, confucianisme, hindouisme). Offre spéciale- Judaïsme et Islam ensemble ;
un changement dans la croyance en l'infaillibilité du parti favori ;
la croyance que les extraterrestres existent ;
préférence pour un système politique comme le meilleur du genre (au choix : féodalisme, socialisme, communisme, capitalisme).

Le résultat de cet exemple est présenté sur la Fig. 11.2.

Listes HTML utilisé pour regrouper des informations liées. Il existe trois types de listes :

liste à puces —

marqué d'un marqueur,
liste numérotée —
1. marqué d'un numéro
  liste de définitions- - se compose de paires de termes
  —
  définition.
  Chaque liste est un conteneur dans lequel se trouvent des éléments de liste ou des paires terme-définition. Les éléments de liste se comportent comme des éléments de bloc, empilés les uns sous les autres et occupant toute la largeur du bloc conteneur. Chaque élément de la liste a bloc supplémentaire, situé sur le côté, qui ne participe pas à l'aménagement.
  
  Création de listes HTML
  
  1. Liste à puces
  
  Liste à puces est une liste non ordonnée (de la liste anglaise non ordonnée). Créé à l'aide d'une balise associée
  . Le marqueur d'un élément de liste est une étiquette, par exemple un cercle plein.
  Les navigateurs ajoutent par défaut le formatage suivant au bloc de liste :
  Chaque élément de liste est créé à l'aide d'une balise appariée
2. (à partir de l'élément de liste anglais).
- Microsoft
- Google
- Pomme
Riz. 1. Liste à puces
2. Liste numérotée

Liste numérotée est créé à l’aide d’une balise appariée. Chaque élément de liste est également créé à l'aide de l'élément
. Le navigateur numérote automatiquement les éléments dans l'ordre, et si vous supprimez un ou plusieurs éléments d'une telle liste, les nombres restants seront automatiquement recalculés.
Le bloc de liste a également des styles de navigateur par défaut :
L'attribut value est disponible, ce qui vous permet de modifier le numéro par défaut de l'élément de liste sélectionné. Par exemple, si pour le premier élément de la liste vous définissez

, alors la numérotation restante sera recalculée par rapport à la nouvelle valeur.

Pour l'étiquette

Attribut	Description, valeur acceptée
renversé	L'attribut reversed provoque l'affichage de la liste dans l'ordre inverse (par exemple, 9, 8, 7...).
commencer	L'attribut start spécifie la valeur initiale à partir de laquelle la numérotation commencera, par exemple une construction le premier article recevra le numéro de série « 10 ». Vous pouvez également spécifier simultanément le type de numérotation, par exemple : .
taper	L'attribut type spécifie le type de marqueur à utiliser dans la liste (lettres ou chiffres). Valeurs acceptées : 1 — valeur par défaut, numérotation décimale. A - numérotation de liste dans ordre alphabétique, lettres majuscules(A B C D). a — numérotation des listes par ordre alphabétique, lettres minuscules (a, b, c, d). I - numérotation en chiffres majuscules romains (I, II, III, IV). i — numérotation en chiffres romains minuscules (i, ii, iii, iv).

Microsoft
Google
Pomme

3. Liste des définitions

Listes de définitions sont créés à l'aide d'une balise

Le bloc de liste de définitions possède les styles de navigateur par défaut suivants :

Pour les balises

Et

disponible .

Directeur:: Peter Tochiline
Casting:: Andreï Gaidulyan; Alexeï Gavrilov; Vitali Gogounski; Maria Kojevnikova

Riz. 3. Liste des définitions

4. Liste imbriquée

Souvent, les capacités des listes simples ne suffisent pas : par exemple, lors de la création d'une table des matières, il n'y a aucun moyen de s'en passer éléments imbriqués. Le balisage de la liste imbriquée serait le suivant :

Paragraphe 1.
Point 2.
- Sous-paragraphe 2.1.
- Sous-paragraphe 2.2.
  - Paragraphe 2.2.1.
  - Paragraphe 2.2.2.
- Sous-paragraphe 2.3.
Point 3.

Riz. 4. Liste imbriquée

5. Liste numérotée à plusieurs niveaux

Une liste à plusieurs niveaux est utilisée pour afficher les éléments de la liste sur différents niveaux avec divers retraits. Le balisage d'une liste numérotée à plusieurs niveaux serait le suivant :

paragraphe
paragraphe
1. paragraphe
2. paragraphe
3. paragraphe
  1. paragraphe
  2. paragraphe
  3. paragraphe
4. paragraphe
paragraphe
paragraphe

Ce balisage par défaut créera une nouvelle numérotation pour chaque liste imbriquée, en commençant par un. Pour créer une numérotation imbriquée, vous devez utiliser les propriétés suivantes :
counter-reset réinitialise un ou plusieurs compteurs, en spécifiant la valeur à réinitialiser ;
counter-increment spécifie la valeur de l'incrément du compteur, c'est-à-dire dans quels incréments chaque élément suivant sera numéroté ;
contenu - contenu généré, dans ce cas, il est responsable de l'affichage du numéro avant chaque élément de la liste.

Ol ( /* supprime la numérotation standard */ list-style: none; /* Identifiez le compteur et donnez-lui le nom li. La valeur du compteur n'est pas spécifiée - par défaut elle est 0 */ counter-reset: li; ) li :before ( /* Nous définissons l'élément qui sera numéroté - li. Le pseudo-élément before indique que le contenu inséré à l'aide de la propriété content sera placé avant les éléments de la liste. Ici, nous définissons également la valeur de l'incrément du compteur (par défaut est 1). */ counter-increment: li; / * La propriété content affiche le numéro de l'élément de la liste. counters() signifie que le texte généré représente les valeurs de tous les compteurs portant ce nom. Un point entre guillemets ajoute un point de séparation entre les nombres, et un point avec un espace est ajouté avant le contenu de chaque élément de la liste */ content: counters(li,".") "."; )
Riz. 5. Liste numérotée à plusieurs niveaux

- 4,5 sur 5 basé sur 2 votes

Très souvent, certaines informations d'un site Internet doivent être présentées sous forme de listes.

Les listes vous permettent d'organiser et de systématiser diverses informations et le présenter au visiteur de manière pratique.

Les listes HTML se déclinent en trois variétés : les listes à puces, les listes numérotées et les listes de définitions. Voyons comment les créer dans l'ordre.

Liste à puces.

Ce type de liste est le plus souvent utilisé. La liste à puces en HTML est créée à l'aide de balises

. Dans ce cas, un marqueur est ajouté en face de chaque élément de la liste ; par défaut, il s'agit d'un marqueur en forme de cercle. A l'aide de balises, un conteneur est créé, à l'intérieur duquel se trouvent les éléments de la liste : .

Le code de la liste à puces ressemblera à ceci :

Cette option est
Cette option
Option comme celle-ci

Vous pouvez essayer de créer une page HTML en utilisant ce code et vous obtiendrez la liste suivante :

Comme vous pouvez le voir, chaque élément de la liste est positionné avec nouvelle ligne, tandis que certains retraits sont créés à gauche, en haut et en bas. Chaque élément de la liste commence par un marqueur ; le marqueur peut être un cercle rempli (utilisé par défaut), un cercle ou un carré. À l'étiquette

disque - cercle;
cercle - cercle;
carré - carré.

La valeur du disque est la valeur par défaut.

Un exemple de création d'une liste à puces avec des marqueurs de cercle :

Cette option est
Cette option
Option comme celle-ci

En conséquence, la liste prendra la forme suivante :

Création d'une liste à puces avec des marqueurs carrés :

Cette option est
Cette option
Option comme celle-ci

La liste ressemblera à :

L'attribut type peut être appliqué à plus qu'une simple balise

. De cette façon, vous pouvez créer une liste avec une variété de puces.

Cette option est
Cette option
Option comme celle-ci

Le résultat sera le suivant :

Listes numérotées.

Les listes numérotées en HTML sont des listes dans lesquelles chaque élément possède un numéro de série ; les listes numérotées sont créées à l'aide d'une balise.

Première ligne
Deuxième ligne
Troisième ligne

La liste ressemble à ceci :

Par défaut, la numérotation est en chiffres arabes. Mais l'étiquette

Vous trouverez ci-dessous des versions abrégées du code et le type de numérotation qui peut être dans un cas ou un autre.

Vue liste :

Numérotage minuscules Alphabet latin :

Vue liste :

Liste des définitions en HTML.

Un type particulier de liste est celui des listes de définitions. Ils diffèrent en ce que chaque élément de liste se compose de deux éléments, un terme et un texte qui révèle sa signification. Ces listes sont créées à l'aide de balises

. Étiqueter

définit le terme et la balise

description ou définition d'un terme.

Enregistré cette liste de la manière suivante :

Terme 1: Définition 1
Terme 2: Définition du terme 2
Terme 3: Définition 3

Le résultat sera la liste suivante :

Comme vous pouvez le constater, cela crée une indentation appropriée pour le terme et le texte de définition.

Listes imbriquées ou multi-niveaux en HTML.

Parfois, il est nécessaire d'imbriquer une autre liste dans un élément d'un certain type de liste. HTML vous permet d'intégrer de manière illimitée certaines listes dans des éléments d'autres listes.

Par exemple, voici du code qui imbrique des listes numérotées dans des éléments de liste à puces.

Cette option est
1. Première ligne
2. Deuxième ligne
3. Troisième ligne
Cette option
1. Première ligne
2. Deuxième ligne
3. Troisième ligne
Option comme celle-ci
1. Première ligne
2. Deuxième ligne
3. Troisième ligne

Bonne journée!

Dans cet article, vous découvrirez toutes les possibilités des listes, comprendrez comment créer une liste numérotée et les balises principales qui vous aideront à transformer une simple liste à puces en une liste plus intéressante et plus visible avec des puces arbitraires. Après avoir terminé la leçon, vous comprendrez où les listes sont utilisées et dans quelles circonstances elles peuvent être utilisées.

Cet article est le troisième de ce court cours sur Les bases du HTML. Avant de lire cette leçon, je vous recommande de parcourir les deux précédentes :

L'article vient de commencer et vous pouvez déjà remarquer l'utilisation d'une liste à puces standard. Sur mon site Web, cela semble assez simple : à gauche, il y a un petit retrait avec une ligne et un marqueur carré. Plus loin dans l'article, nous examinerons en détail quels types de marqueurs existent, comment créer des nombres et également comment créer votre propre marqueur.

Dans chaque partie de l'article, la création de certaines listes sera accompagnée d'explications détaillées pour l'insertion d'une liste particulière.

1. Listes à puces en HTML

Ce type de liste permet de lister dans le texte un ensemble d'éléments ayant des significations similaires. Il peut s'agir d'une liste de liens liés au même sujet, explication détaillée pour certaines parties du texte. Mais voyons à quoi ressemblent les listes à puces dans le code :

Et voici à quoi cela ressemble dans le navigateur :

Riz. 1.1. Vue générale Liste non ordonnée à puces HTML dans le navigateur

1.1 Puces standard pour les listes à puces

Dans l'image ci-dessus (Figure 1.1.), vous pouvez voir les cercles au début de chaque élément de menu. C'est le marqueur. Par défaut, il apparaît sous la forme d'un cercle plein dans le navigateur. Il existe plusieurs types de marqueurs en HTML : cercle plein, cercle vide et carré. Ils ne nécessitent aucun CSS ou image tierce :

1.2 Marqueur de liste sous la forme d'un cercle vide

Vous connaissez les valeurs des attributs, mais voyons maintenant comment créer une liste à puces HTML dans le code. Dans le tableau ci-dessus, nous avons choisi la deuxième valeur « cercle » pour l'attribut type et l'avons défini sur notre liste à puces :

<HTML > <tête > <titre > Exemple de liste à puces avec un marqueur de cercle vide</titre> </tête> <corps > Étoiles: <ul type = "cercle" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Bételgeuse</li> <li > Soleil</li> </ul> </corps> </html>

Voyons immédiatement à quoi ressemblera ce code dans le navigateur :

Riz. 1.2. Affichage d'un marqueur de liste sous forme de cercle dans le navigateur

1.3 Marqueur de liste en forme de carré

Regardons également le dernier exemple avec un marqueur carré pour une liste HTML :

Faites attention au marqueur, il est devenu carré :

Riz. 1.3. Vue d'un marqueur de liste sous forme de carré dans le navigateur

Note importante: Cette méthode n'est plus utilisée pour créer des styles pour les listes à puces. Il existe une séparation claire entre CSS (lisez ce qu'est CSS) et HTML. HTML est destiné au balisage et CSS sert à créer une apparence attrayante.

Code qui contient cet attribut, lorsque vous spécifiez le type de document actuel comme HTML5 (""), donnera une erreur lors de la validation. Si vous n'avez pas entendu ce qu'est la validation, alors cet endroit est fait pour vous.

L'erreur sera la suivante :

Riz. 1.4. Erreur sur le validateur lors de l'utilisation de l'attribut "type" d'une liste

Nous avons trié les listes à puces. Passons maintenant aux listes numérotées, puis examinons les listes imbriquées et plusieurs exemples prêts à l'emploi, qui sont le plus souvent utilisés sur des sites réels.

2. Listes numérotées en HTML

Contrairement au type de listes précédent, les listes numérotées ont une caractéristique importante : elles sont automatiquement numérotées. Ceci est utile lorsque vous devez numéroter une grande liste. Le faire manuellement prendra beaucoup de temps et vous pouvez toujours vous perdre. Une liste numérotée est spécifiée à l'aide de la balise. À quoi cela ressemble en pratique :

Exemple de liste numérotée :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<HTML > <tête > <titre > Exemple de liste numérotée standard</titre> </tête> <corps > De un à cinq : <oh > <li > D'abord</li> <li > Deuxième</li> <li > Troisième</li> <li > Quatrième</li> <li > Cinquième</li> </ol> </corps> </html>

Voici à quoi ressemble une liste numérotée : paramètres standards dans le navigateur :

Riz. 2.1. Liste numérotée dans le navigateur avec paramètres standard

Comme son prédécesseur (liste à puces), il possède ses propres styles d'affichage des nombres. La numérotation régulière n'est pas le seul type de puce pour une liste numérotée en HTML.

2.1 Puces standards pour les listes numérotées

Ici, nous avons le choix non pas entre trois types de marqueurs, mais entre cinq :

Nom du marqueur	valeur de l'attribut "type"	Exemple de liste
Marqueurs sous forme de chiffres arabes	1	Badminton Base-ball
Marqueurs sous forme de lettres latines minuscules	un	Chomolungma Chogori Kanchenjunga
Marqueurs en forme de lettres majuscules latines	UN	Sommet en chute libre Allée de colère Insensé
Marqueurs de chiffres romains minuscules	je	Mer des Philippines Mer d'Oman mer de Corail
Marqueurs de chiffres romains majuscules	je	Rouge Vert Bleu

2.2 Numérotation personnelle dans la liste HTML

En plus de la sortie habituelle d'une liste numérotée, nous pouvons également commencer notre numérotation à partir de n'importe quel nombre. Pour ce faire, vous devez définir l'attribut supplémentaire "start" . Cette numérotation fonctionne sur tous les types de marqueurs pour listes numérotées. À quoi cela ressemble en pratique :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<HTML > <tête > <titre > Numérotation personnalisée pour une liste numérotée</titre> </tête> <corps > On commence à numéroter à partir de douze : <ol type = "a" start = "12" > <li > Douze</li> <li > Treize</li> <li > Quatorze</li> <li > Quinze</li> <li > Seize</li> </ol> </corps> </html>

Voici comment cela apparaîtra sur le site réel :

Riz. 2.2. Numérotation à partir d'un nombre arbitraire dans une liste numérotée

Dans l'image ci-dessus, nous avons numéroté la liste à partir de douze, tout en réalisant des marqueurs sous forme de lettres latines minuscules. Maintenant, je pense que la manière d'utiliser ces attributs dans vos projets est devenue claire.

Eh bien, passons maintenant aux listes HTML imbriquées.

3. Comment créer une liste à plusieurs niveaux (imbriquée) en HTML

Des listes à plusieurs niveaux sont utilisées sur le site pour créer des menus. Ce menu apparaît le plus souvent soit comme un menu déroulant vers le bas (leçon sur), soit comme un menu déroulant vers la gauche ou la droite. De tels menus vous permettent de stocker d'autres éléments de menu sous une forme compacte.

En utilisant des modèles de voitures comme exemple, nous allons construire une liste multi-niveaux en HTML :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<HTML > <tête > <titre > Liste à puces imbriquée HTML</titre> </tête> <corps > <ul > <li > Citroën<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </corps> </html>

Remarquez à quoi ressemble la liste à plusieurs niveaux dans le navigateur :

Riz. 3.1. Exemple de liste multi-niveaux en HTML

Nous avons créé une liste à plusieurs niveaux en utilisant des puces (tag

Mais nous pouvons nous unir listes à plusieurs niveaux numéroté et marqué comme suit :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<HTML > <tête > <titre > Listes numérotées, à puces et à plusieurs niveaux en HTML</titre> </tête> <corps > <ul > <li > Premier groupe de tulipes<oh > <li > Première année<ul > <li > Tulipes précoces simples</li> </ul> </li> <li > Seconde classe<ul > <li > Tulipes éponge</li> </ul> </li> </ol> </li> </ul> </corps> </html>

Dans l'exemple ci-dessus nous avons une double imbrication (2 niveaux). Tout d'abord, une liste de deux classes de tulipes est incluse ; nous l'avons numérotée. Ensuite, une liste à puces est imbriquée dans chacun des éléments de la liste numérotée.

Voyons à quoi cela ressemble dans le navigateur :

4. Matériel utile sur les listes HTML

Il s'agit d'informations qui nécessitent une compréhension des propriétés CSS. Pour ce faire, je recommande d'étudier les leçons suivantes : . Tous les exemples seront immédiatement avec code source et sont divisés en onglets HTML (structure), CSS (styles) et Résultat (résultat).

4.1 Comment transformer une liste HTML en chaîne

Transformer une liste HTML en chaîne peut être nécessaire lors de la création menu horizontal. C'est très simple à faire :

4.2 Comment créer une liste HTML sans icône

La propriété list-style-type en CSS en est responsable (plus de détails) :

4.3 Comment centrer une liste en HTML

Un élément de liste est élément de bloc, il doit donc être centré en utilisant les marges extérieures. Mais il y en a un point important— nous devons spécifier explicitement la largeur pour que l'alignement fonctionne :

4.4 Comment faire une liste en HTML avec des images

Une seule propriété CSS, list-style-image , suffit. Dans l'URL, spécifiez l'adresse avant l'icône. Je veux juste noter qu'il est préférable de sélectionner immédiatement une petite image, car la hauteur de la ligne de liste en dépend :

4.5 Liste à puces HTML de votre puce

Dans ce cas, vous devez au préalable connecter les icônes de police (par exemple, FontAwesome ). Ensuite, vous pouvez créer n'importe quelle icône au lieu d'un marqueur standard :

4.6 Comment faire une liste en HTML en plusieurs colonnes

Pour faire une liste en plusieurs colonnes nous utiliserons Propriété CSS nombre de colonnes (la propriété est prise en charge uniquement dans les navigateurs suivants : IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Vous devez également définir la hauteur de la liste pour voir la division en plusieurs colonnes :

5. Entraînez-vous à travailler avec des listes

Dans la vidéo ci-dessous, vous pouvez voir tout le travail avec les listes HTML en pratique :

Un autre type de liste implémenté en HTML est la liste numérotée. Sinon Listes HTML Ce type est appelé ordonné. Le nom de famille est souvent utilisé comme traduction formelle du nom de la balise correspondante.

Listes de ce genre représentent généralement une séquence ordonnée d’éléments individuels. La différence avec les listes à puces est que dans une liste numérotée, chaque élément est automatiquement précédé d'un numéro de série. Le type de numérotation dépend du navigateur et peut être défini par les paramètres des balises de liste. Sinon, la mise en œuvre de listes numérotées est très similaire à la mise en œuvre de listes à puces.

Mots clés
Et

Pour créer une liste numérotée, vous devez utiliser une balise conteneur, à l'intérieur de laquelle se trouvent tous les éléments de la liste. Les balises de liste d'ouverture et de fermeture fournissent un saut de ligne avant et après la liste, séparant ainsi la liste du contenu principal du document.

Comme pour une liste à puces, chaque élément d'une liste numérotée doit commencer par la balise

.
Voici un exemple de document HTML utilisant une liste numérotée : affichage dont navigateur est illustré à la Fig. 2.3.
Exemple de liste numérotée
Les étoiles les plus brillantes visibles depuis la Terre :
- Sirius
- Kanopus
- Arcturus
- Alpha Centauri
- Véga
- K appella
- Rigel
- Procyon
- Achernar
- Bêta Centaure
- Wetelgeuse
- Aldébaran
- Mizar
- Polaire
Riz. 2.Z. Liste numérotée
Dans la balise
1. .
  Exemple d'entrée :
2. .
  Paramètre de balise START

Site sur l'informatique

Création de listes HTML

1. Liste à puces

2. Liste numérotée