Die Anleitung zu HTML Lists
View more Tutorials:
Im HTML können Sie ein Paar vom Tag <ul>, <li> oder Tag-Paar <ol>, <li> benutzen um eine Liste zu erstellen:

<h3>Unordered List (UL + LI)</h3> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> <h3>Ordered List (OL + LI)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
- <UL> ist die Abkürzung von Unordered List, damit Sie eine unsortierte Liste erstellen können.
- <OL> ist die Abkürzung von Ordered List, damit Sie eine sortierte Liste erstellen können.
- <LI> ist die Abkürzung von List Item. Ein Item der Liste.
Die Liste können miteinander eingenistet werden:
nested-example.html
<h3>Nested Unordered List</h3> <ul> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ul> <h3>Nested Ordered List</h3> <ol> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ol> <h3>Nested List (3)</h3> <ol> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ol> <h3>Nested List (4)</h3> <ul> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ul>
Änders mit dem Tag <UL> hat der Tag <OL> einige wichtigen Attributen, umfassend:
- type
- start
- reversed
type
Das Attribut type legt das Numbering Typ fest, das eine der folgenden Werte erhalten kann:
Das Typ | Die Bezeichnung |
"1" | Benutzen Sie die Zählen (1,2,..) um die Liste zu numerieren. (Default) |
"a" | Benutzen Sie die Kleinbuchstabe um die Liste zu numerieren. |
"A" | Benutzen sie die Großbuchstabe um die Liste zu numerieren. |
"i" | Benutzen Sie die Kleinbuchstabe römanischen Nummer (Roman numerals) um die Liste zu numerieren. |
"I" | Benutzen Sie die Großbuchstabe römanischen Nummer (Roman numerals) um die Liste zu numerieren. |
<h3>OL type="1" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="i"</h3> <ol type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="I"</h3> <ol type="I"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="a"</h3> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="A"</h3> <ol type="A"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
reversed
Das Attribut reversed hat die Wert true/false. Wenn die Wert true ist, wird die Liste in die umgekehrte Reihe numeriert.
ol-reversed-example.html
<h3>OL reversed = "false" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL reversed = "true"</h3> <ol reversed="true"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
start
Das Attribut start legt die Beginn-Wert fest um die Liste zu numerieren.
ol-start-example.html
<h3>OL start ="3" type="1"</h3> <ol start="3"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="i"</h3> <ol start="3" type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="a"</h3> <ol start="3" type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>