LabEx
AnmeldenKostenlos beitreten

HTML ungeordnete Liste

HTMLHTMLBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

Das ul-Tag in HTML wird verwendet, um eine ungeordnete Liste zu erstellen, wobei die Elemente normalerweise als Aufzählungsliste gerendert werden. In diesem Labyrinth wird Ihnen gezeigt, wie Sie eine ungeordnete Liste mit HTML erstellen, und es werden Beispiele für die Syntax und Verwendung des ul-Tags bereitgestellt.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. 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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Setzen Sie die HTML-Dokumentstruktur ein

Erstellen Sie in einem neuen Projektordner eine Datei namens index.html und öffnen Sie die Datei in einem Code-Editor.

Erstellen Sie die grundlegende Struktur eines HTML-Dokuments, indem Sie die Tags html, head und body hinzufügen. Innerhalb des head-Tags fügen Sie das title-Tag hinzu und legen den Dokumenttitel auf "HTML Ungeordnete Liste Lab" fest.

<!doctype html>
<html>
  <head>
    <title>HTML Ungeordnete Liste Lab</title>
  </head>
  <body>
    <!-- Fügen Sie hier den Inhalt hinzu -->
  </body>
</html>

Erstellen Sie eine ungeordnete Liste mit dem ul-Tag

Innerhalb des body-Tags erstellen Sie eine ungeordnete Liste mit dem ul-Tag. Um Listenelemente hinzuzufügen, verwenden Sie das li-Tag innerhalb des ul-Tags.

<ul>
  <li>Dies ist der erste Eintrag in der Liste</li>
  <li>Dies ist der zweite Eintrag in der Liste</li>
  <li>Dies ist der dritte Eintrag in der Liste</li>
</ul>

Fügen Sie Attributte zum ul-Tag hinzu

Das ul-Tag hat keine spezifischen Attribute, unterstützt jedoch globale und Ereignisattribute. Hier ist ein Beispiel für das Hinzufügen des class-Attributs zum ul-Tag.

<ul class="my-list">
  <li>Dies ist der erste Eintrag in der Liste</li>
  <li>Dies ist der zweite Eintrag in der Liste</li>
  <li>Dies ist der dritte Eintrag in der Liste</li>
</ul>

Wenden Sie CSS-Stile auf das ul-Tag an

Um das ul-Tag zu gestalten, können Sie CSS verwenden. Im folgenden Beispiel setzen wir list-style-type auf 'quadratisch' und fügen Margen hinzu.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>Dies ist der erste Eintrag in der Liste</li>
  <li>Dies ist der zweite Eintrag in der Liste</li>
  <li>Dies ist der dritte Eintrag in der Liste</li>
</ul>

Verschachteln von ungeordneten Listen

Sie können eine ungeordnete Liste innerhalb einer anderen ungeordneten Liste verschachteln, indem Sie ein weiteres <ul>-Tag innerhalb eines <li>-Tags platzieren. Hier ist ein Beispiel für eine verschachtelte ungeordnete Liste.

<ul>
  <li>Dies ist der erste Eintrag in der übergeordneten Liste</li>
  <li>
    Dies ist der zweite Eintrag in der übergeordneten Liste
    <ul>
      <li>Dies ist ein verschachtelter Eintrag</li>
      <li>Dies ist ein weiterer verschachtelter Eintrag</li>
    </ul>
  </li>
  <li>Dies ist der dritte Eintrag in der übergeordneten Liste</li>
</ul>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie eine ungeordnete Liste mit dem ul-Tag in HTML erstellen. Sie haben auch gelernt, wie Sie Attributte und CSS-Stile zum ul-Tag hinzufügen. Denken Sie daran, dass das ul-Tag verwendet wird, um eine Aufzählung von Elementen mit Aufzählungszeichen zu erstellen. Das ul-Tag erfordert das Start- und Endtag, und die Listenelemente sollten mit dem li-Tag innerhalb des ul-Tags hinzugefügt werden. Sie können eine ungeordnete Liste innerhalb einer anderen ungeordneten Liste verschachteln, indem Sie ein weiteres ul-Tag innerhalb eines li-Tags platzieren.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

HTML
Anfänger
Schnellstart mit HTML

Schnellstart mit HTML

HTML
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger