HTML Listes Description de
Une liste de description, qui se compose de groupes de valeur nom, et était connu comme une liste de définitions avant HTML5. listes de description sont destinés à des groupes de « termes et définitions, sujets de métadonnées et les valeurs, les questions et les réponses, ou tout autre groupe de données nom-valeur ».
DL existait en balises HTML, et a été standardisé en HTML 2.0; encore en cours.
Exemple d'une liste non numérotée et une liste ordonnée en HTML:
Liste non ordonnée:
- Article
- Article
- Article
- Article
Liste ordonnée:
- premier élément
- deuxième élément
- troisième
- quatrième
Listes HTML désordonnées
Une liste non ordonnée commence par <ul> balise. Chaque élément de la liste commence par la <li> balise.
Les éléments de la liste seront marqués par des balles (small black circles) :
HTML désordonnées Listes - Le Style d' attributs
Un style de attribut peut être ajouté à une liste non ordonnée, pour définir le style du marqueur:
| Style | La description |
|---|---|
| list-style-type:disc | Les éléments de la liste seront marqués par balles (default) |
| list-style-type:circle | Les éléments de la liste seront marqués par des cercles |
| list-style-type:square | Les éléments de la liste seront marqués par des carrés |
| list-style-type:none | Les éléments de liste ne seront pas marqués |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Essayez vous - même » Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Essayez vous - même » Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Essayez vous - même » None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Essayez vous - même » Listes HTML commandés
Une liste ordonnée commence par <ol> balise. Chaque élément de la liste commence par la <li> balise.
Les éléments de la liste seront marqués par des chiffres:
Listes HTML - Le ordonné Type d' attribut
Un type attribut peut être ajouté à une liste ordonnée, pour définir le type de marqueur:
| Type | La description |
|---|---|
| type="1" | Les éléments de la liste seront numérotées avec des chiffres (default) |
| type="A" | Les éléments de la liste seront numérotées avec des lettres en majuscules |
| type="a" | Les éléments de la liste seront numérotées avec des lettres minuscules |
| type="I" | Les éléments de la liste seront numérotées avec des chiffres romains en majuscules |
| type="i" | Les éléments de la liste seront numérotées avec des chiffres romains minuscules |
Lettres capitales:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Essayez vous - même » Majuscules Nombres romains:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Essayez vous - même » Minuscules Nombres romains:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Essayez vous - même » HTML description Listes
HTML prend également en charge les listes de description.
Une liste de description est une liste de termes, avec une description de chaque terme.
La <dl> balise définit la liste de description, le <dt> balise définit le terme (name) , et <dd> balise décrit chaque terme:
Exemple
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Essayez vous - même » Listes emboîtés HTML
Liste peuvent être imbriquées (lists inside lists) à l' (lists inside lists) des (lists inside lists) :
Exemple
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Essayez vous - même » Liste des articles peuvent contenir la nouvelle liste, et d'autres éléments HTML, comme des images et des liens, etc.
Listes horizontales
listes HTML peuvent être coiffés de différentes façons avec CSS.
Une façon populaire, est de style une liste à afficher horizontalement:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> Essayez vous - même » Avec un peu de style supplémentaire, vous pouvez le faire ressembler à un menu:
Exemple
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} Essayez vous - même » Résumé du chapitre
- Utilisez le code HTML <ul> élément pour définir une liste non ordonnée
- Utilisez le code HTML de style attribut pour définir le style de puce
- Utilisez le code HTML <ol> élément pour définir une liste ordonnée
- Utilisez le code HTML de type attribut pour définir le type de numérotation
- Utilisez le code HTML <li> élément pour définir un élément de liste
- Utilisez le code HTML <dl> élément pour définir une liste de description
- Utilisez le code HTML <dt> élément pour définir le terme de description
- Utilisez le code HTML <dd> élément pour définir les données de description
- Les listes peuvent être imbriquées à l'intérieur des listes
- Liste des éléments peuvent contenir d'autres éléments HTML
- Utilisez l'affichage des propriétés CSS: inline pour afficher une liste horizontale
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
HTML Liste Mots clés
| Marque | La description |
|---|---|
| <ul> | Définit une liste non ordonnée |
| <ol> | Définit une liste ordonnée |
| <li> | Définit un élément de liste |
| <dl> | Définit une liste de description |
| <dt> | Définit le terme dans une liste de description |
| <dd> | Définit la description dans une liste de description |