HTML-Listen Beschreibung
Eine Beschreibung Liste, die von Name-Wert-Gruppen besteht, und wurde als ein Definitionsliste vor HTML5 bekannt. Beschreibung Listen werden für Gruppen von „Begriffen und Definitionen, Metadaten Themen und Werten, Fragen und Antworten, oder anderer Gruppen von Name-Wert-Daten“ bestimmt.
DL gab es in HTML-Tags, und wurde in HTML 2.0 standardisiert; immer noch aktuell.
Beispiel einer ungeordneten Liste und eine geordnete Liste in HTML:
Ungeordnete Liste:
- Artikel
- Artikel
- Artikel
- Artikel
Bestellliste:
- Erster Punkt
- Zweiter Punkt
- drittes Element
- Vierter Punkt
Ungeordnete HTML-Listen
Eine ungeordnete Liste beginnt mit dem <ul> -Tag. Jeder Listeneintrag beginnt mit dem <li> -Tag.
Die Listenelemente werden mit Kugeln markiert werden (small black circles) :
Ungeordnete HTML - Listen - Das Style - Attribut
Ein style - Attribut kann zu einer ungeordneten Liste hinzugefügt werden, um den Stil des Markers zu definieren:
| Stil | Beschreibung |
|---|---|
| list-style-type:disc | Die Listenelemente werden mit Kugeln markiert werden (default) |
| list-style-type:circle | Die Listenelemente werden mit Kreisen markiert |
| list-style-type:square | Die Listenelemente werden mit Quadraten markiert |
| list-style-type:none | Die Listenelemente werden nicht bewertet |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Versuch es selber " Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Versuch es selber " Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Versuch es selber " None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Versuch es selber " Bestellen HTML-Listen
Eine geordnete Liste beginnt mit dem <ol> -Tag. Jeder Listeneintrag beginnt mit dem <li> -Tag.
Die Listenelemente werden mit Zahlen markiert werden:
Bestellte HTML - Listen - Der Type Attribut
Ein type - Attribut kann auf eine geordnete Liste hinzugefügt werden, die Art der Markierung zu definieren:
| Art | Beschreibung |
|---|---|
| type="1" | Die Listenelemente werden mit Zahlen nummeriert werden (default) |
| type="A" | Die Listenelemente werden mit Großbuchstaben zu nummerieren |
| type="a" | Die Listenelemente werden mit Kleinbuchstaben zu nummerieren |
| type="I" | Die Listenelemente werden mit Groß römischen Zahlen nummeriert werden |
| type="i" | Die Listenelemente werden mit Klein römischen Zahlen nummeriert werden |
Groß römische Zahlen:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Versuch es selber " Kleine römische Zahlen:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Versuch es selber " HTML Beschreibung Listen
HTML unterstützt auch Beschreibungslisten.
Eine Beschreibung Liste ist eine Liste von Begriffen, mit einer Beschreibung der einzelnen Begriff.
Das <dl> Tag definiert die Beschreibung Liste, die <dt> Tag definiert den Begriff (name) und der <dd> Tag beschreibt jeden Begriff:
Beispiel
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Versuch es selber " Verschachtelte HTML-Listen
Liste können verschachtelt werden (lists inside lists) von (lists inside lists) :
Beispiel
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Versuch es selber " Listenelemente können neue Liste enthalten und andere HTML-Elemente, wie Bilder und Links, etc.
Horizontal-Listen
HTML-Listen können auf viele verschiedene Arten mit CSS gestylt werden.
Eine beliebte Art und Weise, ist, eine Liste stylen horizontal angezeigt werden:
Beispiel
<!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> Versuch es selber " Mit ein wenig mehr Stil, können Sie es wie ein Menü aussehen:
Beispiel
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;
} Versuch es selber " Kapitelzusammenfassung
- Verwenden Sie das HTML <ul> Element eine ungeordnete Liste zu definieren ,
- Verwenden Sie das HTML - style - Attribut , um die Aufzählungszeichen zu definieren
- Verwenden Sie das HTML <ol> Element eine geordnete Liste zu definieren ,
- Verwenden , um das HTML - type - Attribut des Nummerierungstyp definieren
- Verwenden Sie den HTML <li> Element ein Listenelement zu definieren ,
- Verwenden Sie das HTML <dl> Element eine Beschreibung Liste zu definieren ,
- Verwenden Sie das HTML <dt> Element der Beschreibung Begriff definieren
- Verwenden Sie das HTML <dd> Element der Beschreibungsdaten zu definieren ,
- Listen können innerhalb von Listen verschachtelt werden
- Listenelemente können andere HTML-Elemente enthalten
- Verwenden Sie die CSS - Eigenschaft display: inline eine Liste angezeigt werden horizontal
Testen Sie sich mit Übungen!
Aufgabe 1 » Übung 2» Exercise 3 » Exercise 4» Exercise 5 » Exercise 6»
HTML Liste Schlagwörter
| Etikett | Beschreibung |
|---|---|
| <ul> | Definiert eine ungeordnete Liste |
| <ol> | Definiert eine geordnete Liste |
| <li> | Definiert ein Listenelement |
| <dl> | Definiert eine Beschreibungsliste |
| <dt> | Definiert den Begriff in einer Beschreibungsliste |
| <dd> | Definiert die Beschreibung in einer Beschreibungsliste |