Maison >interface Web >tutoriel HTML >Liste ordonnée HTML

Liste ordonnée HTML

WBOYoriginal: 2024-09-04 16:43:281164parcourir

Dans cette section, nous apprendrons comment implémenter des listes ordonnées en HTML. Comment décrire ou afficher une liste ordonnée ? C'est très simple et facile ; ils sont utilisés pour décrire la liste des informations contenues dans le contenu. Et une autre technique est qu'une seule liste peut contenir plusieurs éléments de liste.

Les listes en HTML peuvent être classées en trois types, ce sont :

Liste commandée
Liste non ordonnée
Liste de définitions

Dans cet article, nous passerons en revue la spécification de la liste ordonnée avec un exemple. La liste ordonnée définit les informations ordonnées spécifiques lorsqu'une liste est créée ; par exemple, il affiche des informations ordonnées ou numérote les informations.

Syntaxe de la liste ordonnée

La liste ordonnée est créée à l'aide d'une balise nommée

et se termine par étiquette.

Liste ordonnée HTML

Exemples de liste ordonnée

Voyons quelques exemples mentionnés ci-dessous :

Exemple n°1

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<p><strong>There are 6 different airlines:</strong></p>
<ol type="1">
<li>Jet Blue Airlines</li>
<li>Frontier Airlines</li>
<li>South West Airlines</li>
<li> Spirit Airlines</li>
<li> United Airlines</li>
<li>America Airlines</li> </ol>
</body>
</html>

Sortie :

Cela vous donnera le résultat comme

Liste ordonnée HTML

Exemple n°2

Liste commandée avec couleurs. Dans l'exemple suivant, nous avons utilisé une certaine propriété de compteur, définissant les éléments de liste de comptage automatique dans le

. C'est juste une variable interne de CSS pour activer les fonctions de comptage.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List with colors</title>
</head>
<body>
<style>
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
ol li:before {
color: #ff0000;
content: counter(list) ".";
left: -22px;
position: absolute;
text-align: center;
width: 24px;
}</style>
<ol>
<li><span> Norway is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>norway is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the toppest country in europe</span></li>
</ol><br/>
</body></html>

Sortie :
Liste ordonnée HTML

Types d'attributs pour la liste ordonnée HTML

Pour représenter la liste ordonnée, il existe cinq types d'attributs importants pour cette balise. Comme le HTML

1. L'attribut Type

Cet attribut donne le type de numérotation à utiliser dans la liste.

type =’a’ – Donne l’ordre alphabétique
type ='A'- Donne l'ordre alphabétique des majuscules
type =’i’ – Donne un nombre romain en minuscules
type = 'I'- Donne des nombres romains majuscules

Ces types de numérotation sont mentionnés ci-dessous :

Je. Type d'attribut = 'a.'

Pour faire une liste en minuscules alphabétiques, ce type est utilisé. L'exemple suivant montre la liste ordonnée en minuscules et en italique.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List types</title>
</head>
<body>
<style>
ol li span {
font-weight: normal;
}
</style>
<p>Did you know that:</p>
<p>Skills required to become a data Scientist</p>
<ol type="a" >
<li><span><i> steps</span></i></li>
<li><span><b>There should be a prior knowledge in SAS and R programming.</b></span></li>
<li><span><b>They should have a strong calibre in creativity and analysis</span><b></li>
</ol>
</body>
</html>

Sortie :

Liste ordonnée HTML

II. Type d'attribut = 'A.'

Une liste ordonnée peut avoir un attribut de type alphabet minuscule. L'exemple ci-dessous montre comment utiliser cet attribut dans la structure de liste et également comment mettre les lettres en gras. Pour avoir la liste ordonnée en gras, il faut la déclarer en utilisant