HTML-Listenelement: Beherrschen von ungeordneten und nummerierten Listen

Einführung

HTML-Listen werden verwendet, um Elemente als Liste anzuzeigen, und sie spielen eine entscheidende Rolle in der Webentwicklung. Das HTML-Tag li wird verwendet, um ein Element in einer Liste zu definieren. Das li-Tag wird mit dem ul- oder ol-Tag verwendet und eignet sich hervorragend zum Erstellen von ungeordneten und nummerierten Listen. In diesem Lab wird Schritt-für-Schritt-Anleitung dazu gegeben, wie man HTML-Listen mit dem li-Tag erstellt.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70788{{"HTML-Listenelement"}} html/lists_desc -.-> lab-70788{{"HTML-Listenelement"}} html/inter_elems -.-> lab-70788{{"HTML-Listenelement"}} html/custom_attr -.-> lab-70788{{"HTML-Listenelement"}} end

Erstellen einer ungeordneten Liste

Wir können eine ungeordnete Liste mit dem HTML-Tag ul erstellen. Um Elemente zur Liste hinzuzufügen, sollten wir das li-Tag verwenden. Lassen Sie uns eine ungeordnete Liste mit drei Elementen erstellen.

<!-- index.html -->

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Im obigen Code haben wir das ul-Tag verwendet, um eine ungeordnete Liste zu erstellen, und das li-Tag, um jedes Element in der Liste zu definieren.

Erstellen einer nummerierten Liste

Das Erstellen einer nummerierten Liste ähnelt sehr dem Erstellen einer ungeordneten Liste, der einzige Unterschied besteht darin, dass das ol-Tag statt des ul-Tags verwendet wird. Lassen Sie uns eine nummerierte Liste mit drei Elementen erstellen.

<!-- index.html -->

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Im obigen Code haben wir das ol-Tag verwendet, um eine nummerierte Liste zu erstellen, und das li-Tag, um jedes Element in der Liste zu definieren.

Hinzufügen von Attributen zum `li`-Tag

Das li-Tag unterstützt mehrere Attribute, die verwendet werden können, um den Stil des Listenelement-Pfeils zu ändern. Ein häufig verwendetes Attribut ist das type-Attribut, das verwendet werden kann, um den Pfeil des Listenelements zu ändern. Lassen Sie uns die ungeordnete Liste aus Schritt 1 mit dem type-Attribut aktualisieren.

<!-- index.html -->

<ul>
  <li type="circle">Element 1</li>
  <li type="disc">Element 2</li>
  <li type="square">Element 3</li>
</ul>

Im obigen Code haben wir das type-Attribut verwendet, um verschiedene Pfeile zu den Listenelementen hinzuzufügen. Wir haben den Wert circle verwendet, um den Pfeil zu einem nicht ausgefüllten Kreis zu machen, den Wert disc verwendet, um den Pfeil zu einem ausgefüllten Kreis zu machen, und den Wert square verwendet, um den Pfeil zu einem ausgefüllten Quadrat zu machen.

Verschachteln von Listen

Wir können mehrere Listen innerhalb einer einzigen Liste verschachteln. Lassen Sie uns eine nummerierte Liste erstellen und eine ungeordnete Liste innerhalb des zweiten Elements der nummerierten Liste hinzufügen.

<!-- index.html -->

<ol>
  <li>Element 1</li>
  <li>
    Element 2
    <ul>
      <li>Unterelement 1</li>
      <li>Unterelement 2</li>
    </ul>
  </li>
  <li>Element 3</li>
</ol>

Im obigen Code haben wir das ul-Tag verwendet, um eine ungeordnete Liste zu erstellen, und das li-Tag, um jedes Element in der Liste zu definieren. Wir haben auch eine ungeordnete Liste innerhalb des zweiten Elements der nummerierten Liste verschachtelt.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man HTML-Listen mit dem li-Tag erstellt. Wir haben begonnen, indem wir eine ungeordnete Liste mit dem ul-Tag und dem li-Tag erstellt haben. Danach haben wir eine nummerierte Liste mit dem ol-Tag und dem li-Tag erstellt. Wir haben auch gelernt, wie man Attributen zum li-Tag hinzufügt, um den Stil des Listenelement-Pfeils zu ändern. Schließlich haben wir gelernt, wie man mehrere Listen innerhalb einer einzigen Liste verschachtelt.

HTML-Listenelement