Die Anleitung zu HTML List

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 list-style-type

Das Property  CSS list-style-type wird für das Tag  <UL> (Unordered List) benutzt um das Stil für die Items der Liste zu setzen.
CSS list-style-type kann eine der Werte erhalten:
  • disc
  • circle
  • square
  • none
ul-styles-example.html
<h3>list-style-type: dist (Default)</h3>

<ul style="list-style-type: dist;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: circle</h3>

<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: square</h3>

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: none</h3>

<ul style="list-style-type: none;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

4- CSS list-style-image

Das Property   CSS list-style-image wird für das Tag  <UL> benutzt um das ersetzte Foto von  ::marker ​​​​​​​anzuzeigen.
Achtung: list-style-image hat die Priörität als  list-style-type. Wenn das Foto, das durch  list-style-image angebot wird, nicht existiert oder nicht anzeigt, wird list-style-type benutzt.
<ul style="list-style-image: URL('../../_testdatas_/right-arrow-16.png')">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

5- CSS list-style-position

Das Property  CSS list-style-position wird für das Tag  <UL>, <OL> benutzt um die Position von  ::marker zu setzen.
Die möglichen Werte von  CSS list-style-position ​​​​​​​sind:
  • outside
  • inside
  • initial
  • inherit
list-style-position Die Bezeichnung
outside  ::marker liegen außer der items der Liste.
inside  ::marker liegen innerhalb der items der Liste.
list-style-position-example.html
<h3>list-style-position: outside (Default)</h3>

<ul style="list-style-position: outside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

<h3>list-style-position: inside</h3>

<ul style="list-style-position: inside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

6- CSS margin, padding

Das folgende Foto zeigt die Struktur von  HTML List, und Sie können  CSS benutzen um sein  margin/padding zu ändern.
Das Beispiel von angepassten  margin/padding vom  HTML List:
margin-padding-example.css
ul {
  background: #3399ff;
  padding: 20px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

ol {
  background: #ff9999;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
margin-padding-example.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS List</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="margin-padding-example.css" />
</head>

<body>

    <h3>ul {padding: 20px;} ul li {margin: 5px}</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

    <h3>ol {padding: 20px;} ol li {margin-left: 35px; padding: 5px;}</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>

</body>

</html>

View more Tutorials: