Comment créer une liste non ordonnée pour la programmation HTML5 et CSS3 - les nuls

Tous les types de listes en HTML5 sont étroitement liés. Le type de liste le plus simple et le plus courant est une liste non ordonnée. Vous pouvez également utiliser des listes ordonnées et des listes imbriquées en HTML.

Regardez une liste non ordonnée

Regardez la page simple. En plus de deux en-têtes, il contient une liste d'informations.

Cette liste de navigateurs a quelques caractéristiques visuelles intéressantes:

• Les articles sont en retrait. Il y a de l'espace supplémentaire entre la marge de gauche et le début de chaque élément de la liste.

• Les éléments de la liste ont des puces. Ce petit point devant chaque objet est une puce . Les puces sont couramment utilisées dans des listes non ordonnées comme celle-ci.

  

• Chaque élément commence une nouvelle ligne. Lorsqu'un élément de liste est affiché, il s'affiche sur une nouvelle ligne.

Ces caractéristiques vous aident à voir que vous avez une liste, mais ce ne sont que des comportements par défaut. Définir quelque chose comme une liste ne l'oblige pas à regarder d'une manière particulière; les valeurs par défaut vous aident à voir que ces éléments font effectivement partie d'une liste.

Rappelez-vous l'idée de base de HTML ici. Vous ne décrivez pas vraiment comment les choses ressemblent, mais ce qu'elles signifient. Vous pouvez changer l'apparence plus tard quand vous aurez compris CSS, alors ne vous laissez pas trop attacher à l'apparence particulière des choses. Pour l'instant, il suffit de reconnaître que HTML peut construire des listes, et assurez-vous de savoir comment utiliser les différents types.

Comment créer une liste non ordonnée

Les listes sont faites avec deux types d'étiquettes. Une étiquette entoure la liste entière et indique le type général de liste. Ce premier exemple montre une liste non ordonnée, entourée par la paire.

Note: Indenter tout le code à l'intérieur du

est commun. La liste non ordonnée peut aller dans le corps principal.

À l'intérieur de l'ensemblese trouve un certain nombre d'éléments de la liste. Chaque élément de la liste est stocké entre une balise

• (élément de liste) et une balise
. Normalement, chaque paireva sur sa propre ligne du code source, bien que vous puissiez créer un élément de liste aussi longtemps que vous le souhaitez.

Vous pouvez changer la puce pour toutes sortes d'autres images, y compris des cercles, des carrés et même des images personnalisées.

Le code de la liste non ordonnée est assez simple:

basicUL. html

Listes de base

Navigateurs Web courants

Firefox
Chrome
Internet Explorer
Opéra
Safari