Comment faire une liste à HTML. Listes marquées

Bonjour, chers lecteurs! Aujourd'hui, comme une continuation du cycle des articles, les titres "Bases de HTML" Je souhaite vous présenter l'algorithme de création listes HTML Avec de l'aide uL et Li Tags (liste marquée), OL et LI (liste numérotée), DL, DT, DD (liste de définitions).

Maintenant, je continuerai à vous familiariser avec le plus couramment utilisé. tags HTMLqui sont utilisés pour créer des listes sur les pages du site. Si quelqu'un ne sait pas ce que c'est, probablement après que les informations reçues ci-dessous comprennent immédiatement ce dont nous parlons, car cette forme d'alimentation matérielle est très courante.

Listes HTML marquées - Etiquettes UL et LI

La liste d'étiquettes déterminera la balise UL. Entre les étiquettes UL d'ouverture et de fermeture, les éléments de liste sont situés, chacun doit à son tour être situé entre l'ouverture et la fermeture des étiquettes LI. Immédiatement, je note que la balise UL est une paire (la présence de la balise d'ouverture et de fermeture), ainsi que du bloc, c'est-à-dire qui forme le conteneur dans lequel les éléments (chaînes) sont inclus dans la balise LI. En conséquence, la balise LI est une paire et une ligne.

Défaut apparence Le marqueur est peint avec un cercle. Cependant, vous pouvez modifier son apparence en appliquant l'attribut type, qui présente les valeurs suivantes: disque, cercle, carré. La valeur du disque (qui détermine l'apparence du marqueur sous la forme d'un cercle peint) est utilisée par défaut. C'est-à-dire que si l'attribut de type n'est pas enregistré, l'apparition du marqueur ressemblera à un cercle peint. Si vous ajoutez aux attributs de la balise UL, nous obtiendrons les options suivantes:

Naturellement, chaque marqueur est un élément individuel de la liste marquée, vous pouvez donner votre apparence, prescrire les valeurs correspondantes de l'attribut type.

Listes HTML numérisées - Tags OL et LI

Voyons maintenant comment la liste numérotée est formée à l'aide des balises OL (bloc et étiquette de paire par analogie avec UL). En tant que balise qui définit les éléments de la liste numérotée HTML, la balise LI apparaît également ici. La liste numérotée est un ensemble d'éléments numérotés. Le type de numérotation est déterminé par l'attribut de type que les valeurs suivantes peuvent prendre:

A - lettres latines capitales;
a - lettres latines minuscules;
I - Capital Roman Nombres;
i - Nombres romaines minuscules;
1 - chiffres arabes

	1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique
1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique	1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique
1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique	1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique
1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique	1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique
1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique	1 élément de la liste numérotée 2 élément de la liste numérotée 3 élément de liste numérique

Vous pouvez également fournir une liste numérotée où la numérotation des éléments est effectuée dans l'ordre inverse, par exemple: 3, 2, 1. Ceci est effectué à l'aide de l'attribut de réserve de la balise OL.

Il est également possible de démarrer une liste marquée de 1, mais de tout autre numéro. Pour ce faire, vous pouvez utiliser l'attribut Démarrer et peu importe la valeur de l'attribut Type installé. Consultez un exemple d'utilisation de l'attribut Nom dans un ensemble avec différentes valeurs de l'attribut Attribut Type (1 et I):

Listes de définitions HTML - Tags DL, DD, DT

Un autre type de liste HTML est une liste de définitions. Il est formé comme suit. Le contenu de cette liste consiste entre ouvrir et fermer les balises DL qui forment un conteneur. La balise DT détermine n'importe quel terme et DD - une description de ce terme.

Comme vous pouvez le constater, le contenu de la balise DT, qui ressemble à un terme, est décalé vers la gauche et le contenu de la balise DD, qui est la définition de ce terme, elle est écrite en italique. Tout cela est réalisé grâce à l'utilisation de divers styles CSS, qui parleront certainement aux publications les plus proches.

Au fait, les réalités modernes sont telles que le langage HTML ne peut donc pas être pris en compte dans la séparation de sorte que de ne pas manquer ces matériaux essentiels, abonnez-vous à la mise à jour du blog via Flux RSS soit par courrier électronique. Sur ce thème de l'article d'aujourd'hui est épuisé si vous avez eu information nécessaireNe refusez pas d'utiliser les boutons des réseaux sociaux.

Bonne journée!

Dans cet article, vous apprendrez de toutes les fonctionnalités des listes, vous comprendrez comment effectuer une liste numérotée, Master Tags qui aidera à rendre une liste marquée simple plus intéressante et perceptible avec des marqueurs arbitraires. Après avoir passé la leçon, vous comprendrez une compréhension de l'endroit où les listes s'appliquent et dans quelles circonstances peuvent-elles être utilisées.

Cet article est le troisième d'une échéance donnée sur les bases de HTML. Avant de lire cette leçon, je recommande de passer les deux précédents:

Seul l'article a commencé et vous pouvez déjà remarquer l'utilisation d'une liste marquée standard. Sur mon site, il a l'air assez simple: à gauche, il y a un petit indent avec la ligne et un marqueur carré. En outre, dans l'article, nous examinerons en détail les marqueurs, comment faire des chiffres, ainsi que comment faire votre propre marqueur.

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

1. Listes marquées dans HTML

Ce type de liste est utilisé pour énumérer l'ensemble d'éléments similaires à ceux de l'ensemble. Il peut s'agir d'une liste de références associées à un sujet, une explication détaillée des parties individuelles du texte. Mais voyons comment les playlists ressemblent au code:

Mais on dirait dans le navigateur:

Figure. 1.1. Vue standard d'une liste HTML non mesurée marquée dans le navigateur

1.1 Marqueurs standard pour une liste marquée

Dans l'image ci-dessus (figure 1.1.), Vous pouvez remarquer les cercles au début de chaque élément de menu. Ceci est un marqueur. Par défaut, il se trouve dans le navigateur sous la forme d'un cercle peint. Il existe plusieurs types de marqueurs dans HTML: un cercle, un cercle vide et un carré. Ils ne nécessitent pas que CSS soit connectant des images tierces:

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

Attribut Valeurs que vous connaissez et voyons maintenant comment créer une liste HTML marquée dans le code. Dans la table ci-dessus, nous avons choisi la deuxième valeur "cercle" pour l'attribut de type et le définissez dans notre liste marquée:

<hTML\u003e <tête\u003e <titre\u003eUn exemple d'une liste marquée avec un marqueur sous la forme d'un cercle vide</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eÉtoiles:</ P\u003e <ul type \u003d "cercle"\u003e <li\u003eSirius</ Li\u003e <li\u003eArctur.</ Li\u003e <li\u003ePollux</ Li\u003e <li\u003eBethelgeuse</ Li\u003e <li\u003eLe soleil</ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Regardez immédiatement la façon dont ce code regardera dans le navigateur:

Figure. 1.2. Vue du marqueur de la liste sous la forme d'un cercle dans le navigateur

1.3 Marqueur de liste sous la forme d'un carré

Voyons également le dernier exemple avec un marqueur carré pour la liste HTML:

Faites attention au marqueur, il est devenu carré:

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

Note importante: Maintenant, cette façon n'est plus utilisée pour créer des styles avec des listes marquées. Il existe une division claire de CSS (qu'est-ce que la lecture CSS) et HTML. HTML - Pour marquage et CSS - pour créer une apparence attrayante.

Le code contenant cet attribut lors de la spécification du type de document actuel en tant que HTML5 (""), Je vais donner une erreur lorsque la validation. Si vous n'avez pas entendu quelle validation est, alors vous êtes ici.

L'erreur sera la suivante:

Figure. 1.4. Erreur sur le validateur lors de l'utilisation de l'attribut "Type" de la liste

Avec des listes marquées énoncées. Nous passons maintenant à la numérotation en nombre, puis envisagez des listes sous-zones et plusieurs exemples prêts à l'emploi les plus souvent utilisés dans des sites réels.

2. Listes numérotées dans HTML

Contrairement au type de liste précédent, il existe une caractéristique importante dans les listes numérotées: elles apposent automatiquement la numérotation. Ceci est utile lorsque vous devez numéroter grande liste. Manuel Il faudra beaucoup de temps, alors que vous pouvez toujours vous perdre. La liste numérotée est définie à l'aide de la balise. Comment ça regarde dans la pratique:

Un exemple de liste numérotée:

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

<hTML\u003e <tête\u003e <titre\u003eUn exemple de liste numérotée standard</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eDe un à cinq:</ P\u003e <ol\u003e <li\u003eD'abord</ Li\u003e <li\u003eDeuxième</ Li\u003e <li\u003eLe troisième</ Li\u003e <li\u003eQuatrième</ Li\u003e <li\u003eCinquième</ Li\u003e </ ol\u003e </ Corps\u003e </ Html\u003e

