Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML.
Ci-dessus: Langue de balisage - Point d'ancrage
Source originale Chapitre 8 Parlons à nouveau de la liste
Auparavant, dans le premier chapitre, nous avons discuté de plusieurs façons de marquer les listes, étudiant les avantages de les marquer comme des listes désordonnées avec <ul> et <li>. Cette méthode peut identifier la structure de la liste, s'assurer que tous les navigateurs et périphériques peuvent afficher correctement son contenu et nous permettre également de lui ajouter divers styles avec CSS.
Dans divers environnements, il n'est pas difficile de remplir l'intégralité du livre en écrivant toutes les pratiques de marquage des listes lorsqu'il s'agit de problèmes individuels. Je ne prévois pas de remplir le livre entier, mais je prévois de discuter de plusieurs autres catégories de listes dans un chapitre indépendant en plus des listes désordonnées. Recherchez plusieurs situations adaptées à l'utilisation de listes.
Les listes de contrôle sont un outil puissant pour organiser la structure des pages, ajoutant un sens à chaque projet indépendant, vous permettant d'ajouter des styles indépendants plus tard dans CSS.
Examinons d'abord la liste des projets numérotés et deux façons de marquer ces listes. Vous pouvez peut-être voir quelle méthode est la plus bénéfique en un coup d'œil, mais je vais toujours expliquer cet exemple en détail pour souligner l'importance du marquage structuré et utiliser les bons outils pour résoudre les problèmes. Quelle est la meilleure façon de marquer une liste de projets numérotés?
Supposons que vous prévoyez de marquer une liste de pas, chaque projet a un nombre auparavant, nous étudierons deux méthodes différentes qui peuvent atteindre cet objectif et expliquer pourquoi une certaine méthode est plus applicable. Méthode A: commande dans le chaos
<ul>
<li> 1. Hacher les oignons. </li>
<li> 2. Faire sauter les oignons pendant 3 minutes. </li>
<li> 3. Ajouter 3 clloves d'ail. </li>
<li> 4. Cuire encore 3 minutes. </li>
<li> 5. Manger. </li>
</ul>
La liste précédente peut être l'une des pires recettes de l'histoire de la cuisine. Mais il est tout à fait approprié de l'utiliser comme un exemple simple, l'ajout d'un peu de sel et d'œufs pourrait être mieux, ou ... quoi qu'il arrive, de retour au point.
Méthode A Nous choisissons de marquer ces étapes avec une liste non ordonnée afin d'obtenir tous les avantages que nous avons mentionnés dans le chapitre 1, nous ajoutons de la structure au contenu et savons que la plupart des navigateurs, des lecteurs d'écran et d'autres appareils peuvent gérer correctement cette partie, et nous pouvons également utiliser CSS pour le styliser facilement, ce qui est génial! Mais ... jeux numériques
Puisqu'il s'agit d'une liste numérotée, nous ajoutons des nombres avant chaque projet et suivis d'une période pour identifier l'ordre de chaque étape, mais que devons-nous faire si nous devons ajouter de nouvelles étapes entre les étapes 2 et 3? Maintenant, nous devons renuméter tous les articles après les nouvelles étapes (manuellement). Cette liste n'est pas un problème, mais si vous modifiez une liste de 100 éléments, le processus de modification deviendra très fastidieux. Les petits symboles à points apparaissent
Puisque nous marquons la structure dans cet exemple avec une liste non ordonnée, nous verrons un petit symbole de points avant chaque projet numéroté (comme la figure 8-1). Vous aimerez peut-être le petit symbole de points. Si vous ne l'aimez pas, bien sûr, vous pouvez le supprimer via CSS, mais vous verrez certainement ces petits symboles de points lorsque vous parcourez cette liste sans utiliser CSS.
Figure 8-1, Résultats du navigateur Close CSS Méthode de lecture A
Il existe une méthode plus simple, plus significative et plus facile à entretenir. Jetons un coup d'œil à la méthode B. Méthode B: Liste commandée
<l>
<li> Hacher les oignons. </li>
<li> Faire sauter les oignons pendant 3 minutes. </li>
<li> Ajouter 3 clloves d'ail. </li>
<li> Cuire encore 3 minutes. </li>
<li> manger. </li>
</l>
Je suis sûr que c'est ce que la plupart des gens choisissent de faire, mais cela ne signifie pas que nous n'utilisons pas la méthode A. <OL> pour une raison quelconque d'utiliser la liste ordonnée, donc sémantiquement, nous utilisons les éléments corrects pour résoudre le problème entre nos mains. Quoi de plus spécial dans la méthode B? Numérotation automatique
Peut-être que vous constatez que nous n'avons pas à numéroter manuellement chaque élément de liste. Lorsque vous utilisez <lo ol>, nous générerons automatiquement des nombres dans l'ordre. Si notre liste de pas contient plus de 100 éléments et que nous devons insérer quelques nouvelles étapes au milieu, nous devons simplement insérer un nouvel élément <li> dans la position correcte, et le navigateur le renira automatiquement, tout comme la magie.
Si vous utilisez la méthode A, nous devons corriger manuellement tous les nombres lors de l'insertion de chaque projet. Je peux facilement penser à un travail plus intéressant à faire ...
Figure 8-2, l'effet de la onzième version de la méthode d'affichage du navigateur B, a ajouté automatiquement un nombre avant chaque étape.
Figure 8-2 L'effet heureux de la méthode d'affichage du navigateur B, partie 2
Un autre avantage de la méthode B est que lorsqu'un élément de liste longue est rompu, il sera en retrait après le numéro généré, tandis que la méthode A sera pliée en dessous du numéro (figure 8-3)
Figure 8-3 Comparaison de la liste des nouveaux effets de ligne de la méthode A et de la méthode B
Bien que les styles de numérotation prédéfinis d'une liste ordonnée soient généralement des chiffres arabes (1,2,3,4,5, etc.), nous pouvons remplacer le style de numérotation en utilisant l'attribut de type de style liste de CSS. Le type de style liste peut être sélectionné dans l'une des éléments suivants: décimal: 1,2,3,4, ... (généralement la valeur préréglée) Upper-alpha: a, b, c, d ... inférieur-alpha: a, b, c, d ... supérieur-roman: i, ii, iii, iv ... inférieur-roman: i, iii, iv ... Aucun: pas de numéro
Ainsi, par exemple, si nous voulons que la méthode B produise un numéro de capital romain, nous pouvons réaliser le CSS suivant:
ol li {
Type de style liste: Upper-Roman;
}
La figure 8-4 est l'effet d'affichage de la méthode B avec ce CSS dans le navigateur. Notre liste de pas n'est plus des chiffres arabes prédéfinis, mais est remplacé par des chiffres romains. Bien sûr, les pièces marquées sont toujours exactement les mêmes. Avez-vous changé d'avis? Faites simplement quelques petits modifications et changez par d'autres styles énumérés plus tôt, et vous pouvez immédiatement modifier la méthode de numérotation de la liste en ce que vous aimez.
Figure 8-4 Liste des commutateurs ordonnés aux chiffres romains
Attribut de type HTML: Avant, certaines personnes peuvent utiliser l'attribut de type directement dans la balise <lo ol>, en modifiant la méthode de numérotation de la liste en chiffres romains, en lettres anglaises, etc. Cependant, afin de prendre en charge les règles CSS mentionnées précédemment, il n'est pas recommandé d'utiliser l'attribut type puisque la norme HTML 4.01. Par conséquent, vous ne devez plus utiliser l'attribut type, vous devez utiliser CSS à la place.
Plus tard, dans l'extension de la pointe, nous styliserons cette liste commandée avec CSS. Mais maintenant, regardons un autre exemple de type de liste.
Page précédente 1 2 3 Page suivante Lire le texte intégral