L'un des types de listes implémentés en HTML est la liste à puces. Sinon, les listes de ce type sont dites non numérotées ou non ordonnées. Le nom de famille est souvent utilisé comme traduction formelle du nom de la balise correspondante.
- , à l'aide duquel des listes de ce type sont organisées en documents HTML (UL - Unordered List, liste non ordonnée).
- (LI - Élément de liste, élément de liste). Étiqueter
- ne nécessite pas de balise de fermeture correspondante, bien que sa présence ne soit en principe pas interdite. Les navigateurs commencent généralement chaque nouvel élément de liste sur une nouvelle ligne lors de l'affichage d'un document.
Les informations fournies sont suffisantes pour construire une liste à puces de base. Donnons un exemple de document HTML utilisant une liste à puces, dont l'affichage par le navigateur est illustré à la Fig. 2.1.
Exemple de liste à puces Signes du zodiaque:
- Bélier
- Taureau
- Jumeaux
- Vierge
- Balance
- Scorpion
- Sagittaire
- Capricorne
- Verseau
- Poisson
Riz. 2.1. Affichage du navigateur de la liste à puces
Notez qu'en plus des éléments de liste marqués de la balise
- , d'autres éléments HTML peuvent être présents. Dans l'exemple ci-dessus, l'un de ces éléments est du texte brut, qui n'est pas un élément de liste, mais fait office de titre.
Note
Certains manuels sur le langage HTML indiquent qu'une balise conteneur doit être utilisée pour définir le titre de la liste.
(LH - En-tête de liste, en-tête de liste). Cette balise n'est actuellement reconnue par aucun navigateur courant et ne fait pas partie de la spécification HTML. Ainsi, son utilisation devient inutile, même si elle n’entraînera aucune erreur. Dans la balise
- deux paramètres peuvent être spécifiés : COMPACT et TYPE.
- .
Exemple d'entrée :
- .
Note
Les navigateurs interprètent différemment la spécification du type de puce pour un élément de liste individuel. Le navigateur Netscape modifie l'apparence du marqueur pour celui-ci et tous les suivants jusqu'à ce que la prochaine redéfinition de l'apparence du marqueur soit rencontrée. Internet Explorer modifie l'apparence du marqueur uniquement pour cet élément.
Marqueurs de liste graphiques
Vous pouvez utiliser des images graphiques comme puces de liste, ce qui est largement utilisé pour créer des documents HTML attrayants et bien conçus. En fait, cette possibilité n'est pas offerte directement par le langage HTML, mais est implémentée de manière quelque peu artificielle. Cela ne signifie pas que cela n'est pas recommandé ou répréhensible, mais seulement qu'aucune construction spéciale du langage HTML ne sera utilisée ici.
Pour comprendre l'idée, vous devez comprendre le mécanisme d'implémentation des listes sur les pages HTML. Il s'avère que la balise list
- (comme d'ailleurs les balises de liste d'autres types, discutées ci-dessous) effectue une seule tâche - elle indique au navigateur que toutes les informations situées après cette balise doivent être affichées décalées vers la droite (en retrait) d'un certain montant. Mots clés
- , qui pointent vers des éléments de liste individuels, fournissent des marqueurs d'éléments de liste standard.
Si nous devons créer une liste avec des marqueurs graphiques, nous pouvons alors nous passer complètement de balises
- . Il suffira d'insérer l'image graphique souhaitée avant chaque élément de la liste. Le seul problème à résoudre est de séparer les éléments de la liste les uns des autres. Vous pouvez utiliser des balises de paragraphe pour cela
Ou forcer un saut de ligne
. Un exemple de mise en œuvre d'une liste avec des marqueurs graphiques dont l'affichage est illustré à la Fig. 2.2 est présenté ci-dessous :qui ne sera transmis qu'une seule fois. La taille des fichiers d'une petite image est également extrêmement petite.
Note
Les méthodes de création de listes avec des puces graphiques sont abordées tour à tour au chapitre 8.
Les listes numérotées sont une collection d'éléments avec leurs numéros de série. Le type et le type de numérotation dépendent des paramètres de l'élément
- , qui est utilisé pour créer la liste. Les valeurs suivantes peuvent servir d'éléments de numérotation :
- Chiffres arabes (1, 2, 3, ...) ;
- Chiffres arabes avec un zéro non significatif pour les nombres inférieurs à dix (01, 02, 03, ...,10) ;
- lettres majuscules latines (A, B, C, ...) ;
- lettres latines minuscules (a, b, c, ...) ;
- chiffres romains majuscules (I, II, III, ...) ;
- chiffres romains minuscules (i, ii, iii, ...) ;
- Numérotation arménienne ;
- Numérotation géorgienne.
- . La valeur est n’importe quel entier positif. Le type de numérotation défini n'a pas d'importance, même si des lettres latines sont utilisées comme liste. Si les attributs start et value sont appliqués à une liste en même temps, alors ce dernier est prioritaire et la numérotation est affichée à partir du nombre spécifié par value , comme le montre l'exemple 1.
Exemple 1 : Modification de la numérotation de la liste
Listes - Vous devez prendre bien soin de votre lieu de travail.
- Réglez l'éclairage de la pièce de manière à ce que la source lumineuse soit située sur le côté ou derrière l'opérateur.
- Pour éviter les complications médicales, il est recommandé de choisir une chaise avec une assise moelleuse.
Le premier élément de la liste dans cet exemple commencera par le chiffre romain IV, puisque l'attribut start="4" est spécifié, puis vient le numéro V, et le dernier élément sort dans le désordre et se voit attribuer le numéro X (Figure 1).
Riz. 1. Chiffres romains dans la liste
Écrire des chiffres
Par défaut, une liste numérotée a une certaine apparence : il y a d'abord un chiffre, puis un point, et ensuite le texte est affiché séparé par un espace. Cette forme d'écriture est visuelle et pratique, mais certains développeurs préfèrent voir une manière différente de concevoir la numérotation des listes. À savoir, de sorte qu'au lieu d'un point, il y ait un crochet fermant, comme le montre la Fig. 2 ou quelque chose de similaire.
Riz. 2. Vue de liste numérotée avec parenthèse
Les styles vous permettent de modifier le type de numérotation des listes à l'aide des propriétés de contenu et de contre-incrément. Tout d'abord, le sélecteur ol doit être réglé sur counter-reset : item , cela est nécessaire pour que la numérotation dans chaque nouvelle liste recommence. Sinon, la numérotation continuera et au lieu de 1,2,3 vous verrez 5,6,7. La valeur de l'article est un identifiant unique pour le compteur, nous le choisissons nous-mêmes. Ensuite, vous devez masquer les marqueurs d'origine via la propriété de style list-style-type avec la valeur none .
La propriété content fonctionne généralement en conjonction avec les pseudo-éléments ::after et ::before. Ainsi, la construction li::before dit qu'un certain contenu doit être ajouté avant chaque élément de la liste (exemple 2).
Exemple 2. Création de votre propre numérotation
Li::avant ( contenu : compteur(élément) ") "; /* Ajoute une parenthèse aux nombres */ counter-increment: item; /* Définit le nom du compteur */ )
La propriété content avec la valeur counter(item) affiche un nombre ; En ajoutant une parenthèse, comme le montre cet exemple, nous obtenons le type de numérotation requis. un contre-incrément est nécessaire pour augmenter le numéro de liste de un. Notez que le même identifiant, nommé item , est utilisé partout. Le code final est présenté dans l'exemple 3.
Exemple 3 : Modification de l'affichage de la liste
Listes - D'abord
- Deuxième
- Troisième
- Quatrième
En utilisant la méthode ci-dessus, vous pouvez créer n'importe quel type de liste numérotée, par exemple mettre un nombre entre crochets, dans ce cas, une seule ligne changera dans les styles.
Contenu : "[" compteur (élément) "] " ;
Liste avec des lettres russes
Il existe une liste numérotée avec des lettres latines, mais il n'y a pas de lettres russes pour la liste. Ils peuvent être ajoutés artificiellement en utilisant la technique ci-dessus. Puisque la numérotation se fait par styles, la liste elle-même reste originale, seule la classe sélectionnée y est ajoutée, appelons-la cyrilique (exemple 4).
Exemple 4 : Code pour créer une liste
- Un
- Deux
- Trois
L'ajout de lettres se fait à l'aide du pseudo-élément ::before et de la propriété content. Puisque chaque ligne doit avoir sa propre lettre, nous utiliserons la pseudo-classe :nth-child(1) , avec le numéro de la lettre écrit entre parenthèses. La première lettre est bien entendu A, la deuxième est B, la troisième est C, etc. Cet ensemble complet est ajouté au sélecteur li comme suit (exemple 5).
Exemple 5 : Utilisation de la pseudo-classe :nth-child
Cyrilique li:nth-child(1)::before ( contenu : "a)"; ) .cyrilic li:nth-child(2)::before ( contenu : "b)"; ) .cyrilic li:nth-child(3)::before ( contenu : "at)"; )
Dans cet exemple, chaque lettre est suivie d'une parenthèse, toutes les lettres sont en minuscules. Vous pouvez définir votre propre type de numérotation de liste, par exemple elle peut contenir des lettres majuscules avec un point, avec une ou deux parenthèses, ou uniquement des lettres. Contrairement à la numérotation standard, nous sommes libres de faire ici ce que nous voulons. Une liste de dix lettres devrait suffire pour presque toutes les situations, mais si cela s'avère soudainement insuffisant, rien ne nous empêche d'élargir notre liste pour inclure au moins toutes les lettres de l'alphabet russe.
Nous ajustons enfin l'alignement et la position des lettres, spécifions éventuellement la taille de la police, la couleur et d'autres paramètres (exemple 6).
Exemple 6. Liste avec des lettres russes
Liste - Bortsch
- Escalopes de brochet
- Kulebyaka
- Champignons à la crème sure
- Crêpes au caviar
- Kvas
Le résultat de cet exemple est présenté sur la Fig. 3.
Bonjour, chers lecteurs du site blog. Aujourd'hui, dans le cadre de cette section, je souhaite parler des différentes listes HTML qui peuvent être créées à partir de balises UL, OL, LI et DL spécialement conçues à cet effet. Les paires UL et LI créent des listes à puces, les paires OL et LI créent des listes numérotées et les éléments DL, DT et DD créent des listes de définitions. Nous examinerons également brièvement les principes de création de structures imbriquées.
Je voudrais vous rappeler que nous avons déjà réussi à parler des bases de la mise en page moderne ainsi que de la mise en page tabulaire (). De plus, nous avons abordé les bases et avons appris jusqu'au bout.
Listes à puces basées sur les balises UL et LI
La balise UL est utilisée pour créer des listes à puces et la balise OL est utilisée pour créer des listes numérotées. Ces balises sont des balises par paires et bloquent, tout comme l'élément LI.
Entre les balises d'ouverture et de fermeture se trouvent des éléments de liste individuels, qui à leur tour sont enfermés dans un élément LI d'ouverture et de fermeture. Le navigateur ajoute des retraits d'une ligne en haut et en bas des listes HTML, similaires à l'indentation créée par une balise de paragraphe.
Regardons, par exemple, une option à puces qui pourrait ressembler à ceci :
- Première ligne
- Deuxième
- Dernier élément
Seuls les éléments LI peuvent se trouver à l'intérieur des balises UL d'ouverture et de fermeture, et dans ces éléments (clauses) eux-mêmes, vous pouvez insérer n'importe quel contenu (texte, images, titres, paragraphes, liens et même d'autres listes).
Ceux. L'UL sert uniquement à organiser une liste à puces (non ordonnée), et tout ce que vous voyez sur une page Web à l'intérieur est implémenté en utilisant le contenu des éléments LI.
Pour UL, vous pouvez modifier le type de marqueur en spécifiant différentes valeurs pour l'attribut « Type ». Si le « Type » (contrôle de l'apparence des marqueurs) pour l'élément UL n'est pas spécifié, alors l'apparence par défaut du marqueur sera affichée (disque - un cercle rempli de la couleur du texte) :
- — cercle plein (par défaut) ;
- - cercle vide ;
- - carré
Dans les exemples ci-dessus, nous avons spécifié l'attribut « Type » dans l'élément UL, en utilisant ce type de marqueur pour tous les éléments. Mais l'attribut « Type » peut également être spécifié pour chaque balise LI individuelle, définissant son propre type de marqueur pour cet élément.
Exemple de liste à puces avec différents types de puces pour chaque élément :
- Marqueur en forme de disque rempli
- Marqueur en forme de disque non peint
- Carré
Listes numérotées en HTML basées sur la balise OL
Pour créer une liste numérotée, des balises OL sont utilisées, dans lesquelles les éléments LI seront à nouveau situés. OL et LI, comme je l'ai déjà mentionné, sont basés sur des blocs (c'est-à-dire qu'ils ont tendance à occuper tout l'espace dont ils disposent en largeur) et rien d'autre que les éléments LI ne peut être placé à l'intérieur d'OL.
Il s'avère que OL et UL sont des balises de service qui ne sont nécessaires que pour indiquer au navigateur le type de liste que nous créons (à puces ou numérotées). Dans le cas d'un élément numéroté, à gauche de chaque élément nous verrons non pas un marqueur, mais un numéro et un point derrière lui :
- Première ligne
- Deuxième point
- Troisième ligne
Comme je l'ai mentionné juste au-dessus, les éléments UL, OL et LI ont la possibilité d'utiliser l'attribut TYPE. Il vous permet de configurer le type de marqueur ou de spécifier quels chiffres ou lettres seront utilisés pour numéroter les éléments de la liste. Pour une liste numérotée, les paramètres de cet attribut peuvent prendre les valeurs suivantes :
- — la numérotation sera effectuée en chiffres arabes réguliers (la même option sera utilisée par défaut, en l'absence de l'attribut « Type ») ;
- — les majuscules comme numérotation ;
- - minuscules ;
- - les chiffres romains majuscules ;
- - chiffres romains minuscules ;
Un exemple de liste numérotée avec différents types de numérotation pour chaque élément :
- numéroté avec de grands chiffres romains
- Numérotation en petites lettres latines
- Numérotation avec de petits chiffres romains
Lors de la création de listes numérotées, il est également possible de commencer la numérotation non pas à partir d'un, mais à partir du numéro spécifié dans l'attribut START. Par exemple:
- Le premier élément dont le numéro est précisé dans la balise OL avec l'attribut start="23"
- L'élément suivant, avec un numéro un plus haut
- Encore un de plus
Pour OL, vous pouvez également démarrer une nouvelle numérotation à partir de n'importe quelle valeur, à partir de n'importe quel élément, en écrivant l'attribut VALUE avec le numéro requis dans le LI d'ouverture de cet élément. Par exemple:
- Premier point avec le numéro un
- Cet élément recevra le numéro spécifié dans l'attribut value="32"
- Article avec un grand nombre
Concevoir l'apparence des listes en CSS (feuilles de style)
Mais, en règle générale, l'apparence des marqueurs n'est désormais pas définie via l'attribut TYPE, mais pour lequel les propriétés correspondantes sont spécifiées.
Ici, je vais simplement donner un exemple de divers marqueurs pour listes non numérotées, dont l'apparence est définie via un fichier séparé avec des feuilles de style en cascade.
- Premier point
- Deuxième
- Dernier
Mais nous en reparlerons dans les articles suivants. C’est ainsi que se définit l’apparence des marqueurs UL sur ce blog. Les images sont utilisées comme marqueurs : pour les éléments normaux d'une liste non numérotée - , pour les éléments imbriqués d'une liste non numérotée - .
Listes spéciales et imbriquées en code HTML
Le troisième et dernier type est appelé « listes de définitions » et est spécifié à l'aide de trois balises : DL, DT et DD. DL indique au navigateur que ce qui suit est une liste de définitions.
Généralement, ce type est utilisé (ou était destiné à être utilisé) pour écrire des entrées de dictionnaire composées de termes (enfermés dans des balises DT) et de leurs descriptions (enfermées dans des balises DD).
- Premier mandat
- Description
- Deuxième mandat
- Sa description
Si vous regardez l'exemple ci-dessus, vous remarquerez que l'élément DD (la description du terme) est décalé (de 40 pixels) par rapport à l'élément DT (le terme lui-même).
En général, DL, DT et DD sont des balises de bloc, et seul le contenu avec des balises en ligne peut être inséré à l'intérieur d'un élément DT (il s'avère que les éléments de bloc des titres et des paragraphes ne peuvent pas être utilisés dans DT). Et à l'intérieur des balises DD, vous pouvez insérer n'importe quel élément, à la fois en ligne et en bloc.
Liste imbriquée en HTML, il est créé par analogie avec un simple, mais à l'intérieur de la liste principale, certains éléments sont à nouveau enfermés dans la balise d'ouverture et de fermeture UL ou OL.
Attention, le LI de fermeture de l'élément dans lequel l'élément imbriqué sera créé n'est placé qu'après l'intégralité du code de la liste imbriquée (ceci est très important pour son affichage correct sur la page web). La liste imbriquée pourrait ressembler à ceci :
- Le premier paragraphe du principal numéroté
- Deuxième point
- Premier élément d'une puce imbriquée
- Deuxième
- Troisième et dernier point
- Troisième élément numéroté
Bonne chance à toi! A bientôt sur les pages du site blog
Vous pouvez regarder plus de vidéos en allant sur
");">
Vous pourriez être intéressé
Comment insérer un lien et une image (photo) en HTML – Balises IMG et A 
Formulaires HTML pour le site - balises Form, Input et Select, Option, Textarea, Label et autres pour créer des éléments de formulaire Web Select, Option, Textarea, Label, Fieldset, Legend - Balises HTML pour le formulaire de listes déroulantes et de champs de texte 
Comment les couleurs sont définies dans le code HTML et CSS, sélection des nuances RVB dans les tableaux, sortie Yandex et autres programmes 
Intégrer et objet - Balises HTML pour afficher du contenu multimédia (vidéo, flash, audio) sur des pages Web 
Balises et attributs des rubriques H1-H6, ligne horizontale Hr, saut de ligne Br et paragraphe P selon la norme Html 4.01 
Tableaux en HTML - Balises Table, Tr et Td, ainsi que Colspan, Cellpadding, Cellspacing et Rowspan pour les créer- 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 de les présenter au visiteur sous une forme 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 également essayer de créer une page HTML en utilisant ce code, le résultat sera la liste suivante :
Comme vous pouvez le voir, chaque élément de la liste est placé sur une nouvelle ligne, avec certains retraits 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
- Il existe un attribut type, qui est utilisé pour définir le style du marqueur. Cet attribut a les significations suivantes :
- disque - cercle;
- cercle - cercle;
- carré - carré.
- Cette option est
- Cette option
- Option comme celle-ci
- Cette option est
- Cette option
- Option comme celle-ci
- . 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.
- et imbriqué dans ses balises
-
- 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
- Il existe un attribut de type, à l'aide des valeurs dont vous pouvez effectuer une numérotation en majuscules (type="A") ou minuscules (type="a") en lettres latines, en chiffres romains en majuscules (type="I" ) et le registre inférieur (type="i" ).
- . Étiqueter
- crée un conteneur pour la liste, balise
- définit le terme et la balise
- description ou définition d'un terme.
Cette liste s'écrit ainsi :
- 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
- Première ligne
- Deuxième ligne
- Troisième ligne
- Cette option
- Première ligne
- Deuxième ligne
- Troisième ligne
- Option comme celle-ci
- Première ligne
- Deuxième ligne
- Troisième ligne
Listes HTML utilisé pour regrouper des informations liées. Il existe trois types de listes :
liste à puces —
- - chaque élément de la liste
- marqué d'un marqueur,
liste numérotée —- - chaque élément de la liste
- 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 possède un bloc supplémentaire situé sur le côté, qui ne participe pas à la mise en page.
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
- (à partir de l'élément de liste anglais).
- disponible .
- Microsoft
- Pomme
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
- marqué d'un numéro
- . 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
- Les attributs suivants sont disponibles :
- Microsoft
- Pomme
- Et
- disponible .
- Directeur:
- Peter Tochiline
- Casting:
- Andreï Gaidulyan
- Alexeï Gavrilov
- Vitali Gogounski
- Maria Kojevnikova
Riz. 3. Liste des définitions4. 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ée5. Liste numérotée à plusieurs niveaux
Une liste à plusieurs niveaux est utilisée pour afficher les éléments de la liste à différents niveaux avec différentes indentations. Le balisage d'une liste numérotée à plusieurs niveaux serait le suivant :
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- 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
Tableau 1. Attributs de balise
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 des listes par 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).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
- ,
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 :
Vue liste :
Numérotation en lettres minuscules de l'alphabet latin :
Vue liste :
Vue liste :
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
La valeur du disque est la valeur par défaut.
Un exemple de création d'une liste à puces avec des marqueurs de cercle :
En conséquence, la liste prendra la forme suivante :
Création d'une liste à puces avec des marqueurs carrés :
La liste ressemblera à :
L'attribut type peut être appliqué à plus qu'une simple balise
- , mais aussi au tag
D'un point de vue pratique, les principes d'affichage des éléments dans une liste à puces peuvent être appliqués de la même manière qu'une liste numérotée. Mais étant donné qu’il s’agit d’une énumération, certaines caractéristiques seront discutées plus en détail.
Numérotation des listes
Il est permis de démarrer la liste à partir de n'importe quel numéro ; l'attribut start de l'élément est utilisé à cet effet
- ou valeur de l'élément
- , qui pointent vers des éléments de liste individuels, fournissent des marqueurs d'éléments de liste standard.
Le paramètre COMPACT est écrit sans valeur et est utilisé pour indiquer au navigateur que la liste donnée doit être affichée sous une forme compacte. Par exemple, la police ou la distance entre les lignes de liste, etc. peuvent être réduites.
Note
Actuellement, la présence du paramètre COMPACT dans la balise
- n'affecte en rien l'affichage des listes dans les principaux navigateurs. L'utilisation de ce paramètre est donc inutile, d'autant plus que son utilisation n'est pas recommandée par la spécification HTML 4.0.
Le paramètre TYPE peut prendre les valeurs suivantes : disque, cercle et carré. Ce paramètre permet de forcer l'apparition des puces de liste. Le type exact de marqueur dépendra du navigateur que vous utilisez. Les options d'affichage typiques sont les suivantes :
TYPE = disque - les marqueurs sont affichés sous forme de cercles pleins ; TYPE = cercle - les marqueurs sont affichés sous forme de cercles ouverts ; TYPE = carré - les marqueurs sont affichés sous forme de carrés remplis. Exemple d'entrée :
- .
La valeur par défaut est TYPE = disque. Pour les listes à puces imbriquées, la valeur par défaut est le disque au premier niveau, le cercle au deuxième niveau, le carré au troisième niveau et au-delà. C'est exactement ce qui se fait dans les dernières versions des navigateurs Netscape et Internet Explorer. Veuillez noter que d'autres navigateurs peuvent afficher les marqueurs différemment. Par exemple, dans la spécification HTML 4.0, le type de marqueur affiché lorsque TYPE = carré est spécifié sous la forme d'un contour carré.
Le paramètre TYPE avec les mêmes valeurs peut être utilisé pour spécifier le type de marqueurs pour les éléments individuels de la liste. Pour ce faire, le paramètre TYPE avec la valeur correspondante peut être spécifié dans la balise de l'élément de liste
- .
Dans une liste à puces, des caractères spéciaux appelés marqueurs de liste sont utilisés pour mettre en évidence ses éléments (ils sont souvent appelés puces, qui est la prononciation formelle du terme anglais bullet). L'apparence des marqueurs de liste est déterminée par le navigateur, et lors de la création de listes imbriquées, les navigateurs diversifient automatiquement l'apparence des marqueurs à différents niveaux d'imbrication.
Mots clés Et
Pour créer une liste à puces, 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, il n'est donc pas nécessaire d'utiliser des balises de paragraphe ici.
.
Chaque élément de la liste doit commencer par une balise