HTML-Listenelemente

Sortierliste <ol>

Mit dem Sortierlisten-Tag (<ol>) erstellte Listen enthalten in jedem Listenelement eine fortlaufende Nummer. Dies ist eine Standardeinstellung der sortierten Listenstruktur. Das Erscheinungsbild kann über die CSS-Einstellungen angepasst werden.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ol>

Standardmäßige <ol> CSS-Struktur

ol {
   display: block;
   list-style-type: decimal;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

Mit dem <ol>-Tag kompatible Browser

Klicken Sie auf den Link https://caniuse.com/?search=ol, um die aktuelle Version der obigen Tabelle und weitere Details anzuzeigen.

Ungeordnete Liste <ul>

Listen, die mit dem <ul>-Tag erstellt werden, haben einen Punkt am Anfang jedes Listenelements. Dies ist eine standardmäßige CSS-Eigenschaft des <ul>-Tags und kann in den Einstellungen angepasst werden.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Standardmäßige <ul> CSS-Struktur

ul {
   display: block;
   list-style-type: disc;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

Mit dem <ul>-Tag kompatible Browser

Klicken Sie auf den Link https://caniuse.com/?search=ul, um die aktuelle Version der obigen Tabelle und weitere Details anzuzeigen.

Listenelement <li>

Das Listenelement-Tag (<li>) wird innerhalb von sortierten Listen (<ol>) und ungeordneten Listen (<ul>) verwendet; seine Verwendung außerhalb dieser Tags ist technisch nicht korrekt.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Standardmäßige <li> CSS-Struktur

li {
   display: list-item;
   text-align: -webkit-match-parent;
}

Mit dem <li>-Tag kompatible Browser

Klicken Sie auf den Link https://caniuse.com/?search=li, um die aktuelle Version der obigen Tabelle und weitere Details anzuzeigen.