Cela ressemble à une liste numérotée avec paramètres standard Dans le navigateur:

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

Comme son prédécesseur (liste marquée), il a ses propres styles pour produire des chiffres. La numérotation normale n'est pas la seule forme de marqueurs dans une liste numérotée dans HTML.

2.1 Marqueurs standard pour la liste numérotée

Ici, nous avons le choix entre trois types de marqueurs, mais à partir de cinq:

Marqueur de nom	La valeur de l'attribut "type"	Liste d'exemples
Marqueurs sous forme de chiffres arabes	1	Badminton Base-ball
Marqueurs sous la forme de lettres latines minuscules	uNE.	Jomolungma Chechrie. Kanchenjanga
Marqueurs sous la forme de lettres latines capitales	UNE.	Sommet chute. Tantrum Alley. Insano.
Marqueurs sous la forme de nombres romains dans les minuscules	jE.	Mer Philippine Mer arabe mer de Corail
Marqueurs sous forme de chiffres romains dans les majuscules	JE.	rouge Vert Bleu

2.2 Numérotation propre dans la liste HTML

En plus de la sortie habituelle d'une liste numérotée, nous pouvons également commencer votre numérotation à partir de n'importe quel chiffre. Pour ce faire, vous devez définir un attribut «Démarrer» supplémentaire. Un tel numérotage fonctionne sur tous les types de marqueurs dans des listes numérotées. Comment ça regarde dans la pratique:

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

<hTML\u003e <tête\u003e <titre\u003eNumérotation arbitraire pour une liste numérotée</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eNous commençons à numéroter à partir de douze:</ P\u003e <type OL \u003d "A" Démarrer \u003d "12"\u003e <li\u003eDouze</ Li\u003e <li\u003eTreize</ Li\u003e <li\u003eQuatorze</ Li\u003e <li\u003eQuinze</ Li\u003e <li\u003eSeize</ Li\u003e </ ol\u003e </ Corps\u003e </ Html\u003e

Voici comment il sera affiché sur le site réel:

Figure. 2.2. Numérotation d'un numéro arbitraire dans une liste numérotée

Dans l'image ci-dessus, nous avons numéroté une liste à partir de douze, alors qu'il y avait des marqueurs sous forme de lettres latines minuscules. Maintenant, je pense qu'il est devenu évident comment utiliser ces attributs dans vos projets.

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

3. Comment faire une liste multi-niveaux (intégrée) dans HTML

Les listes multi-niveaux sont utilisées sur le site dans la construction du menu. Ce menu ressemble le plus souvent à (CO Leçon) ou en tombant à gauche ou à droite. De tels menus vous permettent de stocker d'autres éléments de menu sous une forme compacte.

Sur l'exemple des modèles de voitures, nous créerons une liste multi-niveaux dans HTML:

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

<hTML\u003e <tête\u003e <titre\u003eListe des étiquettes imbriquées HTML</ titre\u003e </ Tête\u003e <corps\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo.</ Li\u003e <li\u003eC1.</ Li\u003e <li\u003eC2.</ Li\u003e <li\u003eC3 Picasso.</ Li\u003e <li\u003eC4 Grand Picasso.</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eKia.</ Li\u003e <li\u003eToyota.</ Li\u003e <li\u003eAudi.</ Li\u003e <li\u003eLexus.</ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Veuillez noter comment la liste multi-niveaux dans le navigateur ressemble à:

Figure. 3.1. Un exemple de liste multi-niveaux dans HTML

Nous avons fait une liste multi-niveaux à l'aide d'une étiquette (étiquette

Mais nous pouvons combiner des listes multi-niveaux avec numérotées et étiquetées 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\u003e <tête\u003e <titre\u003eListes numérotées, étiquetées et multi-niveaux dans HTML</ titre\u003e </ Tête\u003e <corps\u003e <ul\u003e <li\u003ePremier groupe de tulipes<ol\u003e <li\u003ePremière année<ul\u003e <li\u003eTulipes précoces simples</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eSeconde classe<ul\u003e <li\u003eTerry Tulipes</ Li\u003e </ ul\u003e. </ Li\u003e </ ol\u003e </ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Dans l'exemple ci-dessus, nous avons la double imbrication (niveau 2). Premièrement, la liste de deux classes de tulipes est investie, il est numéroté. Ensuite, une liste marquée est investie dans chacun des éléments de la liste numérotée.

Nous examinons sa vue dans le navigateur:

4. Matériel utile sur les listes HTML

Voici les informations pour lesquelles la compréhension des propriétés CSS est nécessaire. Pour ce faire, je recommande d'explorer les leçons suivantes :. Tous les exemples seront immédiatement avec code source Et divisé en onglets HTML (structure), CSS (styles) et résultat.

4.1 Comment faire une liste de HTML dans une chaîne

Rendre la liste HTML dans la chaîne peut être nécessaire lors de la création d'un menu horizontal. Rendez-le très simple:

4.2 Comment faire une liste de HTML sans icône

Pour cela correspond à la propriété de type de style de liste dans CSS (plus):

4.3 Comment faire une liste dans HTML au centre

L'élément de liste est un élément de bloc, il est donc nécessaire de l'aligner au centre par des tirettes externes. Mais il y a un point important - nous devons spécifier explicitement la largeur afin que l'alignement fonctionnait:

4.4 Comment faire une liste dans HTML avec des images

Juste une seule propriété de style liste CSS-style. À l'intérieur de l'URL indiquent l'adresse à l'icône. Je veux juste remarquer que l'image est préférable de ramasser petit immédiatement, car la hauteur de la ligne de liste dépend de celui-ci:

4.5 Liste de la liste HTML marquée Votre marqueur

Dans ce cas, il est nécessaire de connecter des icônes de police à l'avance (par exemple, fontawesome). Ensuite, vous pouvez faire une icône au lieu d'un marqueur standard:

4.6 Comment faire une liste dans HTML dans plusieurs colonnes

Pour effectuer une liste de plusieurs colonnes, nous utiliserons la propriété Column-comptage CSS (la propriété est prise en charge uniquement dans les navigateurs suivants: c'est-à-dire 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 partition dans plusieurs colonnes:

5. Pratiquez travailler avec des listes

Sur la vidéo ci-dessous, vous pouvez voir tout le travail avec listes HTML sur la pratique:

Listes HTML Utilisé pour grouper des fragments d'informations connectés connectés. Il existe trois types de listes:

lister —

marqueur marqué
liste numérotée —
1. marqué d'un nombre
  liste des définitions - - consiste en des termes de la vapeur
  —
  Définition.
  Chaque liste est un conteneur à l'intérieur desquels les éléments de la liste ou les paires sont définis. Les éléments de liste se comportent comme des éléments de blocs, situés les uns dans les autres et occupant toute la largeur du conteneur. Chaque élément de la liste a bloc supplémentaireSitué sur le côté qui ne participe pas à la mise en page.
  
  Création de listes HTML
  
  1. Liste marquée
  
  Lister représente une liste non ordonnée (de la liste anglaise non ordonnée). Créé avec une étiquette de paire
  . En tant que marqueur de l'élément de la liste, l'étiquette est l'étiquette, par exemple un cercle crémeux.
  Les navigateurs par défaut Ajoutez la mise en forme suivante du bloc de liste:
  Chaque élément de la liste est créé à l'aide d'une étiquette de paire
2. (de l'article de la liste anglais).
- Microsoft.
- Google
- Pomme.
Figure. 1. Liste marquée
2. Liste numérotée

Liste numérotée Créé avec une étiquette de paire. Chaque élément de liste est également créé à l'aide d'un élément.
. Les numéros de navigateur Les éléments en ordre sont automatiquement et si vous supprimez un ou plusieurs éléments d'une telle liste, les autres numéros seront automatiquement recalculés.
Le bloc de liste a également un style de navigateur par défaut:
l'attribut de valeurs est disponible, ce qui vous permet de modifier le numéro par défaut pour l'élément de liste sélectionné. Par exemple, si pour la première liste de l'élément de la liste

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

Pour la balise

Attribut	La description
Renversé	L'attribut inversé définit l'affichage de la liste dans l'ordre inverse (par exemple, 9, 8, 7 ...).
Démarrer.	L'attribut de démarrage définit la valeur initiale à partir duquel le nombre de numérotation ira, par exemple, conception Le premier point sera attribué au numéro de séquence "10". Vous pouvez également spécifier simultanément le type de numérotation, par exemple, .
Taper	L'attribut de type définit la vue du marqueur à utiliser dans la liste (sous forme de lettres ou de chiffres). Valeurs totales: 1 - Valeur par défaut, numérotation décimale. A - Liste de numérotation par ordre alphabétique, lettres majuscules (A, B, C, D). A - Numérotation de la liste par ordre alphabétique, minuscule (A B C D). Je suis la numérotation des capitales romaines (I, II, III, IV). I - Numéroter Roman nombres en dentelle (I, II, III, IV).

Microsoft.
Google
Pomme.

3. Liste des définitions

Listes de définitions Créé par balise

Le bloc de liste de définitions dispose des styles de navigateur par défaut suivants:

Pour Tagov

et

Disponible.

Producteur:: Peter Tchimin
Jeter:: Andrei Gaidulan; Alexey Gavrilov; Vitaly gogunsky; Mariya Kozhevnikova

Figure. 3. Liste des définitions

4. Liste imbriquée

Souvent, il n'ya pas assez de possibilités de simples listes, par exemple, lors de la création d'une table des matières ne peut pas se passer de articles imbriqués. Le marquage de la liste ci-jointe sera la suivante:

Paragraphe 1.
Point 2.
- Sous-alinéa 2.1.
- Alinéa 2.2.
  - Alinéa 2.2.1.
  - Alinéa 2.2.2.
- Alinéa 2.3.
Point 3.

Figure. 4. Liste imbriquée

5. Liste numérotée à plusieurs niveaux

La liste multi-niveaux est utilisée pour afficher les éléments de la liste à différents niveaux avec des incidents différents. Le marquage pour une liste numérotée à plusieurs niveaux sera la suivante:

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

Un tel balisage par défaut créera une nouvelle numérotation qui commence à l'unité à chaque liste soumise. Pour effectuer la numérotation nominale, vous devez utiliser les propriétés suivantes:
Contre-réinitialisation réinitialise un ou plusieurs mètres en définissant une valeur pour la réinitialisation;
Contre-incrément spécifie la valeur de l'incrément du compteur, c'est-à-dire Avec quelle étape sera numéroté chaque paragraphe suivant;
Contenu - contenu généré, dans ce cas, il est responsable de la sortie de la pièce avant chaque liste.

Ol (/ * supprimer la numérotation standard * / style de liste: Aucun; / * Nous identifions le compteur et donnons le nom Li. La valeur de compteur n'est pas spécifiée - par défaut, il est 0 * / Contre-réinitialisation: LI;) LI: Avant (/ * Nous définissons un élément qui sera numéroté - LI. Le pseudo-élément avant indique que le contenu inséré à l'aide de la propriété de contenu sera situé avant les éléments de la liste. Ici la valeur d'incrément du mètre est définie (par défaut est 1 ). * / Contre-incrète: LI; / * Utilisation de la propriété Contenu, la liste de l'élément de liste est affichée. Les compteurs () signifie que le texte généré est les valeurs de tous les mètres avec le même nom. Point dans des citations ajoute un point de séparation entre les nombres et le point avec un espace est ajouté avant le contenu de chaque liste de * / contenu: compteurs (LI, ".") ".";)
Figure. 5. Liste numérotée à plusieurs niveaux

Dans le langage de balisage HTML Hypertext, il y a une étiquette

Syntaxe Tag

Élément n ° 1.

Élément n ° 2.

Élément n ° 3.

...

Ce code est converti dans une liste marquée sur le site:

Élément n ° 1.
Élément n ° 2.
Élément n ° 3.

Étiqueter

nécessite une utilisation obligatoire d'une étiquette de fermeture

Pour la formation des éléments de liste, une balise paire est utilisée. Il existe des mots, des phrases, des paragraphes, des images, des morceaux de code et plus encore, qui sont le contenu de la liste marquée, sont situés entre les étiquettes d'ouverture et de fermeture.

Que peut être le contenu de la liste marquée?

Celles-ci peuvent être diverses textes, notamment des mots simples, des expressions et des paragraphes, des images, des listes investies, des tranches de code PHP et bien plus encore, ont besoin d'étiquetage simple.

Chaque élément de la liste marquée se retire par défaut de 40 pixels à droite. Utilisant styles CSS., Nous pouvons changer l'affichage de cette liste à votre discrétion. Étiqueter

Il est autorisé à investir "liste dans la liste"

par example

Élément n ° 1.

Élément n ° 2-1.

Élément n ° 2-2.

Élément n ° 2-3.

Élément n ° 3.

...

Attributs et propriétés d'étiquette

Attribut de balises largement répandu

1. Tapez \u003d "disque" - un marqueur sous la forme d'une tasse peinte (cette valeur est déterminée par défaut). Un exemple avec un disque était légèrement plus élevé.

2. Tapez \u003d "cercle" - un marqueur sous la forme d'une tasse transparente

Par example:

Élément n ° 1.

Élément n ° 2.

Élément n ° 1.
Élément n ° 2.

3. Tapez \u003d "carré" - un marqueur sous la forme d'un carré