codestory

Die Anleitung zu HTML Lists

  1. HTML Lists
  2. Ordered-List Attributes
  3. CSS Lists

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

Neueste Artikel

Show More