Inhaltsverzeichnis

Die Anleitung zu HTML Lists

View more Tutorials:

1- HTML Lists

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>

2- Ordered-List Attributes

Ä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>

3- CSS Lists

View more Tutorials: